"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import { Award, Instagram, MapPin, Twitter, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="large"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Schedule",          id: "schedule"},
        {
          name: "Venues",          id: "features"},
        {
          name: "FAQ",          id: "faq"},
      ]}
      brandName="World Cup 2026"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "plain"}}
      title="FIFA World Cup 2026"
      description="Experience the ultimate football tournament across North America. Get the full schedule, venue information, and stay updated with live match data."
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/view-empty-soccer-stadium-with-fantasy-dreamy-sky_23-2151563103.jpg",          imageAlt: "football stadium night lights"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-baseball-field_23-2150885209.jpg",          imageAlt: "soccer ball on grass"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536205.jpg",          imageAlt: "stadium crowd cheering"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-sportsman-with-ball-celebrating-victory_23-2147817375.jpg",          imageAlt: "soccer player action shot"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-soccer-field-illustration_23-2151539709.jpg",          imageAlt: "aerial view soccer stadium"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/marbled-blue-abstract-background-liquid-marble-pattern_1258-103297.jpg",          imageAlt: "abstract soccer dynamic shapes"},
      ]}
    />
  </div>

  <div id="schedule" data-section="schedule">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "104",          description: "Total Matches"},
        {
          id: "m2",          value: "48",          description: "National Teams"},
        {
          id: "m3",          value: "16",          description: "Host Cities"},
      ]}
      title="Tournament Milestones"
      description="Tracking the biggest global sporting event in history."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "MetLife Stadium",          description: "The largest host venue with massive capacity and state-of-the-art facilities.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/view-empty-soccer-stadium-with-fantasy-dreamy-sky_23-2151563012.jpg",            imageAlt: "stadium architecture exterior"},
          items: [
            {
              icon: MapPin,
              text: "East Rutherford, NJ"},
            {
              icon: Users,
              text: "82,500 Capacity"},
          ],
          reverse: false,
        },
        {
          title: "SoFi Stadium",          description: "A pinnacle of modern stadium design with cutting-edge fan experiences.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/red-empty-old-plastic-seats-stadium_1150-5283.jpg",            imageAlt: "luxurious stadium interior"},
          items: [
            {
              icon: MapPin,
              text: "Los Angeles, CA"},
            {
              icon: Zap,
              text: "High-tech screens"},
          ],
          reverse: true,
        },
        {
          title: "Estadio Azteca",          description: "The historic home of global football legends, ready for 2026.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/stadium-barcelona-from-helicopter-spain_1398-4989.jpg",            imageAlt: "famous soccer stadium"},
          items: [
            {
              icon: MapPin,
              text: "Mexico City, Mexico"},
            {
              icon: Award,
              text: "Legacy Venue"},
          ],
          reverse: false,
        },
      ]}
      title="Host City Venues"
      description="Explore the iconic stadiums that will host the most anticipated games in football history."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "When is the opening match?",          content: "The opening match is scheduled for June 11, 2026, at Estadio Azteca."},
        {
          id: "2",          title: "Where can I buy tickets?",          content: "Official tickets will be available via the FIFA World Cup ticketing portal closer to the event."},
        {
          id: "3",          title: "How many cities are hosting?",          content: "There are 16 host cities across Canada, Mexico, and the United States."},
      ]}
      title="Frequently Asked Questions"
      description="Find answers to everything you need to know about World Cup 2026."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Stay Updated"
      description="Sign up to receive the latest tournament news, ticket information, and match day alerts directly to your inbox."
      imageSrc="http://img.b2bpic.net/free-photo/soccer-players-action-professional-stadium_654080-1816.jpg"
      imageAlt="Soccer players in action on professional stadium"
      inputs={[
        {
          name: "fullName",          type: "text",          placeholder: "Full Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
        },
      ]}
      buttonText="Subscribe"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="WC2026"
      copyrightText="© 2026 FIFA World Cup™"
      socialLinks={[
        {
          icon: Twitter,
          href: "https://twitter.com",          ariaLabel: "Twitter"},
        {
          icon: Instagram,
          href: "https://instagram.com",          ariaLabel: "Instagram"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
