"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmall"
        background="floatingGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Features",          id: "features"},
        {
          name: "Pricing",          id: "pricing"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="SocioElevate"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "gradient-bars"}}
      title="Level Up Your Content Game"
      description="SocioElevate provides the ultimate suite for content creators. Generate viral titles, plan your content, and script your next masterpiece using AI-driven precision."
      buttons={[
        {
          text: "Start Elevating",          href: "#features"},
      ]}
      mediaItems={[
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4db9l2",          imageAlt: "content creator setup"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=17b8ka",          imageAlt: "content creator setup"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6imqs",          imageAlt: "content creator setup"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=becs8e",          imageAlt: "content creator setup"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q68zbr",          imageAlt: "content creator setup"},
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      features={[
        {
          title: "YouTube Title Generator",          description: "Craft click-worthy titles that grab attention.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qzklez",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mt1e31",          buttonText: "Try Now"},
        {
          title: "Thumbnail Ideas",          description: "AI-generated thumbnail concepts for higher CTR.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4svl47",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=75axul",          buttonText: "Try Now"},
        {
          title: "Viral Topic Finder",          description: "Identify trending topics before they peak.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mtr03u",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=87zzrq",          buttonText: "Try Now"},
        {
          title: "Script AI",          description: "Write engaging scripts in minutes.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y4mnj7",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0i9ko5",          buttonText: "Try Now"},
        {
          title: "Content Calendar",          description: "Seamless scheduling for consistent growth.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wn6268",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=674uix",          buttonText: "Try Now"},
        {
          title: "Reel Idea Generator",          description: "Endless inspiration for short-form video.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b3e5vw",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z5gfov",          buttonText: "Try Now"},
      ]}
      title="Everything You Need to Go Viral"
      description="Powerful AI tools designed for creators, built for speed, and focused on growth."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      tag="Limited Time Offer"
      plans={[
        {
          id: "starter",          tag: "Basic",          price: "$19",          period: "/mo",          description: "Perfect for beginners getting started.",          button: {
            text: "Get Started"},
          featuresTitle: "Included Features",          features: [
            "YouTube Title Gen",            "Script AI",            "Reel Ideas"],
        },
        {
          id: "pro",          tag: "Pro",          price: "$49",          period: "/mo",          description: "For serious creators scaling up.",          button: {
            text: "Go Pro - Lock in 50% Off"},
          featuresTitle: "Everything in Basic, plus:",          features: [
            "Viral Topic Finder",            "Thumbnail AI",            "Content Calendar",            "Priority Support"],
        },
        {
          id: "agency",          tag: "Agency",          price: "$199",          period: "/mo",          description: "High volume for teams and agencies.",          button: {
            text: "Contact Us"},
          featuresTitle: "Everything in Pro, plus:",          features: [
            "Unlimited AI Generation",            "Team Accounts",            "Analytics Deep-Dive"],
        },
      ]}
      title="Simple Pricing for Every Creator"
      description="Choose the plan that suits your production volume."
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "CreatorHub",        "Streamline Media",        "ViralFlow",        "Trendsetters",        "ContentLab",        "InfluencerPro",        "GrowthMedia"]}
      title="Trusted by Creators Everywhere"
      description="Join a global community of innovators building the future of content."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="SocioElevate completely transformed my content production process. I'm saving hours every day and my channel views have doubled!"
      rating={5}
      author="Sarah J., Tech Creator"
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c2nqsj",          alt: "happy creator laptop"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l0f0iw",          alt: "young vlogger studio"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=i7sykc",          alt: "digital marketing expert"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=351elt",          alt: "social media influencer filming"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jnoyyw",          alt: "video editor studio"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Does it support multiple languages?",          content: "Yes, SocioElevate supports over 30 languages."},
        {
          id: "2",          title: "How does the AI work?",          content: "We use advanced machine learning models fine-tuned on viral social data."},
        {
          id: "3",          title: "Can I cancel anytime?",          content: "Yes, cancel your subscription at any time without questions."},
        {
          id: "4",          title: "Do you offer refunds?",          content: "We offer a 14-day money-back guarantee."},
      ]}
      title="Frequently Asked Questions"
      description="Need more info? Check our FAQs or reach out directly."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      title="Ready to Start Your Journey?"
      description="Sign up today and get your first week on us."
      buttonText="Sign Up Now"
      tag="Get Started"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="SocioElevate"
      columns={[
        {
          title: "Company",          items: [
            {
              label: "About",              href: "#"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "Blog",              href: "#"},
            {
              label: "Help",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy",              href: "#"},
            {
              label: "Terms",              href: "#"},
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}