"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import {
  Sparkles,
  Hexagon,
  House,
  MessageSquareText,
  Settings,
  CircleDollarSign,
  ArrowLeftRight,
  Send,
  Zap,
  Shield,
  CheckCircle,
  AlertCircle,
  Bell,
  Mail,
  Phone,
  Code,
  Database,
  TrendingUp,
  Users,
  Award,
  HelpCircle,
  Star,
} from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" },
          ]}
          brandName="AI Platform"
          bottomLeftText="AI-Powered Solutions"
          bottomRightText="hello@aiplatform.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Intelligent AI Platform for Enterprise Automation"
          description="Transform your business with cutting-edge artificial intelligence. Automate workflows, unlock insights, and scale operations with our sophisticated AI platform designed for modern enterprises."
          background={{ variant: "sparkles-gradient" }}
          tag="Next Generation AI"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get Started", href: "#contact" },
            { text: "View Demo", href: "#" },
          ]}
          buttonAnimation="blur-reveal"
          dashboard={{
            title: "Real-time Analytics Dashboard",            logoIcon: Hexagon,
            searchPlaceholder: "Search metrics...",            stats: [
              {
                title: "Processing Speed",                values: [2500, 3400, 4100],
                valueSuffix: " ops/sec",                description: "Real-time operations per second"},
              {
                title: "Accuracy Rate",                values: [92, 95, 98],
                valueSuffix: "%",                description: "Model prediction accuracy"},
              {
                title: "Active Models",                values: [12, 28, 45],
                description: "Running AI models globally"},
            ],
            sidebarItems: [
              { icon: House, active: true },
              { icon: MessageSquareText },
              { icon: Settings },
              { icon: CircleDollarSign },
            ],
            buttons: [
              { text: "Generate Report" },
              { text: "Export Data" },
            ],
            listItems: [
              { icon: ArrowLeftRight, title: "Data Integration", status: "Active" },
              { icon: Send, title: "Model Training", status: "Running" },
            ],
            chartTitle: "Performance Metrics",            chartData: [
              { value: 4000 },
              { value: 3000 },
              { value: 2000 },
              { value: 2780 },
              { value: 1890 },
              { value: 2390 },
            ],
            listTitle: "System Status",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/a-sophisticated-ai-platform-dashboard-wi-1773782906161-6f7d04af.png",            imageAlt: "AI Platform Dashboard"}}
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Powerful AI Capabilities"
          description="Harness advanced machine learning models with intuitive interfaces and seamless integrations designed for seamless enterprise deployment."
          tag="Technology Stack"
          tagIcon={Hexagon}
          tagAnimation="slide-up"
          buttons={[{ text: "Explore Features", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          features={[
            {
              title: "Natural Language Processing",              description: "Understand and generate human language with unprecedented accuracy and contextual awareness.",              bentoComponent: "chat",              aiIcon: MessageSquareText,
              userIcon: Send,
              exchanges: [
                {
                  userMessage: "What is our Q3 revenue trend?",                  aiResponse: "Based on analytics, Q3 showed a 23% increase with strong performance in enterprise segment."},
                {
                  userMessage: "Generate a market analysis report",                  aiResponse: "Comprehensive analysis complete. Key findings show 15% market growth with emerging opportunities in AI/ML."},
              ],
              placeholder: "Ask anything about your data..."},
            {
              title: "Real-time Data Analytics",              description: "Process massive datasets instantly with distributed computing and advanced visualization.",              bentoComponent: "animated-bar-chart"},
            {
              title: "Predictive Intelligence",              description: "Forecast trends and anomalies with machine learning models trained on your historical data.",              bentoComponent: "line-chart"},
            {
              title: "Global Coverage",              description: "Deploy models across multiple regions with our distributed infrastructure.",              bentoComponent: "globe"},
            {
              title: "Workflow Automation",              description: "Automate complex business processes with intelligent decision trees and rule engines.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "Instant Processing", value: "< 100ms" },
                { icon: Shield, label: "Security Grade", value: "Enterprise" },
                { icon: CheckCircle, label: "Uptime", value: "99.99%" },
              ],
            },
            {
              title: "Smart Notifications",              description: "Alert teams to critical events with intelligent filtering and prioritization.",              bentoComponent: "phone",              statusIcon: AlertCircle,
              alertIcon: Bell,
              alertTitle: "Critical Alert",              alertMessage: "API response time exceeded threshold",              apps: [
                { name: "Slack", icon: Send },
                { name: "Teams", icon: MessageSquareText },
                { name: "Email", icon: Mail },
                { name: "SMS", icon: Phone },
                { name: "Webhook", icon: Code },
                { name: "Push", icon: Bell },
                { name: "Telegram", icon: Send },
                { name: "Discord", icon: MessageSquareText },
              ],
            },
          ]}
        />
      </div>

      <div id="features-hover" data-section="features-hover">
        <FeatureHoverPattern
          title="Enterprise-Grade Solutions"
          description="Built for scale, security, and simplicity. Our platform handles millions of transactions with enterprise-level reliability."
          tag="Security & Compliance"
          tagIcon={Shield}
          tagAnimation="slide-up"
          buttons={[{ text: "View Security", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          features={[
            {
              icon: Shield,
              title: "Advanced Security",              description: "End-to-end encryption, multi-factor authentication, and compliance with GDPR, HIPAA, and SOC 2."},
            {
              icon: Zap,
              title: "Lightning Fast",              description: "Sub-100ms latency with distributed global infrastructure and intelligent caching."},
            {
              icon: Database,
              title: "Scalable Infrastructure",              description: "Auto-scaling architecture handles millions of requests without performance degradation."},
            {
              icon: Code,
              title: "Developer Friendly",              description: "Comprehensive APIs, SDKs, and webhooks for seamless third-party integrations."},
            {
              icon: TrendingUp,
              title: "Advanced Analytics",              description: "Deep insights into model performance, usage patterns, and business metrics."},
            {
              icon: Users,
              title: "Team Collaboration",              description: "Multi-user workspace with role-based access control and audit trails."},
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Transforming Industries with AI"
          description="Founded in 2023, our mission is to democratize artificial intelligence for enterprises of all sizes. We've helped over 500 companies achieve unprecedented efficiency gains through intelligent automation."
          tag="Our Story"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          metrics={[
            { value: "500+", title: "Enterprise Clients" },
            { value: "150M+", title: "Daily Predictions" },
            { value: "40%", title: "Avg. Efficiency Gain" },
          ]}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/a-high-tech-ai-innovation-lab-or-data-ce-1773782905528-1b2439fb.png"
          imageAlt="AI Platform Innovation"
          mediaAnimation="blur-reveal"
          metricsAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Trusted by Industry Leaders"
          description="See what enterprise teams are saying about transforming their operations with AI."
          tag="Success Stories"
          tagIcon={Award}
          tagAnimation="slide-up"
          buttons={[{ text: "Read Case Studies", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarahmitchell",              testimonial: "Implementing this AI platform reduced our data processing time by 75%. The ROI was evident within the first month.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/professional-headshot-of-a-female-busine-1773782905276-d949ffc7.png",              imageAlt: "Sarah Mitchell",              icon: Star,
            },
            {
              id: "2",              name: "James Chen",              handle: "@jameschen",              testimonial: "The predictive models helped us identify market opportunities we completely missed before. Game-changing platform.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/professional-headshot-of-an-asian-male-b-1773782905655-96bd2b4a.png",              imageAlt: "James Chen",              icon: Star,
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@emmarodriguez",              testimonial: "Outstanding support team and seamless integration with our existing systems. Highly recommended.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/professional-headshot-of-a-latina-female-1773782906859-b89dde66.png",              imageAlt: "Emma Rodriguez",              icon: Star,
            },
            {
              id: "4",              name: "David Kumar",              handle: "@davidkumar",              testimonial: "From pilot to production in 3 weeks. The platform's intuitive interface made adoption incredibly smooth.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/professional-headshot-of-a-black-male-bu-1773782904889-7a1191f1.png",              imageAlt: "David Kumar",              icon: Star,
            },
            {
              id: "5",              name: "Lisa Wong",              handle: "@lisawong",              testimonial: "Enterprise-grade security with consumer-friendly usability. Perfect balance for our compliance requirements.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/professional-headshot-of-an-asian-female-1773782904761-a2a9d528.png",              imageAlt: "Lisa Wong",              icon: Star,
            },
            {
              id: "6",              name: "Marcus Thompson",              handle: "@marcusthompson",              testimonial: "The analytics dashboard provides insights we never had before. Our decision-making is now data-driven.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B31N3WDXjdbSXj6Ql7BYXEHglj/professional-headshot-of-a-male-business-1773782904643-fa70d08c.png",              imageAlt: "Marcus Thompson",              icon: Star,
            },
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Transparent, Scalable Pricing"
          description="Choose the plan that fits your needs. Scale up anytime as your requirements grow."
          tag="Flexible Plans"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[{ text: "View All Plans", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          plans={[
            {
              id: "starter",              badge: "Popular",              badgeIcon: Sparkles,
              price: "$499",              name: "Starter",              buttons: [{ text: "Get Started", href: "#" }],
              features: [
                "Up to 1M monthly predictions",                "5 concurrent models",                "Basic analytics dashboard",                "Email support",                "API access"],
            },
            {
              id: "professional",              badge: "Enterprise",              badgeIcon: Sparkles,
              price: "$1,999",              name: "Professional",              buttons: [{ text: "Get Started", href: "#" }],
              features: [
                "Up to 50M monthly predictions",                "Unlimited concurrent models",                "Advanced analytics & reporting",                "Priority support (4hr response)",                "Custom integrations",                "Dedicated account manager"],
            },
            {
              id: "enterprise",              badge: "Custom",              badgeIcon: Sparkles,
              price: "Custom",              name: "Enterprise",              buttons: [{ text: "Contact Sales", href: "#contact" }],
              features: [
                "Unlimited predictions & models",                "White-label solution",                "Custom infrastructure",                "24/7 phone & chat support",                "SLA guarantee (99.99%)",                "On-premise deployment option"],
            },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about our AI platform and how it can transform your business."
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          buttons={[{ text: "Contact Support", href: "#contact" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="blur-reveal"
          faqs={[
            {
              id: "1",              title: "What industries can benefit from this platform?",              content: "Our AI platform is industry-agnostic and has proven success in fintech, healthcare, retail, manufacturing, logistics, and more. Any organization dealing with data-intensive processes can benefit from intelligent automation."},
            {
              id: "2",              title: "How long does implementation take?",              content: "Most implementations are completed within 3-8 weeks depending on complexity. We provide white-glove onboarding, training, and support to ensure smooth adoption."},
            {
              id: "3",              title: "Is my data secure?",              content: "Yes. We employ military-grade encryption, multi-factor authentication, and comply with GDPR, HIPAA, and SOC 2. Your data never leaves our secure, ISO 27001-certified infrastructure."},
            {
              id: "4",              title: "Can I integrate with my existing systems?",              content: "Absolutely. We provide comprehensive APIs, webhooks, and pre-built connectors for popular enterprise tools. Custom integrations are available for enterprise clients."},
            {
              id: "5",              title: "What kind of support do you offer?",              content: "Support depends on your plan: Starter gets email support, Professional gets priority support with 4-hour response times, and Enterprise gets 24/7 phone and chat with dedicated account managers."},
            {
              id: "6",              title: "Can I scale up or down my plan?",              content: "Yes, you can upgrade or downgrade anytime. Changes take effect at the next billing cycle, and we prorate charges accordingly."},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get in Touch"
          tagIcon={Send}
          tagAnimation="slide-up"
          title="Ready to Transform Your Business?"
          description="Schedule a personalized demo with our team and discover how AI can unlock new opportunities for your organization."
          buttons={[
            { text: "Schedule Demo", href: "#" },
            { text: "Send Email", href: "mailto:hello@aiplatform.io" },
          ]}
          buttonAnimation="blur-reveal"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="AI Platform"
          copyrightText="© 2025 AI Platform. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Enterprise", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Support", href: "#" },
                { label: "Status", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Compliance", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
