"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import {
  Zap,
  Star,
  Code,
  Shield,
  Users,
  GitBranch,
  Cpu,
  Github,
  MessageSquare,
  Cloud,
  Database,
  Eye,
  Terminal,
  FileText,
  Settings,
  DollarSign,
  Rocket,
  Mail,
  CheckCircle,
  Smartphone,
} from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="DevForge"
          navItems={[
            { name: "Features", id: "features-bento" },
            { name: "Pricing", id: "pricing" },
            { name: "Resources", id: "contact" },
            { name: "Docs", id: "https://docs.example.com" },
          ]}
          button={{
            text: "Start Building",            href: "https://app.example.com/signup"}}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Build Powerful APIs in Minutes"
          description="DevForge is the modern SaaS development platform for teams that demand speed, reliability, and elegance. Deploy production-grade applications without the infrastructure headaches."
          background={{ variant: "gradient-bars" }}
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-headshot-of-a-female-softwa-1772509515661-72b76951.png",              alt: "Developer avatar"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-headshot-of-a-male-develope-1772509513146-a1966d3d.png",              alt: "Engineer avatar"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-headshot-of-a-non-binary-pr-1772509512096-ad75093c.png",              alt: "Product manager avatar"},
          ]}
          avatarText="Trusted by 5000+ developers worldwide"
          buttons={[
            {
              text: "Get Started Free",              href: "https://app.example.com/signup"},
            { text: "Watch Demo", href: "https://demo.example.com" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Powerful Features Built for Developers"
          description="Everything you need to build, deploy, and scale modern applications. From real-time collaboration to intelligent automation."
          tag="Platform Capabilities"
          tagIcon={Zap}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
          features={[
            {
              title: "Global Infrastructure",              description:
                "Deploy to 6 continents with automatic edge caching and instant failover",              bentoComponent: "globe"},
            {
              title: "Real-Time Analytics",              description:
                "Monitor every metric with beautiful visualizations and actionable insights",              bentoComponent: "animated-bar-chart"},
            {
              title: "99.99% Uptime",              description:
                "Enterprise-grade reliability with redundant systems and instant recovery",              bentoComponent: "map"},
            {
              title: "Performance Metrics",              description:
                "Track latency, throughput, and custom metrics across your entire stack",              bentoComponent: "line-chart"},
            {
              title: "API Integrations",              description:
                "Connect with 500+ third-party services through our unified integration hub",              bentoComponent: "orbiting-icons",              centerIcon: Shield,
              items: [
                { icon: Github, ring: 1 },
                { icon: MessageSquare, ring: 1 },
                { icon: Cloud, ring: 2 },
                { icon: Database, ring: 2 },
                { icon: Zap, ring: 3 },
                { icon: Shield, ring: 3 },
              ],
            },
            {
              title: "Instant Deployment",              description:
                "Push code to production with our streamlined CI/CD pipeline in seconds",              bentoComponent: "phone",              statusIcon: Smartphone,
              alertIcon: CheckCircle,
              alertTitle: "Deployment Complete",              alertMessage: "Your app is live on 6 continents",              apps: [
                { name: "GitHub", icon: Github },
                { name: "Slack", icon: MessageSquare },
                { name: "AWS", icon: Cloud },
                { name: "Database", icon: Database },
                { name: "Monitoring", icon: Eye },
                { name: "Console", icon: Terminal },
                { name: "Logs", icon: FileText },
                { name: "Settings", icon: Settings },
              ],
            },
          ]}
        />
      </div>

      <div id="features-border" data-section="features-border">
        <FeatureBorderGlow
          title="Developer-First Experience"
          description="Designed by developers, for developers. Every detail optimized for your workflow."
          tag="Why DevForge"
          tagIcon={Star}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              icon: Code,
              title: "Type-Safe APIs",              description:
                "Automatic TypeScript generation ensures your frontend and backend always align perfectly"},
            {
              icon: Zap,
              title: "Lightning Fast",              description:
                "Sub-millisecond response times with intelligent caching and edge compute"},
            {
              icon: Shield,
              title: "Security First",              description:
                "Built-in authentication, encryption, and compliance with SOC2, HIPAA, and GDPR"},
            {
              icon: Users,
              title: "Team Collaboration",              description:
                "Real-time editing, code reviews, and seamless team management in one platform"},
            {
              icon: GitBranch,
              title: "Version Control",              description:
                "Complete git integration with one-click rollbacks and automatic staging environments"},
            {
              icon: Cpu,
              title: "Auto-Scaling",              description:
                "Handle traffic spikes effortlessly with intelligent resource allocation and load balancing"},
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="DevForge completely transformed how our engineering team works. We went from managing complex infrastructure to focusing entirely on building features. The deployment experience is seamless, and the support team is exceptional."
          rating={5}
          author="Sarah Chen, CTO at TechVenture"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-portrait-of-a-cto-with-tech-1772509511896-b4bfe28c.png",              alt: "Sarah Chen"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-headshot-of-a-startup-found-1772509512135-c7ba21da.png",              alt: "Customer 2"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-photo-of-a-devops-engineer--1772509512287-85374cf2.png",              alt: "Customer 3"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-headshot-of-a-vp-product-ex-1772509513833-bcb9bb2a.png",              alt: "Customer 4"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-portrait-of-a-full-stack-de-1772509512590-0b2e734c.png",              alt: "Customer 5"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ08z9KsmV9sjiyVsmbU6DIdJz/professional-headshot-of-a-tech-lead-lea-1772509512998-ea0e0490.png",              alt: "Customer 6"},
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. Always cancel anytime, no hidden fees."
          tag="Pricing"
          tagIcon={DollarSign}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
          plans={[
            {
              id: "starter",              badge: "Getting Started",              badgeIcon: Rocket,
              price: "$29/mo",              subtitle: "Perfect for indie developers",              buttons: [
                {
                  text: "Start Free Trial",                  href: "https://app.example.com/signup?plan=starter"},
              ],
              features: [
                "Up to 2 deployments per day",                "5GB storage",                "Community support",                "Basic monitoring",                "1 team member",                "Standard uptime SLA"],
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Star,
              price: "$99/mo",              subtitle: "Best for growing teams",              buttons: [
                {
                  text: "Start Free Trial",                  href: "https://app.example.com/signup?plan=pro"},
                {
                  text: "Contact Sales",                  href: "https://sales.example.com"},
              ],
              features: [
                "Unlimited deployments",                "500GB storage",                "Priority email support",                "Advanced analytics",                "Up to 10 team members",                "99.9% uptime SLA",                "Custom integrations",                "API access"],
            },
            {
              id: "enterprise",              badge: "For Scale",              badgeIcon: Zap,
              price: "Custom",              subtitle: "For enterprise needs",              buttons: [
                {
                  text: "Schedule Demo",                  href: "https://sales.example.com/demo"},
              ],
              features: [
                "Unlimited everything",                "Unlimited storage",                "24/7 dedicated support",                "Custom analytics",                "Unlimited team members",                "99.99% uptime SLA",                "White-label options",                "Advanced security",                "SLA guarantees",                "Custom contracts"],
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated with Platform News"
          description="Get the latest features, best practices, and product updates delivered to your inbox weekly."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. See our privacy policy for details."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features-bento" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" },
              ],
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "https://docs.example.com" },
                { label: "Community", href: "#" },
                { label: "Support", href: "#" },
                { label: "Status", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 DevForge. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
