"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="medium"
        background="floatingGradient"
        cardStyle="solid"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Features", id: "features" },
        { name: "Tools", id: "tools" },
        { name: "Pricing", id: "pricing" },
        { name: "FAQ", id: "faq" },
      ]}
      brandName="CreatorKit AI"
      button={{
        text: "Get Started",        href: "contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{ variant: "gradient-bars" }}
      title="Your AI Branding Assistant"
      description="Logos, captions, reels, and more. Everything small creators need to build a professional brand in seconds, powered by AI."
      tag="All-in-One Creator Suite"
      buttons={[
        { text: "Get Started Free", href: "contact" },
        { text: "Learn More", href: "features" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-touching-smart-technology-holographic-interface_53876-98409.jpg?_wi=1"
      imageAlt="CreatorKit AI Dashboard"
      mediaAnimation="slide-up"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/smart-car-navigator-interface-windshield-hologram_53876-103040.jpg", alt: "Smart car navigator interface" },
        { src: "http://img.b2bpic.net/free-photo/woman-taking-picture-city_53876-102580.jpg", alt: "Woman taking a picture" },
        { src: "http://img.b2bpic.net/free-photo/close-up-woman-working-digital-monitors_23-2148910245.jpg", alt: "Woman working on monitors" },
        { src: "http://img.b2bpic.net/free-photo/futuristic-hand-interacting-with-digital-neural-network_23-2152029072.jpg", alt: "Futuristic digital network" },
        { src: "http://img.b2bpic.net/free-photo/cafe-beautiful-business-african-american_1303-1338.jpg", alt: "Professional creative" },
      ]}
      marqueeItems={[
        { type: "text", text: "Logo Generation" },
        { type: "text", text: "AI Content Strategy" },
        { type: "text", text: "Reels Optimization" },
        { type: "text", text: "Brand Kits" },
        { type: "text", text: "AI Avatars" },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { id: "f1", title: "Brand Kits & Logos", descriptions: ["Generate professional logos and complete brand kits in minutes."], imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-supplies-one-color_23-2149669131.jpg" },
        { id: "f2", title: "Content Strategy", descriptions: ["AI-driven reel ideas, captions, and scheduling for maximum reach."], imageSrc: "http://img.b2bpic.net/free-photo/woman-developing-photos-darkroom-side-view_23-2149893807.jpg" },
        { id: "f3", title: "Media Production", descriptions: ["Custom AI avatars, thumbnail creation, and website mockups."], imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-concept-human_23-2150688361.jpg" },
      ]}
      title="Everything You Need to Create"
      description="Scale your brand with specialized tools designed to handle your creative workflow automatically."
    />
  </div>

  <div id="tools" data-section="tools">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        { id: "p1", brand: "Toolkit", name: "AI Logo Engine", price: "Included", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320719.jpg" },
        { id: "p2", brand: "Toolkit", name: "Reel Idea Generator", price: "Included", rating: 5, reviewCount: "980", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-celebrating-home_23-2149426557.jpg" },
        { id: "p3", brand: "Toolkit", name: "Brand Site Mockup", price: "Included", rating: 5, reviewCount: "850", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_52683-162013.jpg" },
        { id: "p4", brand: "Toolkit", name: "Brand Identity Kit", price: "Included", rating: 5, reviewCount: "720", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320702.jpg" },
        { id: "p5", brand: "Toolkit", name: "Thumbnail Studio", price: "Included", rating: 5, reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/photo-processing-software-interface-computer-screens-creative-agency-studio_482257-82219.jpg" },
        { id: "p6", brand: "Toolkit", name: "AI Persona Avatars", price: "Included", rating: 5, reviewCount: "640", imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character_23-2151021959.jpg" },
      ]}
      title="Creator Tool Catalog"
      description="A comprehensive suite of tools built for the modern creator economy."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        { id: "basic", badge: "Essential", price: "$19/mo", subtitle: "For new starters", buttons: [{ text: "Get Started", href: "contact" }], features: ["1 Logo Kit", "5 Reels Ideas", "Basic Avatars"] },
        { id: "pro", badge: "Pro", price: "$49/mo", subtitle: "For growing brands", buttons: [{ text: "Get Started", href: "contact" }], features: ["Unlimited Logos", "All Content Tools", "AI Avatars", "Priority Support"] },
      ]}
      title="Simple Creator Pricing"
      description="Get full access to all creative tools."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "10k+", title: "Creators Empowered", items: ["Across 40+ niches", "Global impact"] },
        { id: "m2", value: "200k+", title: "Content Assets Generated", items: ["High quality output", "Efficiency gains"] },
        { id: "m3", value: "45%", title: "Average Growth Increase", items: ["In audience reach", "Engagement rates"] },
      ]}
      title="Results You Can See"
      description="Our community is already seeing massive growth."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={["Adobe", "Canva", "Shopify", "Notion", "Figma", "Webflow", "GitHub"]}
      title="Trusted by Creators"
      description="Join the brands using CreatorKit AI every day."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Sarah Miller", handle: "@smiller_design", testimonial: "I generated my brand kit in 10 minutes. It looks like I hired a pro agency.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020771.jpg" },
        { id: "2", name: "James Chen", handle: "@jchen_tech", testimonial: "The AI avatar feature saved me hours of filming. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/curly-brunette-plus-size-model-with-two-long-led-lamp-black-room_627829-8080.jpg" },
        { id: "3", name: "Elena Rodriguez", handle: "@elena_studio", testimonial: "My engagement skyrocketed after using the reel ideas from this tool.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-creative-girl-with-tattooes-her-hands-is-sitting-cafe-while-sketching-her-digital-notepad_613910-5287.jpg" },
        { id: "4", name: "David Park", handle: "@david_vlog", testimonial: "Thumbnail creation used to be my biggest headache. Not anymore.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-entertainer-presenting-mobile-phone-from-brand-sponsoring-video_482257-128142.jpg" },
        { id: "5", name: "Chloe Smith", handle: "@chloe_creatives", testimonial: "Everything I need, in one interface. A game changer for small businesses.", imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-graphic-tablet-perform-editing-operations-correct-images-creative-agency_482257-82275.jpg" },
      ]}
      title="Creator Success Stories"
      description="See how CreatorKit AI transformed brands."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "Is the AI free to use?", content: "We offer a generous free trial for all creators." },
        { id: "q2", title: "Can I export my logos?", content: "Yes, high-resolution vector exports are standard in all plans." },
        { id: "q3", title: "How do AI avatars work?", content: "Upload a few photos, and we generate a high-fidelity virtual persona." },
      ]}
      title="Common Questions"
      description="Get clarity on how the platform helps your brand."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/woman-touching-smart-technology-holographic-interface_53876-98409.jpg?_wi=2"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{ variant: "sparkles-gradient" }}
      tag="Get Started"
      title="Start Creating Today"
      description="Don't settle for average branding. Join CreatorKit AI and level up."
      buttons={[{ text: "Start Free Trial", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "About", href: "#" }, { label: "Blog", href: "#" }, { label: "Support", href: "#" }] },
        { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }, { label: "Contact", href: "#" }] },
      ]}
      logoText="CreatorKit AI"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}