"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import { Camera, Download, Sparkles, Upload, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeMediumTitles"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Magic",          id: "#transformation"},
        {
          name: "Pricing",          id: "#pricing"},
      ]}
      brandName="SleepyArt"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "sparkles-gradient"}}
      title="Дурсамжаа зураг болго "
      description="Using advanced AI to transform your child's everyday photos into professional, studio-quality portraits and magical character art."
      buttons={[
        {
          text: "Get Started Now",          href: "#contact"},
        {
          text: "Upload Your Photo",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/young-woman-portrait-with-overexposed-moving-style_23-2149495260.jpg"
      imageAlt="magical child portrait AI"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/pink-smoke-background-with-young-adult_23-2149681394.jpg",          alt: "Pink smoke background with young adult"},
        {
          src: "http://img.b2bpic.net/free-photo/pretty-blonde-woman-with-longboard-dark-room_158595-2842.jpg",          alt: "Pretty blonde woman with longboard in dark room"},
        {
          src: "http://img.b2bpic.net/free-photo/young-woman-portrait-with-overexposed-moving-style_23-2149495259.jpg",          alt: "Young woman portrait with overexposed moving style"},
        {
          src: "http://img.b2bpic.net/free-photo/woman-wearing-colouring-makeup_52683-90911.jpg",          alt: "Woman wearing colouring makeup"},
        {
          src: "http://img.b2bpic.net/free-photo/young-man-working-his-photography-studio_23-2149033305.jpg",          alt: "Young man working in his photography studio"},
      ]}
      marqueeItems={[
        {
          type: "text",          text: "100% Secure"},
        {
          type: "text",          text: "Professional Grade"},
        {
          type: "text",          text: "24h Express Turnaround"},
        {
          type: "text",          text: "AI Powered Magic"},
        {
          type: "text",          text: "1000+ Happy Families"},
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Camera,
          title: "AI Portrait Enhancing",          description: "We fix lighting, sharpen details, and create professional studio-grade headshots from simple phone photos."},
        {
          icon: Sparkles,
          title: "Fantasy & Theme Styles",          description: "Turn your child into a fairy-tale character, a futuristic explorer, or a Ghibli-inspired anime star."},
        {
          icon: Zap,
          title: "Fast Digital Delivery",          description: "Get your high-resolution, print-ready digital art delivered directly to your inbox within 24 hours."},
      ]}
      title="What We Offer"
      description="Transform everyday moments into lasting masterpieces with our specialized AI services."
    />
  </div>

  <div id="transformation" data-section="transformation">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Natural Texture",          content: "We carefully preserve the natural look and personality of your child."},
        {
          id: "2",          title: "Color Calibration",          content: "Our AI enhances vibrant, professional color grading automatically."},
        {
          id: "3",          title: "Background Art",          content: "Intricate artistic backgrounds are added to create a cohesive scene."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/portrait-woman-with-superhero-suit-winter-background_23-2150944642.jpg"
      mediaAnimation="blur-reveal"
      title="See The Magic"
      description="Witness the transformation from everyday snapshots to stunning works of art."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="how-it-works" data-section="how-it-works">
      <FeatureHoverPattern
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          icon: Upload,
          title: "Upload",          description: "Send us your favorite photo of your child (even a simple phone selfie works!)."},
        {
          icon: Sparkles,
          title: "AI Transformation",          description: "Our specialized AI models process the image, enhancing quality and applying your chosen style."},
        {
          icon: Download,
          title: "Download",          description: "Receive your high-definition masterpiece, perfect for social media or printing on canvas."},
      ]}
      title="Simple 1-2-3 Step"
      description="It's never been easier to turn memories into magic."
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",          content: "Meet SleepyArt"},
      ]}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "starter",          tag: "Basic",          price: "$29",          period: "/once",          description: "1 Enhanced Portrait",          button: {
            text: "Select Starter"},
          featuresTitle: "Includes:",          features: [
            "Studio Grade",            "Color Balance",            "24h Delivery"],
        },
        {
          id: "pro",          tag: "Pro",          price: "$55",          period: "/once",          description: "3 Themed Portraits",          button: {
            text: "Select Pro"},
          featuresTitle: "Includes:",          features: [
            "3 Unique Themes",            "Priority Support",            "High-Res Files"],
        },
        {
          id: "master",          tag: "Masterpiece",          price: "$89",          period: "/once",          description: "5 Custom Concept Arts",          button: {
            text: "Select Master"},
          featuresTitle: "Includes:",          features: [
            "5 Unique Themes",            "Priority Support",            "Social Media Kit"],
        },
      ]}
      title="Pricing Packages"
      description="Affordable, high-end digital art that lasts a lifetime."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      tag="Contact"
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      title="Ready to Transform Your Photos?"
      description="Upload your child's favorite photo and start your artistic journey today."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="SleepyArt"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
