"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { CheckCircle, Database, BarChart3, DatabaseIcon, Home, MessageSquare, Settings, Sparkles, TrendingUp, Zap } from "lucide-react";

const navItems = [
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Process", id: "process" },
  { name: "Contact", id: "contact" }
];

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="noise"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Lumière"
          navItems={navItems}
          button={{
            text: "Get Started",            href: "https://example.com/contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="TECHNOLOGY WITH PURPOSE."
          description="We build the infrastructure that allows your team to focus on what matters most—the vision."
          tag="Enterprise Infrastructure"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start now", href: "#contact" },
            { text: "Book a Call", href: "https://example.com/calendar" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          dashboard={{
            title: "Real-Time Infrastructure Hub",            stats: [
              {
                title: "Uptime",                values: [99.9, 99.95, 99.99],
                valueSuffix: "%",                description: "99.99% guaranteed uptime"
              },
              {
                title: "Deployments",                values: [847, 1204, 1856],
                description: "Successful monthly deployments"
              },
              {
                title: "Infrastructure",                values: [156, 243, 389],
                description: "Enterprise clients served"
              }
            ],
            logoIcon: BarChart3,
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/abstract-flowing-gradient-background-tra-1772481968514-64cc5e80.png",            sidebarItems: [
              { icon: Home, active: true },
              { icon: BarChart3 },
              { icon: Settings }
            ],
            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Analytics", href: "#" }
            ],
            listTitle: "Recent Deployments",            listItems: [
              { icon: CheckCircle, title: "API Gateway Migration", status: "Completed" },
              { icon: Zap, title: "Load Balancer Update", status: "In Progress" },
              { icon: DatabaseIcon, title: "Database Replication", status: "Scheduled" }
            ],
            searchPlaceholder: "Search infrastructure..."
          }}
          ariaLabel="Hero section with infrastructure dashboard"
        />
      </div>

      <div id="insights" data-section="insights">
        <FeatureCardTwentyThree
          title="Quick reads, deeper thinking — drawn from the work, not from theory"
          description="Real insights from real deployments. Strategic infrastructure that scales with your ambitions."
          tag="AI-DRIVEN INSIGHTS"
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "1",              title: "Universal Mounting",              tags: ["Infrastructure", "Scalable"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/modern-dark-themed-ui-dashboard-interfac-1772481970159-e843c169.png?_wi=1",              imageAlt: "Universal mounting infrastructure"
            },
            {
              id: "2",              title: "Organisation Performance",              tags: ["Analytics", "Real-time"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/abstract-technology-illustration-showing-1772481968943-aa16904e.png?_wi=1",              imageAlt: "Performance metrics dashboard"
            },
            {
              id: "3",              title: "Remote Data Interface",              tags: ["Integration", "Flexible"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/modern-cloud-infrastructure-visualizatio-1772481968380-cf28a3f9.png?_wi=1",              imageAlt: "Remote data interface systems"
            }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardOne
          title="Premium Infrastructure Services"
          description="Comprehensive solutions designed for enterprise-scale technology challenges."
          tag="Our Services"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Infrastructure Architecture",              price: "Enterprise",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/modern-dark-themed-ui-dashboard-interfac-1772481970159-e843c169.png?_wi=2"
            },
            {
              id: "2",              name: "Cloud Migration",              price: "Strategic",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/abstract-technology-illustration-showing-1772481968943-aa16904e.png?_wi=2"
            },
            {
              id: "3",              name: "AI Integration",              price: "Innovation",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/modern-cloud-infrastructure-visualizatio-1772481968380-cf28a3f9.png?_wi=2"
            }
          ]}
        />
      </div>

      <div id="casestudies" data-section="casestudies">
        <BlogCardThree
          title="Impact That Speaks in Numbers"
          description="Real results from real infrastructure transformations."
          tag="Case Studies"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          blogs={[
            {
              id: "1",              category: "Infrastructure",              title: "+230% Efficiency Gains",              excerpt: "Modernized legacy systems resulting in unprecedented operational improvements and cost optimization.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/modern-tech-office-environment-showing-t-1772481969622-6b3275bf.png",              imageAlt: "Case study one visualization",              authorName: "Sarah Chen",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/professional-headshot-of-a-confident-fem-1772481968340-a20f1f1b.png",              date: "Jan 15, 2025"
            },
            {
              id: "2",              category: "Cloud",              title: "-45% Infrastructure Costs",              excerpt: "Strategic cloud migration reducing operational expenses while improving performance and scalability.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/data-center-or-server-room-with-rows-of--1772481969436-3b9ba0e6.png",              imageAlt: "Case study two visualization",              authorName: "Michael Torres",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/professional-headshot-of-a-male-tech-ent-1772481969132-c4f5f681.png",              date: "Jan 12, 2025"
            },
            {
              id: "3",              category: "Deployment",              title: "3x Deployment Speed",              excerpt: "CI/CD optimization enabling teams to deploy with confidence and velocity at enterprise scale.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/modern-software-development-team-working-1772481970217-6ae2a959.png",              imageAlt: "Case study three visualization",              authorName: "Emma Rodriguez",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/professional-headshot-of-a-diverse-femal-1772481969074-d3a33421.png",              date: "Jan 10, 2025"
            }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardFourteen
          title="How We Build With Intention. Strategic discovery, architectural excellence, flawless execution, and sustainable growth."
          tag="Our Process"
          tagAnimation="slide-up"
          metricsAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "Discover",              description: "Deep dive into your infrastructure needs, challenges, and vision for the future."
            },
            {
              id: "2",              value: "Architect",              description: "Design scalable, secure, and future-proof solutions tailored to your enterprise requirements."
            },
            {
              id: "3",              value: "Build",              description: "Implement with precision, ensuring seamless integration and minimal disruption to operations."
            },
            {
              id: "4",              value: "Scale",              description: "Optimize performance and growth, supporting your evolution as your business expands."
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="With Lumière, we've really made a mark in the market. Their infrastructure expertise transformed our operations from legacy systems to cloud-native architecture. The difference is night and day."
          rating={5}
          author="Jessica Mercedes, CEO of terra-tory™"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/professional-headshot-of-a-confident-fem-1772481968340-a20f1f1b.png",              alt: "Jessica Mercedes"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/professional-headshot-of-a-male-tech-ent-1772481969132-c4f5f681.png",              alt: "Team member"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/professional-headshot-of-a-diverse-femal-1772481969074-d3a33421.png",              alt: "Team member"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP6O1FXquPriDQeeWpyUEwzfZ3/professional-headshot-of-a-male-business-1772481968842-5aaefe44.png",              alt: "Team member"
            }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Connect"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          title="Let's Build What's Next"
          description="Future-proof infrastructure starts with one conversation. Our team is ready to understand your vision and architect the perfect solution."
          buttons={[
            { text: "Start Now", href: "https://example.com/contact" },
            { text: "Schedule Strategy Call", href: "https://example.com/calendar" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Lumière"
          columns={[
            {
              items: [
                { label: "Services", href: "#services" },
                { label: "About", href: "#about" },
                { label: "Process", href: "#process" }
              ]
            },
            {
              items: [
                { label: "Case Studies", href: "#casestudies" },
                { label: "Resources", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "#contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
