"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 { Zap, Sparkles, Server, BarChart3, Settings, Home, Shield, Zap as ZapIcon, Code, Layers, Lock, Eye, CheckCircle, Users, ActivitySquare, Building2, Rocket, CloudUpload, Database, ArrowUpRight, DollarSign, HelpCircle } 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
          brandName="HostStack"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Enterprise Solutions"
          bottomRightText="hello@hoststack.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Enterprise Hosting Platform Built for Scale"
          description="Deploy, manage, and scale your infrastructure with confidence. Real-time analytics, 99.99% uptime guarantee, and global CDN coverage."
          tag="Full-Stack Hosting"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get Started Free", href: "#pricing" },
            { text: "View Demo", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Live Infrastructure Monitor",            logoIcon: Server,
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-sophisticated-dark-themed-hosting-cont-1772515004323-e45bf8b7.png",            imageAlt: "Hosting Dashboard Interface",            searchPlaceholder: "Search servers, databases, APIs...",            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Export Report", href: "#" }
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: BarChart3, active: false },
              { icon: Settings, active: false }
            ],
            stats: [
              { title: "Global Servers", values: [150, 200, 250], description: "Data centers worldwide" },
              { title: "Uptime SLA", values: [99.95, 99.98, 99.99], valueSuffix: "%", description: "Industry-leading reliability" },
              { title: "Active Deployments", values: [4250, 5800, 7200], description: "Projects running live" }
            ],
            chartTitle: "Bandwidth Usage (Last 30 Days)",            chartData: [
              { value: 65 },
              { value: 78 },
              { value: 52 },
              { value: 89 },
              { value: 71 }
            ],
            listTitle: "Recent Deployments",            listItems: [
              { icon: CloudUpload, title: "API v2.0 Release", status: "Live" },
              { icon: Database, title: "Database Migration", status: "Completed" },
              { icon: ArrowUpRight, title: "Scale Event Complete", status: "Success" }
            ]
          }}
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Powerful Features for Every Scale"
          description="From startups to enterprises, our hosting platform provides the tools you need to succeed. Advanced monitoring, automation, and insights built in."
          tag="Core Features"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          features={[
            {
              title: "Global Infrastructure",              description: "Deploy to 50+ data centers across 6 continents with automatic failover",              bentoComponent: "globe"
            },
            {
              title: "Real-Time Analytics",              description: "Monitor performance metrics with instant insights and custom dashboards",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "API-First Architecture",              description: "Control everything programmatically with comprehensive REST and GraphQL APIs",              bentoComponent: "orbiting-icons",              centerIcon: Shield,
              items: [
                { icon: ZapIcon, ring: 1 },
                { icon: Code, ring: 2 },
                { icon: Layers, ring: 3 }
              ]
            },
            {
              title: "Auto-Scaling",              description: "Automatically scale resources based on demand with intelligent algorithms",              bentoComponent: "line-chart"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      <div id="features-hover" data-section="features-hover">
        <FeatureHoverPattern
          title="Enterprise-Grade Security & Compliance"
          description="Bank-level security standards with compliance certifications for every regulated industry"
          tag="Security First"
          tagIcon={Shield}
          tagAnimation="slide-up"
          features={[
            { icon: Lock, title: "Military-Grade Encryption", description: "256-bit AES encryption for data at rest and in transit" },
            { icon: Eye, title: "24/7 Monitoring", description: "Real-time threat detection with automated response systems" },
            { icon: CheckCircle, title: "Compliance Certified", description: "ISO 27001, SOC 2, GDPR, HIPAA, PCI DSS certified" },
            { icon: Users, title: "Role-Based Access", description: "Granular permission controls with audit logs for compliance" },
            { icon: ZapIcon, title: "DDoS Protection", description: "Advanced DDoS mitigation with 1TB+ mitigation capacity" },
            { icon: ActivitySquare, title: "Backup & Recovery", description: "Automated daily backups with instant recovery capabilities" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Company Story"
          tagIcon={Building2}
          tagAnimation="slide-up"
          title="Built by Developers, for Developers"
          description="HostStack was founded by infrastructure engineers frustrated with complex hosting solutions. We created a platform that puts simplicity, performance, and reliability first. Today, we power over 7,200 production applications for companies ranging from innovative startups to Fortune 500 enterprises."
          metrics={[
            { value: "7.2K+", title: "Active Deployments" },
            { value: "99.99%", title: "Uptime SLA" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-high-tech-server-room-or-data-center-v-1772515002666-5ffe6461.png"
          imageAlt="Data center infrastructure"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Trusted by Industry Leaders"
          description="See what developers and DevOps teams say about their experience with HostStack"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen_cto",              testimonial: "HostStack simplified our entire deployment pipeline. We went from 3 hours to 15 minutes per release. The reliability is exceptional.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-professional-headshot-photo-of-a-ceo-o-1772515001993-94e0bc35.png",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Rodriguez",              handle: "@m_rodriguez_dev",              testimonial: "The API documentation and developer experience is top-tier. Our team was productive on day one without any onboarding overhead.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-professional-headshot-photo-of-a-cto-o-1772515001731-0b8fbd5b.png",              imageAlt: "Marcus Rodriguez"
            },
            {
              id: "3",              name: "Elena Kowalski",              handle: "@e_kowalski_ops",              testimonial: "The 99.99% uptime guarantee isn't just marketing speak. We've never had a single incident that impacted our SLA in 2 years.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-professional-business-headshot-of-a-st-1772515002538-681ccf42.png",              imageAlt: "Elena Kowalski"
            },
            {
              id: "4",              name: "David Park",              handle: "@d_park_infra",              testimonial: "Cost savings were immediate. Their intelligent auto-scaling cut our infrastructure costs by 40% while improving performance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-professional-headshot-of-an-engineerin-1772515001850-0cfc6a47.png",              imageAlt: "David Park"
            },
            {
              id: "5",              name: "Priya Sharma",              handle: "@priya_devops",              testimonial: "The support team is incredibly responsive. Complex infrastructure questions get answered within hours, not days.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-professional-business-portrait-of-a-vp-1772515003707-110ea47e.png",              imageAlt: "Priya Sharma"
            },
            {
              id: "6",              name: "James Thompson",              handle: "@j_thompson_tech",              testimonial: "HostStack scales with us. Started with basic hosting, now managing enterprise-grade infrastructure. Seamless upgrade path.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOq3ntZudxdmeeCT4kySigl02I/a-professional-headshot-of-a-system-arch-1772515002073-17896ae5.png",              imageAlt: "James Thompson"
            }
          ]}
          speed={40}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Transparent, Scalable Pricing"
          description="Choose the perfect plan for your infrastructure needs. All plans include 24/7 support and 99.99% uptime SLA."
          tag="Simple Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          plans={[
            {
              id: "1",              price: "$99/mo",              name: "Starter",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Up to 2 servers",                "50GB storage per server",                "Basic monitoring",                "Email support",                "Weekly backups",                "API access"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Zap,
              price: "$299/mo",              name: "Professional",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Up to 10 servers",                "500GB storage per server",                "Advanced analytics",                "Priority support",                "Daily backups",                "Full API access",                "Auto-scaling included"
              ]
            },
            {
              id: "3",              price: "$999/mo",              name: "Enterprise",              buttons: [
                { text: "Get Quote", href: "#contact" },
                { text: "Schedule Demo", href: "#" }
              ],
              features: [
                "Unlimited servers",                "Unlimited storage",                "Real-time analytics",                "24/7 phone support",                "Hourly backups",                "Custom API limits",                "Dedicated infrastructure",                "White-label options"
              ]
            }
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about HostStack's features, pricing, and support"
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is included in the 99.99% uptime SLA?",              content: "Our uptime guarantee covers infrastructure availability, not application errors. If our platform is down for more than 0.01% of your billing month (approximately 43 seconds), you'll receive service credits automatically. This applies to all paid plans."
            },
            {
              id: "2",              title: "Can I migrate from another hosting provider?",              content: "Yes, we offer free migration assistance for all plans. Our team will help you transfer your applications, databases, and configurations with zero downtime. Most migrations complete within 24-48 hours."
            },
            {
              id: "3",              title: "Do you offer free trial or credit?",              content: "Limited-time offer: Get $100 in free credits for the first month. No credit card required. You get full access to all features and can scale up or down anytime. If you need more time, contact our sales team."
            },
            {
              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, wire transfers, and ACH payments for enterprise customers. Annual billing includes a 15% discount."
            },
            {
              id: "5",              title: "Is there a contract or lock-in period?",              content: "No contracts required. Pay month-to-month or save 20% with annual billing. Cancel anytime with no penalties. Enterprise customers can negotiate custom terms with our sales team."
            },
            {
              id: "6",              title: "How do you handle security and compliance?",              content: "We maintain ISO 27001, SOC 2 Type II, GDPR, HIPAA, and PCI DSS certifications. All data is encrypted in transit and at rest. We conduct regular security audits and penetration testing. Compliance documentation is available to all customers."
            },
            {
              id: "7",              title: "What if I need more resources than my current plan?",              content: "Upgrade instantly through your dashboard. Billing adjusts prorated for the remainder of your cycle. No downtime or service interruption during upgrades."
            },
            {
              id: "8",              title: "Do you offer dedicated support?",              content: "Professional and Enterprise plans include priority support. Enterprise includes 24/7 phone support and a dedicated account manager. Response times are typically under 1 hour for critical issues."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Scale?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Start Your Free Trial Today"
          description="Limited-time offer: Get $100 in free credits and experience enterprise-grade hosting with zero commitment. No credit card required. Deploy your first application in minutes."
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="HostStack"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Performance", 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: "Community", href: "#" },
                { label: "Support", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Status Page", href: "#" },
                { label: "SLA", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 HostStack. All rights reserved. Enterprise hosting made simple."
        />
      </div>
    </ThemeProvider>
  );
}
