"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ArrowRight, Crown, DollarSign, Globe, Heart, Shield, Sparkles, Star, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Features", id: "features" },
            { name: "Metrics", id: "metrics" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="InsightFlow"
          button={{ text: "Start Free Trial", href: "#pricing" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          background={{ variant: "rotated-rays-static" }}
          tag="AI Analytics Platform"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Transform Your Ecommerce with AI-Powered Analytics"
          description="Real-time insights into customer behavior, sales trends, and revenue optimization. Our AI engine processes millions of data points to unlock growth opportunities your competitors are missing."
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "Watch Demo", href: "#" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771568995798-r9eps4m0.avif"
          imageAlt="Analytics Dashboard"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySix
          tag="Core Capabilities"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Powerful Features Built for Growth"
          description="Every feature is designed to give you competitive advantages in the ecommerce space"
          features={[
            {
              title: "AI-Powered Insights",              description: "Machine learning algorithms analyze patterns in real-time to predict trends",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771569330270-bymsppca.avif",              imageAlt: "AI Analysis",              buttonIcon: ArrowRight,
              buttonHref: "#"
            },
            {
              title: "Real-Time Analytics",              description: "Live dashboards update every second with conversion, traffic, and revenue data",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771569421721-ny0w45fr.png",              imageAlt: "Real-time Tracking",              buttonIcon: ArrowRight,
              buttonHref: "#"
            },
            {
              title: "Customer Intelligence",              description: "Deep behavioral analysis reveals what drives purchases and repeat customers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771569521019-od2f2xuv.png",              imageAlt: "Customer Insights",              buttonIcon: ArrowRight,
              buttonHref: "#"
            },
            {
              title: "Predictive Forecasting",              description: "Forecast sales trends, optimize inventory, and plan campaigns with confidence",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771569551512-qlew55ce.avif",              imageAlt: "Forecasting",              buttonIcon: ArrowRight,
              buttonHref: "#"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          tag="Our Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          title="Results That Speak for Themselves"
          description="Join hundreds of ecommerce leaders using InsightFlow"
          metrics={[
            {
              id: "1",              value: "500",              title: "Active Clients",              description: "Across 45+ countries leveraging our platform",              icon: Globe
            },
            {
              id: "2",              value: "42",              title: "% Average ROI",              description: "Clients see significant revenue growth within 6 months",              icon: TrendingUp
            },
            {
              id: "3",              value: "2.5M",              title: "Data Points/Day",              description: "Processed and analyzed in real-time by our AI",              icon: Zap
            },
            {
              id: "4",              value: "99.9",              title: "% Uptime",              description: "Enterprise-grade reliability you can depend on",              icon: Shield
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          tag="Flexible Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          title="Plans That Scale With Your Business"
          description="Start small and scale up as your business grows. No hidden fees."
          plans={[
            {
              id: "starter",              badge: "For New Sellers",              badgeIcon: Sparkles,
              price: "$299/mo",              subtitle: "Perfect for growing ecommerce stores",              buttons: [
                { text: "Start Free Trial", href: "#" }
              ],
              features: [
                "Real-time analytics dashboard",                "Up to 100K monthly orders tracked",                "Customer behavior insights",                "Basic AI recommendations",                "Email support"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$799/mo",              subtitle: "For established brands scaling fast",              buttons: [
                { text: "Start Free Trial", href: "#" }
              ],
              features: [
                "Everything in Starter, plus:",                "Up to 1M monthly orders tracked",                "Advanced predictive analytics",                "Custom integrations",                "API access",                "Priority email & chat support"
              ]
            },
            {
              id: "enterprise",              badge: "For Market Leaders",              badgeIcon: Crown,
              price: "Custom",              subtitle: "Unlimited scale with white-label options",              buttons: [
                { text: "Contact Sales", href: "#" }
              ],
              features: [
                "Everything in Professional, plus:",                "Unlimited monthly orders",                "Dedicated account manager",                "Custom ML models",                "White-label platform option",                "24/7 phone & email support",                "SLA guarantee"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          tag="Customer Success"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Loved by Ecommerce Leaders"
          description="Real results from real customers using InsightFlow"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Founder & CEO",              company: "StyleHub Fashion",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/professional-headshot-of-a-female-ecomme-1771562711729-8b08cba5.png"
            },
            {
              id: "2",              name: "David Chen",              role: "VP of Operations",              company: "TechGear Pro",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/professional-headshot-of-a-male-business-1771562717609-f9947a3d.png"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Analytics Director",              company: "GrowthCo Commerce",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/professional-headshot-of-a-female-data-a-1771562724320-fd1717d2.png"
            }
          ]}
          kpiItems={[
            { value: "180+", label: "Brands scaling their revenue" },
            { value: "96%", label: "Customer satisfaction rate" },
            { value: "42%", label: "Average ROI improvement" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about InsightFlow"
          faqs={[
            {
              id: "1",              title: "How quickly can I see ROI with InsightFlow?",              content: "Most customers see measurable improvements in conversion optimization and customer retention within the first 2-4 weeks. Our AI requires a small learning period, after which insights become increasingly valuable and actionable."
            },
            {
              id: "2",              title: "Is my ecommerce data secure with InsightFlow?",              content: "Yes. We use enterprise-grade encryption, comply with GDPR and CCPA regulations, and never sell your data. All data is processed in our secure, ISO 27001-certified infrastructure. You maintain full control and can export data at any time."
            },
            {
              id: "3",              title: "What platforms does InsightFlow integrate with?",              content: "We integrate seamlessly with Shopify, WooCommerce, Magento, BigCommerce, custom platforms, and 100+ third-party services including payment processors, email platforms, and advertising tools via API."
            },
            {
              id: "4",              title: "Can I cancel my subscription anytime?",              content: "Yes, you can cancel anytime with no long-term contracts or hidden fees. We believe in earning your business every month. If you cancel, you'll have access to download all your historical data."
            },
            {
              id: "5",              title: "Do you offer custom integrations or white-label solutions?",              content: "Absolutely. Our Enterprise plan includes dedicated integration support, custom API access, and white-label options for agencies and large-scale operations. Contact our sales team to discuss your specific needs."
            },
            {
              id: "6",              title: "What kind of support is available?",              content: "We offer email support on all plans, priority chat support for Professional plans, and 24/7 phone support with dedicated account managers for Enterprise customers. All support is handled by our experienced analytics experts."
            }
          ]}
          textPosition="left"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Transform Your Ecommerce Strategy?"
          description="Get personalized guidance from our team. We'll help you understand how InsightFlow can unlock growth for your specific business."
          inputs={[
            { name: "name", type: "text", placeholder: "Your name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true },
            { name: "company", type: "text", placeholder: "Company name", required: true },
            { name: "phone", type: "tel", placeholder: "+1 (555) 000-0000", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your ecommerce business and what analytics challenges you're facing...",            rows: 5,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/team-of-professionals-collaborating-on-e-1771562751638-ba82a12f.png"
          imageAlt="Team collaboration"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Schedule a Demo"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="InsightFlow"
          copyrightText="© 2025 InsightFlow. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Community", href: "#" },
                { label: "Status", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
