"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Cloud, Code, Cpu, Crown, Database, DollarSign, Eye, HelpCircle, Lock, Rocket, Shield, Sparkles, Star, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SaaS Pro"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#pricing"
          }}
        />
      </div>

      <div id="hero" data-section="hero" className="py-20 md:py-32">
        <HeroSplitKpi
          title="Powerful SaaS Platform for Modern Teams"
          description="Streamline your workflow, boost productivity, and collaborate seamlessly with our intelligent platform designed for scale."
          background={{ variant: "aurora" }}
          kpis={[
            { value: "10x", label: "Faster Performance" },
            { value: "99.9%", label: "Uptime Guarantee" },
            { value: "5M+", label: "Active Users" }
          ]}
          enableKpiAnimation={true}
          tag="Next Generation SaaS"
          tagIcon={Zap}
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "View Demo", href: "#" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg"
          imageAlt="SaaS Platform Dashboard"
          imagePosition="right"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          features={[
            {
              title: "Seamless Integrations",              description: "Connect all your favorite tools in seconds",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Users, ring: 1 },
                { icon: Database, ring: 1 },
                { icon: Cloud, ring: 2 },
                { icon: Shield, ring: 2 },
                { icon: Cpu, ring: 3 },
                { icon: Code, ring: 3 }
              ]
            },
            {
              title: "Real-Time Analytics",              description: "Visualize your data like never before",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Coverage",              description: "Available in 180+ countries worldwide",              bentoComponent: "globe"
            },
            {
              title: "Advanced Security",              description: "Enterprise-grade encryption and compliance",              bentoComponent: "3d-stack-cards",              items: [
                {
                  icon: Lock,
                  title: "End-to-End Encryption",                  subtitle: "Data Security",                  detail: "Military-grade AES-256 encryption"
                },
                {
                  icon: Shield,
                  title: "Compliance Ready",                  subtitle: "Regulatory",                  detail: "SOC 2, GDPR, HIPAA certified"
                },
                {
                  icon: Eye,
                  title: "Audit Logs",                  subtitle: "Monitoring",                  detail: "Complete activity tracking"
                }
              ]
            }
          ]}
          title="Powerful Features Built for Scale"
          description="Everything you need to succeed in one intuitive platform"
          tag="Capabilities"
          tagIcon={Star}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="metrics" data-section="metrics" className="py-20 md:py-32">
        <MetricCardFourteen
          title="Trusted by leading companies worldwide to accelerate growth and reduce costs"
          tag="Impact"
          metrics={[
            {
              id: "1",              value: "45%",              description: "Average productivity increase reported by our customers"
            },
            {
              id: "2",              value: "3.2x",              description: "Faster time-to-market with our platform automation"
            },
            {
              id: "3",              value: "$2.5M",              description: "Average annual savings per enterprise customer"
            },
            {
              id: "4",              value: "99.99%",              description: "Uptime reliability with zero data loss guarantee"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials" className="py-20 md:py-32">
        <TestimonialCardFifteen
          testimonial="This platform completely transformed how our team works. We've cut development time by half and our data is more secure than ever. The customer support is exceptional."
          rating={5}
          author="Sarah Chen, CTO at TechVenture"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              alt: "User 1"
            },
            {
              src: "https://img.b2bpic.net/free-vector/male-female-avatars-flat-design_23-2147528437.jpg",              alt: "User 2"
            },
            {
              src: "https://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg",              alt: "User 3"
            },
            {
              src: "https://img.b2bpic.net/free-vector/hand-drawn-people-avatar-collection_23-2148074529.jpg",              alt: "User 4"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. No hidden fees, cancel anytime."
          tag="Pricing"
          tagIcon={DollarSign}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",              tag: "Starter Plan",              tagIcon: Zap,
              price: "$29",              period: "/month",              description: "Perfect for small teams getting started",              button: {
                text: "Start Free Trial",                href: "#"
              },
              featuresTitle: "What's Included:",              features: [
                "Up to 5 team members",                "Core analytics dashboard",                "Email support",                "5 integrations",                "1GB storage"
              ]
            },
            {
              id: "professional",              tag: "Professional Plan",              tagIcon: Sparkles,
              price: "$99",              period: "/month",              description: "For growing teams that need advanced features",              button: {
                text: "Start Free Trial",                href: "#"
              },
              featuresTitle: "Everything in Starter, plus:",              features: [
                "Up to 50 team members",                "Advanced analytics & AI insights",                "Priority support",                "Unlimited integrations",                "100GB storage",                "Custom workflows",                "API access"
              ]
            },
            {
              id: "enterprise",              tag: "Enterprise Plan",              tagIcon: Crown,
              price: "Custom",              period: "pricing",              description: "For large organizations with custom needs",              button: {
                text: "Contact Sales",                href: "#contact"
              },
              featuresTitle: "Everything in Professional, plus:",              features: [
                "Unlimited team members",                "Dedicated account manager",                "24/7 phone & email support",                "Custom integrations",                "Unlimited storage",                "Advanced security & compliance",                "SLA guarantee",                "Custom training & onboarding"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our platform"
          tag="FAQ"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I get started with SaaS Pro?",              content: "Getting started is simple! Sign up for a free trial on our website, and you'll have immediate access to all features. Our onboarding team will help you configure your account and integrate with your existing tools. You can also watch our interactive tutorials or schedule a demo with our specialists."
            },
            {
              id: "2",              title: "Is my data secure?",              content: "Yes, absolutely. We use military-grade AES-256 encryption for all data in transit and at rest. Our platform is SOC 2 Type II, GDPR, and HIPAA compliant. We conduct regular security audits and penetration testing. All data is backed up in multiple geographic locations with 99.99% uptime guarantee."
            },
            {
              id: "3",              title: "Can I integrate with my existing tools?",              content: "We integrate with 500+ popular business applications including Slack, Salesforce, Jira, HubSpot, and more. Our REST API and webhooks allow custom integrations as well. Professional and Enterprise plans offer unlimited integrations. Our integration marketplace makes setup incredibly easy - most connections take just a few clicks."
            },
            {
              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, Mastercard, American Express), bank transfers, and wire payments. Monthly and annual billing options are available. Annual subscriptions receive a 20% discount. Enterprise customers can arrange custom payment terms with our sales team."
            },
            {
              id: "5",              title: "Can I cancel my subscription anytime?",              content: "Yes, you can cancel anytime with no penalties or long-term contracts. Your data remains yours - we provide a full export of your data in standard formats. If you cancel mid-month, we'll process a prorated refund within 5 business days."
            },
            {
              id: "6",              title: "Do you offer training and support?",              content: "All plans include email support. Starter plans get responses within 24 hours, Professional plans within 4 hours. Enterprise customers receive dedicated account managers and 24/7 phone support. We also offer free webinars, comprehensive documentation, video tutorials, and custom training sessions for Enterprise customers."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Get Started?"
          tagIcon={Rocket}
          title="Transform Your Workflow Today"
          description="Join thousands of companies already using SaaS Pro. Start your free 14-day trial now - no credit card required."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Community", href: "#" },
                { label: "Support", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 SaaS Pro. All rights reserved."
          bottomRightText="Made with ♥ for modern teams"
        />
      </div>
    </ThemeProvider>
  );
}