"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Zap, Star, HelpCircle, Rocket } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="medium"
      background="grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BlueWeb"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Start Free Trial", href: "#pricing" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Grow Your TikTok Like Never Before"
          description="Get personalized analysis, AI-powered recommendations, and proven strategies to unlock your account's full potential. Join creators scaling from thousands to millions of views."
          tag="Smart Growth Tool"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          imagePosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/tiktok-growth-analysis-dashboard-mockup--1772481634635-93f63ba5.png?_wi=1"
          imageAlt="TikTok growth analysis dashboard"
          mediaAnimation="blur-reveal"
          buttons={[
            { text: "Start Free Analysis", href: "#pricing" },
            { text: "Watch Demo", href: "#" }
          ]}
          buttonAnimation="slide-up"
          fixedMediaHeight={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Your Growth Journey"
          description="From initial assessment to sustained growth, every step is optimized for your success"
          tag="How It Works"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Intelligent Questionnaire",              description: "Answer quick questions about your TikTok journey: time spent, views achieved, goals, and main blockers. Our AI analyzes your unique situation.",              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/step-by-step-questionnaire-interface-sho-1772481632313-9f0256f6.png", imageAlt: "Questionnaire Flow" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/modern-app-loading-screen-with-blueweb-l-1772481631821-df757607.png", imageAlt: "Loading Screen" }
            },
            {
              id: 2,
              title: "Account Analysis",              description: "Get a detailed breakdown of your strengths, weaknesses, and growth opportunities. See exactly what's working and what needs improvement.",              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/account-analysis-results-screen-showing--1772481632994-cc19fc70.png", imageAlt: "Analysis Results" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/problem-detection-and-solution-visualiza-1772481634800-75e90e18.png", imageAlt: "Problem Detection" }
            },
            {
              id: 3,
              title: "Personalized Action Plan",              description: "Receive specific, actionable recommendations tailored to your niche and content style. No generic advice—just strategies that work.",              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/abstract-gradient-background-transitioni-1772481631431-a6330bdb.png", imageAlt: "CTA Background" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/tiktok-growth-analysis-dashboard-mockup--1772481634635-93f63ba5.png?_wi=2", imageAlt: "Dashboard" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <TestimonialCardSix
          title="Trusted by Thousands of Creators"
          description="See the real results from creators just like you who've transformed their TikTok presence with BlueWeb"
          tag="Success Stories"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@creator_sarah",              testimonial: "Went from 50K to 500K views in 3 months. The personalized recommendations were game-changing for my content strategy.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/professional-headshot-of-a-successful-co-1772481631181-350dca6e.png?_wi=1",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Marcus Chen",              handle: "@marcus.growth",              testimonial: "Finally understand what my audience wants. BlueWeb's analysis revealed I was posting at the wrong times. Revenue doubled since.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/professional-headshot-of-a-female-entrep-1772481631906-b11a9d81.png?_wi=1",              imageAlt: "Marcus Chen"
            },
            {
              id: "3",              name: "Amelia Rodriguez",              handle: "@amelia.creates",              testimonial: "The account detection was spot-on. Turned my struggling account around completely. Worth every penny of the subscription.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/professional-headshot-of-a-young-male-di-1772481631715-736f6866.png",              imageAlt: "Amelia Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              handle: "@david.content",              testimonial: "BlueWeb saved me months of guessing. Their AI recommendations helped me find my content niche and explode my engagement.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/professional-headshot-of-female-influenc-1772481631515-1944e517.png",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Liu",              handle: "@jess.vibes",              testimonial: "From 10K followers to 250K in under 6 months. The insights were practical and worked immediately on my account.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/professional-headshot-of-a-successful-co-1772481631181-350dca6e.png?_wi=2",              imageAlt: "Jessica Liu"
            },
            {
              id: "6",              name: "Thomas Blake",              handle: "@thomas.media",              testimonial: "Best investment for my content career. The personalization level is insane—feels like having a growth coach in your pocket.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5s2tUxKyl8Pm524BMXstN49Y/professional-headshot-of-a-female-entrep-1772481631906-b11a9d81.png?_wi=2",              imageAlt: "Thomas Blake"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttonAnimation="slide-up"
          speed={40}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your growth stage. Upgrade anytime, no hidden fees."
          tag="Pricing"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          plans={[
            {
              id: "starter",              tag: "Free Trial",              price: "Free",              period: "7 days",              description: "Perfect for testing the platform and getting your initial account analysis.",              button: { text: "Start Free Analysis", href: "#" },
              featuresTitle: "What's Included:",              features: ["1 Complete Account Analysis", "Basic Recommendations", "7-Day Trial Access", "Email Support"]
            },
            {
              id: "monthly",              tag: "Most Popular",              tagIcon: Star,
              price: "24€",              period: "/month",              description: "Unlimited analysis, advanced insights, and AI-powered growth strategies updated daily.",              button: { text: "Subscribe Monthly", href: "#" },
              featuresTitle: "What's Included:",              features: ["Unlimited Account Analysis", "Real-time Insights & Alerts", "Content Adaptation Tool", "Niche-Specific Strategies", "Priority Support", "Video Performance Analytics"]
            },
            {
              id: "annual",              tag: "Best Value",              price: "84€",              period: "/year",              description: "Save 50% when you commit yearly. Perfect for serious content creators.",              button: { text: "Subscribe Annually", href: "#" },
              featuresTitle: "What's Included:",              features: ["Everything in Monthly", "50% Annual Discount", "Dedicated Growth Coach", "Weekly Strategy Sessions", "Advanced Analytics Dashboard", "Early Access to New Features"]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about BlueWeb and how it can transform your TikTok growth"
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How does BlueWeb analyze my TikTok account?",              content: "BlueWeb uses advanced AI algorithms that analyze your account's metrics, content patterns, audience engagement, posting times, and niche trends. We combine this data with success patterns from thousands of creators to provide personalized recommendations specifically designed for your unique situation and growth goals."
            },
            {
              id: "2",              title: "Do I need to connect my TikTok account?",              content: "For our free 7-day trial, you can get initial analysis by answering our questionnaire. For full unlimited access and real-time analytics, yes, we need read-only access to your public TikTok metrics. We never post on your behalf or access private data. Your account security is our priority."
            },
            {
              id: "3",              title: "Can I cancel my subscription anytime?",              content: "Absolutely! There are no long-term contracts. You can cancel your subscription at any time through your dashboard. If you cancel mid-month, you'll retain access until your billing cycle ends. No penalties, no hidden fees."
            },
            {
              id: "4",              title: "How often are recommendations updated?",              content: "For monthly and annual subscribers, recommendations and insights update daily based on your latest performance data and trending TikTok trends. This ensures you're always getting current, actionable strategies that reflect the latest algorithm changes."
            },
            {
              id: "5",              title: "What's included in the 'Content Adaptation' feature?",              content: "The Content Adaptation tool analyzes your existing videos and suggests specific tweaks: optimal video length, hook timing, sound selection, hashtag strategies, and posting schedules tailored to your specific audience and niche. It's like having a professional TikTok coach analyzing every upload."
            },
            {
              id: "6",              title: "Is my data secure with BlueWeb?",              content: "Yes! We use enterprise-grade encryption, follow GDPR compliance, and never sell your data to third parties. We only access public TikTok metrics and your anonymized growth data to improve our AI recommendations. Your privacy is fundamental to our service."
            },
            {
              id: "7",              title: "How long until I see results?",              content: "Many creators see improvements within 1-2 weeks of implementing our recommendations. However, viral growth varies by content niche and initial follower count. Most see consistent 2-3x growth in 30-90 days when they follow our personalized strategy consistently."
            },
            {
              id: "8",              title: "Can I use BlueWeb for multiple accounts?",              content: "Currently, one subscription covers one account. However, for creators managing multiple accounts, contact our support team about volume discounts or team plans tailored to your needs."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="blur-reveal"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Explode?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Your TikTok Growth Starts Today"
          description="Join thousands of creators who've transformed their TikTok presence with BlueWeb's AI-powered analysis and personalized growth strategies. Start your free 7-day trial today—no credit card required."
          buttons={[
            { text: "Start Free 7-Day Trial", href: "#pricing" },
            { text: "Explore Dashboard First", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="BlueWeb"
          columns={[
            {
              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
