"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import { CheckCircle, Code, Github, Linkedin, Mail, Shield, Star, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Skills", id: "skills" },
            { name: "Contact", id: "contact" },
          ]}
          button={{
            text: "Get in Touch",            href: "contact"}}
          brandName="Noah Whiteson"
        />
      </div>

      <div id="hero" data-section="hero" className="py-24 md:py-32 w-full">
        <HeroLogoBillboardSplit
          logoText="NOAH WHITESON"
          description="Fullstack engineer crafting elegant solutions in Toronto. Specialized in modern web architecture, real-time systems, and scalable infrastructure. Let's build something exceptional together."
          background={{ variant: "plain" }}
          buttons={[
            { text: "View Work", href: "#work" },
            { text: "Get in Touch", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/an-abstract-tech-inspired-gradient-with--1772492721134-e090dc85.png"
          imageAlt="Abstract tech gradient background"
          mediaAnimation="blur-reveal"
          frameStyle="card"
          className="w-full"
          containerClassName="w-full"
          logoContainerClassName="w-full"
          descriptionClassName="text-lg md:text-3xl font-inter"
          buttonContainerClassName="flex gap-4 flex-wrap"
          buttonClassName="px-6 py-3 rounded-full"
          buttonTextClassName="font-semibold"
          logoClassName="text-6xl md:text-9xl font-extrabold font-public-sans tracking-tighter"
          mediaWrapperClassName="w-full rounded-2xl overflow-hidden"
          imageClassName="w-full h-full object-cover"
        />
      </div>

      <div id="work" data-section="work" className="py-20 md:py-28 w-full">
        <FeatureCardTwentyOne
          title="Featured Projects & Experience"
          description="A selection of projects showcasing my expertise across frontend, backend, and infrastructure. Each represents a unique technical challenge solved with thoughtful engineering and clean code practices."
          tag="Portfolio"
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore GitHub", href: "https://github.com" },
          ]}
          buttonAnimation="slide-up"
          accordionItems={[
            {
              id: "1",              title: "Real-Time Collaboration Platform",              content: "Built a full-stack real-time collaboration tool using WebSockets, React, Node.js, and MongoDB. Implemented operational transformation for concurrent editing, Redis caching for performance optimization, and AWS deployment with auto-scaling."},
            {
              id: "2",              title: "Performance-Optimized E-Commerce",              content: "Architected and deployed a high-traffic e-commerce platform handling 100k+ daily users. Implemented progressive image loading, lazy code splitting, edge caching with Cloudflare, and database query optimization reducing load times by 65%."},
            {
              id: "3",              title: "Microservices Migration",              content: "Led migration of monolithic application to microservices architecture using Docker and Kubernetes. Designed service boundaries, implemented API gateway with authentication, and automated CI/CD pipelines reducing deployment time by 80%."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/a-clean-code-editor-interface-showing-fu-1772492722244-10e98be2.png"
          imageAlt="Code editor showing fullstack development"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          mediaPosition="left"
          titleClassName="text-5xl md:text-6xl font-extrabold font-public-sans"
          descriptionClassName="text-lg font-inter text-opacity-80"
          accordionTitleClassName="text-xl font-semibold font-public-sans"
          accordionContentClassName="text-base font-inter leading-relaxed"
        />
      </div>

      <div id="skills" data-section="skills" className="py-20 md:py-28 w-full">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "8",              title: "Years Experience",              description: "Fullstack engineering and system design",              icon: Code,
            },
            {
              id: "2",              value: "50",              title: "Projects Shipped",              description: "Production applications and services",              icon: CheckCircle,
            },
            {
              id: "3",              value: "1M",              title: "Lines of Code",              description: "Written and maintained professionally",              icon: Zap,
            },
            {
              id: "4",              value: "99.9",              title: "Uptime %",              description: "Average system reliability achieved",              icon: Shield,
            },
          ]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Technical Metrics"
          description="Quantified impact and expertise across years of professional development"
          tag="Skills"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          titleClassName="text-2xl font-bold font-public-sans mt-2"
          descriptionClassName="text-sm text-opacity-70 font-inter"
          valueClassName="text-7xl md:text-9xl font-extrabold font-public-sans"
        />
      </div>

      <div id="testimonials" data-section="testimonials" className="py-20 md:py-28 w-full">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-photo-of-a-tech-in-1772492721325-b791c72d.png"},
            {
              id: "2",              name: "Marcus Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-photo-of-a-product-1772492721154-473e0f93.png"},
            {
              id: "3",              name: "Elena Volkov",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-of-a-software-arch-1772492721292-dfe0728b.png"},
            {
              id: "4",              name: "James Patterson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-of-a-startup-found-1772492721050-91c9ac27.png"},
          ]}
          cardTitle="Trusted by innovative teams and leading tech companies across North America"
          cardTag="Testimonials"
          cardTagIcon={Star}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
          cardTitleClassName="text-3xl md:text-4xl font-extrabold font-public-sans text-center"
          cardTagClassName="text-sm font-semibold text-center"
        />
      </div>

      <div id="contact" data-section="contact" className="py-20 md:py-28 w-full">
        <ContactCenter
          tag="Get Started"
          title="Ready to collaborate on your next project?"
          description="Let's connect and discuss how I can help bring your vision to life. Whether it's a full-stack project, system architecture, or scaling existing infrastructure."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="noah@example.com"
          buttonText="Connect"
          termsText="I'll get back to you within 24 hours. Privacy respected."
          className="w-full"
          containerClassName="max-w-2xl mx-auto"
          titleClassName="text-4xl md:text-5xl font-extrabold font-public-sans"
          descriptionClassName="text-lg font-inter text-opacity-80"
        />
      </div>

      <div id="footer" data-section="footer" className="py-12 w-full">
        <FooterCard
          logoText="NOAH WHITESON"
          copyrightText="© 2025 Noah Whiteson | Fullstack Engineer | Toronto"
          socialLinks={[
            {
              icon: Github,
              href: "https://github.com",              ariaLabel: "GitHub Profile"},
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "LinkedIn Profile"},
            {
              icon: Mail,
              href: "mailto:noah@example.com",              ariaLabel: "Send Email"},
          ]}
          logoClassName="text-2xl font-extrabold font-public-sans"
          copyrightTextClassName="text-sm font-inter text-opacity-70"
        />
      </div>
    </ThemeProvider>
  );
}
