"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Heart, Smile, Shield, Gift, Mail, Users, Star } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Mojik"
          navItems={[
            { name: "Meet Mojik", id: "hero" },
            { name: "How It Works", id: "how-mojik-works" },
            { name: "Safety", id: "safety-trust" },
            { name: "For Families", id: "thoughtful-parents" }
          ]}
          button={{
            text: "Join Waitlist",            href: "#early-access"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="The AI toy kids won't want to put down"
          description="Mojik is a smart plush companion that talks, plays, and grows with your child — while giving parents a safer, calmer kind of tech. Early access now."
          background={{ variant: "plain" }}
          tag="Meet Mojik"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          testimonials={[
            {
              name: "Safe for home",              handle: "Always",              testimonial: "Age-appropriate, privacy-first, and thoughtfully designed.",              rating: 5
            },
            {
              name: "Ages 3–10+",              handle: "Perfect for",              testimonial: "Grows with your child through every stage.",              rating: 5
            },
            {
              name: "Early access now",              handle: "Join the",              testimonial: "Be among the first to bring Mojik home.",              rating: 5
            }
          ]}
          buttons={[
            { text: "Join the Waitlist", href: "#early-access" },
            { text: "See Mojik in action", href: "#how-mojik-works" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BDzEwjBs1dWpPT5VXSrEmnXmYO/uploaded-1774201748791-7x6alz3g.jpg"
          imageAlt="Mojik yellow AI plush toy"
          mediaAnimation="slide-up"
          imagePosition="right"
          useInvertedBackground={false}
        />
      </div>

      <div id="why-different" data-section="why-different">
        <FeatureCardTwentyFour
          title="There's something about Mojik"
          description="More than just a toy. Mojik is a companion that feels natural, warm, and genuinely helpful for growing minds."
          features={[
            {
              id: "1",              title: "Always ready",              author: "One more question?",              description: "Mojik never gets tired of answering, playing, or just listening.",              tags: ["responsive", "engaged"],
              imageSrc: "http://img.b2bpic.net/free-photo/surreal-rendering-kid-bounding-with-giant-stuffed-toy_23-2151341871.jpg?_wi=1",              imageAlt: "Child asking questions to Mojik toy"
            },
            {
              id: "2",              title: "Turns moments into stories",              author: "Imagination magic",              description: "Mundane moments become adventures. Mojik helps kids see the wonder in everyday.",              tags: ["creative", "imaginative"],
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-boys-girls-playing-playroom-generated-by-ai_188544-40719.jpg?_wi=1",              imageAlt: "Child creating stories with Mojik"
            },
            {
              id: "3",              title: "Take Mojik everywhere",              author: "True companion",              description: "Soft, portable, huggable. Mojik fits in backpacks, car seats, and hearts.",              tags: ["portable", "lovable"],
              imageSrc: "http://img.b2bpic.net/free-photo/little-kid-playing_23-2148836332.jpg",              imageAlt: "Kids playing with Mojik toy"
            },
            {
              id: "4",              title: "Feels like a toy, not a screen",              author: "Tangible magic",              description: "No screens, no glowing surfaces. Just a plush friend that talks, listens, and cares.",              tags: ["tactile", "screen-free"],
              imageSrc: "http://img.b2bpic.net/free-photo/family-having-quality-time-together_23-2149262182.jpg",              imageAlt: "Child learning with Mojik"
            },
            {
              id: "5",              title: "Calm, playful, never overwhelming",              author: "Gentle by design",              description: "Mojik knows when to chat and when to listen. Designed for peace, not overstimulation.",              tags: ["mindful", "gentle"],
              imageSrc: "http://img.b2bpic.net/free-photo/fairskinned-little-child-23-years-old-with-red-hair-wears-dress-toy-crown-magic-wand-home-children-lifestyle-concept_197531-32801.jpg",              imageAlt: "Child with Mojik at bedtime"
            },
            {
              id: "6",              title: "Hard to ignore",              author: "Irresistible charm",              description: "Kids come back to Mojik again and again. Not because they're glued to a screen, but because they want to.",              tags: ["engaging", "memorable"],
              imageSrc: "http://img.b2bpic.net/free-photo/casual-smiling-young-woman-knitted-clothes-holding-big-soft-teddy-bear_158595-1770.jpg?_wi=2",              imageAlt: "Mojik plush toy close-up"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="what-kids-do" data-section="what-kids-do">
        <MediaAbout
          title="What kids actually do with Mojik"
          description="Real moments, real joy. From silly questions to cozy routines, Mojik fits naturally into family life."
          tag="In-home moments"
          tagIcon={Heart}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/surreal-rendering-kid-bounding-with-giant-stuffed-toy_23-2151341871.jpg?_wi=2"
          imageAlt="Child interacting with Mojik"
          useInvertedBackground={false}
          buttons={[
            { text: "Learn more about play styles", href: "#how-mojik-works" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="thoughtful-parents" data-section="thoughtful-parents">
        <MediaAbout
          title="Cute for kids. Thoughtful for parents."
          description="Less passive screen time. More conversation, imagination, and genuine connection. Mojik is tech that feels like love, not replacement."
          tag="Parental peace of mind"
          tagIcon={Smile}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/family-celebrating-kid-his-first-years-life_23-2149219421.jpg"
          imageAlt="Parent watching child play with Mojik"
          useInvertedBackground={true}
          buttons={[
            { text: "See how parents stay connected", href: "#companion-app" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="how-mojik-works" data-section="how-mojik-works">
        <ProductCardTwo
          title="How Mojik works"
          description="Three simple steps to connection, play, and growth."
          products={[
            {
              id: "step-1",              brand: "Step 1",              name: "Your child talks",              price: "Ask anything",              rating: 5,
              reviewCount: "Anytime",              imageSrc: "http://img.b2bpic.net/free-photo/surreal-rendering-kid-bounding-with-giant-stuffed-toy_23-2151341871.jpg?_wi=3",              imageAlt: "Child asking Mojik a question"
            },
            {
              id: "step-2",              brand: "Step 2",              name: "Mojik responds",              price: "With stories",              rating: 5,
              reviewCount: "And play",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-boys-girls-playing-playroom-generated-by-ai_188544-40719.jpg?_wi=2",              imageAlt: "Mojik responding to child"
            },
            {
              id: "step-3",              brand: "Step 3",              name: "Parents stay connected",              price: "Through the app",              rating: 5,
              reviewCount: "Always informed",              imageSrc: "http://img.b2bpic.net/free-vector/voice-translator-app-concept_23-2148625066.jpg?_wi=1",              imageAlt: "Parent app dashboard"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="companion-app" data-section="companion-app">
        <MediaAbout
          title="The Companion App"
          description="A gentle, simple way for parents to stay in the loop. See what Mojik and your child talked about, understand what they're interested in, and set up routines that work for your family."
          tag="Parent controls"
          tagIcon={Shield}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/voice-translator-app-concept_23-2148625066.jpg?_wi=2"
          imageAlt="Parent companion app interface"
          useInvertedBackground={false}
        />
      </div>

      <div id="safety-trust" data-section="safety-trust">
        <FeatureCardTwentyFour
          title="Built to feel safe at home"
          description="We put family safety at the center of everything we do. No shortcuts, no data selling, just thoughtful design."
          features={[
            {
              id: "safe-1",              title: "No unsafe content",              author: "Child-safe by design",              description: "Every response is vetted and age-appropriate. Mojik knows what's right for your child.",              tags: ["safe", "guarded"],
              imageSrc: "http://img.b2bpic.net/free-vector/security-shield_23-2147512003.jpg?_wi=1",              imageAlt: "Safety lock icon"
            },
            {
              id: "safe-2",              title: "No data selling",              author: "Your privacy, protected",              description: "We don't sell, share, or monetize your family's conversations. Period.",              tags: ["private", "secure"],
              imageSrc: "http://img.b2bpic.net/free-vector/security-shield_23-2147512003.jpg?_wi=2",              imageAlt: "Privacy protection"
            },
            {
              id: "safe-3",              title: "Private family AI",              author: "Just for you",              description: "Your data stays on your device and in your family's encrypted space.",              tags: ["encrypted", "private"],
              imageSrc: "http://img.b2bpic.net/free-vector/security-shield_23-2147512003.jpg?_wi=3",              imageAlt: "Encryption protection"
            },
            {
              id: "safe-4",              title: "Age-appropriate always",              author: "Growing with your child",              description: "Mojik adjusts to your child's age and understanding. Smarter conversations, always appropriate.",              tags: ["adaptive", "thoughtful"],
              imageSrc: "http://img.b2bpic.net/free-photo/kids-disinfecting-their-hands-classroom_23-2148925450.jpg?_wi=1",              imageAlt: "Age-appropriate interactions"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="age-fit" data-section="age-fit">
        <ProductCardTwo
          title="Made to grow with them"
          description="Mojik adapts to your child's age and interests. From curious toddlers to creative kids, there's a Mojik experience for every stage."
          products={[
            {
              id: "age-young",              brand: "Ages 3–5",              name: "Simple questions",              price: "Big wonder",              rating: 5,
              reviewCount: "Endless",              imageSrc: "http://img.b2bpic.net/free-photo/kid-with-costume-playing-indoors_23-2148551476.jpg",              imageAlt: "Young child with Mojik"
            },
            {
              id: "age-mid",              brand: "Ages 6–8",              name: "Stories & adventure",              price: "Learning through",              rating: 5,
              reviewCount: "Play",              imageSrc: "http://img.b2bpic.net/free-photo/kids-disinfecting-their-hands-classroom_23-2148925450.jpg?_wi=2",              imageAlt: "School-age child with Mojik"
            },
            {
              id: "age-older",              brand: "Ages 9–10+",              name: "Deep conversations",              price: "Creative expression",              rating: 5,
              reviewCount: "Grows up",              imageSrc: "http://img.b2bpic.net/free-photo/men-doing-makeup-indoors_23-2150245021.jpg",              imageAlt: "Older child with Mojik"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="early-access" data-section="early-access">
        <ContactCenter
          tag="First Families"
          title="Be first to meet Mojik"
          description="Join the waitlist for early access, exclusive updates, and the first Mojik drop. Limited first-batch availability."
          tagIcon={Gift}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email for early access"
          buttonText="Join the Waitlist"
          termsText="By joining, you'll get first access to Mojik, exclusive launch updates, and early-bird offers for first families."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Mojik"
          leftLink={{
            text: "Privacy",            href: "#"
          }}
          rightLink={{
            text: "Contact",            href: "#"
          }}
        />
      </div>
    </ThemeProvider>
  );
}