"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="radialGradient"
      cardStyle="elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="In Portal"
          navItems={[
            {"name":"Features","id":"features"},
            {"name":"About","id":"about"},
            {"name":"Community","id":"testimonials"},
            {"name":"Play","id":"contact"}
          ]}
          button={{
            "text":"Download Now",            "href":"#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="In Portal"
          description="Step into a mind-bending world where portals reshape reality. Solve intricate puzzles, defy physics, and uncover the secrets hidden between dimensions."
          imageSrc="https://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-26042.jpg"
          imageAlt="In Portal - immersive portal-based puzzle game"
          frameStyle="card"
          logoLineHeight={1.2}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Experience Portal Mastery"
          description="Discover what makes In Portal a revolutionary gaming experience"
          tabs={[
            {
              "id":"innovative-mechanics",              "label":"Innovative Mechanics",              "description":"Master the portal system with intuitive controls and mind-bending physics. Create portals, manipulate gravity, and solve puzzles that challenge your perspective on reality."
            },
            {
              "id":"immersive-world",              "label":"Immersive World",              "description":"Explore beautifully crafted environments that blend sci-fi aesthetics with mystery. Every level reveals new dimensions and hidden lore waiting to be discovered."
            },
            {
              "id":"cooperative-play",              "label":"Cooperative Play",              "description":"Team up with friends to tackle challenging co-op levels. Synchronize portals, combine abilities, and unlock unique solutions only possible together."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/lights-each-other-arranged-circular-order_181624-24792.jpg"
          imageAlt="In Portal gameplay showcasing portal mechanics"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why In Portal Stands Apart"
          description="See how In Portal revolutionizes puzzle gaming with cutting-edge mechanics and captivating storytelling"
          negativeCard={{
            "items":[
              "Repetitive puzzle patterns",              "Linear, predictable gameplay",              "Shallow story elements",              "Limited player agency"
            ]
          }}
          positiveCard={{
            "items":[
              "Dynamic portal-based challenges",              "Non-linear exploration and discovery",              "Deep narrative with multiple endings",              "Player-driven solutions and creativity"
            ]
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="In Portal by the Numbers"
          description="Join thousands of players experiencing the ultimate portal puzzle adventure"
          metrics={[
            {
              "id":"1",              "value":"500K+",              "title":"Active Players",              "description":"Growing community of puzzle enthusiasts worldwide",              "imageSrc":"https://img.b2bpic.net/free-photo/esports-tournament_23-2151954734.jpg",              "imageAlt":"Active gaming community"
            },
            {
              "id":"2",              "value":"50M+",              "title":"Hours Played",              "description":"Combined playtime across all portal dimensions",              "imageSrc":"https://img.b2bpic.net/free-photo/girlfriend-boyfriend-playing-video-games-together-home_23-2149142760.jpg",              "imageAlt":"Gameplay hours statistics"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              "id":"1",              "name":"Alex Rivera",              "imageSrc":"https://img.b2bpic.net/free-photo/hispanic-teenager-playing-video-game-holding-controller-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-3187.jpg",              "imageAlt":"Alex Rivera"
            },
            {
              "id":"2",              "name":"Jordan Chen",              "imageSrc":"https://img.b2bpic.net/free-photo/gamer-having-fun-while-playing-videogames_23-2149142688.jpg",              "imageAlt":"Jordan Chen"
            },
            {
              "id":"3",              "name":"Marcus Torres",              "imageSrc":"https://img.b2bpic.net/free-photo/man-with-glasses-playing-with-controller_23-2148422239.jpg",              "imageAlt":"Marcus Torres"
            },
            {
              "id":"4",              "name":"Sophie Lambert",              "imageSrc":"https://img.b2bpic.net/free-photo/front-view-guy-playing-with-controller_23-2148243691.jpg",              "imageAlt":"Sophie Lambert"
            },
            {
              "id":"5",              "name":"Kai Yamamoto",              "imageSrc":"https://img.b2bpic.net/free-photo/front-view-man-with-controller_23-2148542744.jpg",              "imageAlt":"Kai Yamamoto"
            },
            {
              "id":"6",              "name":"Emma Andersson",              "imageSrc":"https://img.b2bpic.net/free-photo/hispanic-teenager-playing-video-game-holding-controller-looking-camera-blowing-kiss-air-being-lovely-sexy-love-expression_839833-3185.jpg",              "imageAlt":"Emma Andersson"
            }
          ]}
          cardTitle="Join 500,000+ players who've experienced the portal revolution"
          cardTag="Player Testimonials"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Enter the Portal?"
          description="Download In Portal today and begin your interdimensional adventure. Subscribe for exclusive updates, early access to new levels, and community events."
          inputPlaceholder="your@email.com"
          buttonText="Download Game"
          termsText="By downloading, you agree to our Terms of Service and Privacy Policy. Unsubscribe anytime."
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              "title":"Game",              "items":[
                {"label":"Download","href":"#contact"},
                {"label":"Features","href":"#features"},
                {"label":"Community","href":"#testimonials"}
              ]
            },
            {
              "title":"Resources",              "items":[
                {"label":"Wiki","href":"#"},
                {"label":"Guides","href":"#"},
                {"label":"FAQ","href":"#"}
              ]
            },
            {
              "title":"Connect",              "items":[
                {"label":"Discord","href":"#"},
                {"label":"Twitter","href":"#"},
                {"label":"Twitch","href":"#"}
              ]
            },
            {
              "title":"Legal",              "items":[
                {"label":"Privacy","href":"#"},
                {"label":"Terms","href":"#"},
                {"label":"Contact","href":"#"}
              ]
            }
          ]}
          bottomLeftText="© 2025 In Portal. All rights reserved."
          bottomRightText="Made with passion by the Portal team"
        />
      </div>
    </ThemeProvider>
  );
}