"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Award, CheckCircle, MessageSquare, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="noise"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Dev.io"
          navItems={[
            { name: "Accueil", id: "hero" },
            { name: "À propos", id: "about" },
            { name: "Compétences", id: "skills" },
            { name: "Projets", id: "projects" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Me contacter", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="Frontend Developer"
          description="Je crée des expériences web modernes, interactives et performantes. Passionné par les animations fluides, le design responsive et le code clean."
          buttons={[
            { text: "Découvrir mes projets", href: "#projects" },
            { text: "Me contacter", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "noise" }}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2hSPEbrNxDsvXyciCTcUQ3T1y/a-dynamic-developer-workspace-showing-a--1773693137241-eec250d4.png"
          imageAlt="Frontend developer workspace"
          mediaAnimation="slide-up"
          frameStyle="browser"
          ariaLabel="Hero section - Frontend Developer Portfolio"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="À propos de moi"
          description={[
            "Je suis un développeur frontend passionné avec expertise en React, TypeScript et Next.js. J'aime transformer les designs en interfaces web fluides et intuitives.",            "Mes projets combinent fonctionnalité, performance et esthétique. Je travaille avec rigueur sur chaque pixel, chaque animation et chaque interaction pour créer des expériences utilisateur exceptionnelles.",            "Au-delà du code, je suis constamment à la recherche de nouvelles tendances, de meilleures pratiques et de façons innovantes de résoudre des problèmes de développement web."
          ]}
          buttons={[
            { text: "Télécharger mon CV", href: "#" },
            { text: "Voir mes projets", href: "#projects" }
          ]}
          buttonAnimation="slide-up"
          showBorder={true}
          useInvertedBackground={false}
          ariaLabel="About section"
        />
      </div>

      <div id="skills" data-section="skills">
        <FeatureCardTwentyOne
          title="Mes compétences techniques"
          description="Stack complet de technologies frontend modernes pour construire des applications web scalables et performantes."
          tag="Technologies"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          accordionItems={[
            {
              id: "frontend",              title: "Frontend Frameworks & Libraries",              content: "React, Next.js, Vue.js, TypeScript. Expertise dans la création de components réutilisables, state management avec Redux/Zustand, et optimisation de performance."
            },
            {
              id: "styling",              title: "Styling & Design",              content: "Tailwind CSS, CSS-in-JS, SCSS, responsive design. Maîtrise des animations CSS, glassmorphism, et design systems modernes."
            },
            {
              id: "tools",              title: "Outils & DevOps",              content: "Webpack, Vite, Git, GitHub, GitLab. CI/CD pipelines, testing frameworks (Jest, Vitest), et optimisation des bundles."
            },
            {
              id: "advanced",              title: "Concepts Avancés",              content: "Web Performance, SEO, Accessibility (a11y), Progressive Web Apps, Server-Side Rendering, Static Generation, et micro-frontends."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2hSPEbrNxDsvXyciCTcUQ3T1y/an-abstract-visualization-of-frontend-de-1773693134999-78412357.png"
          imageAlt="Frontend technologies and tools"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          mediaPosition="right"
          ariaLabel="Skills and technologies section"
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardTwo
          title="Mes projets récents"
          description="Sélection de projets showcasant mon expertise en frontend development, design interactif et performance web."
          tag="Portfolio"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          products={[
            {
              id: "ecommerce",              brand: "E-Commerce Platform",              name: "Shop Flow",              price: "React + Next.js",              rating: 5,
              reviewCount: "Temps réel",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2hSPEbrNxDsvXyciCTcUQ3T1y/a-beautiful-portfolio-showcase-featuring-1773693134637-1d965fd6.png",              imageAlt: "E-Commerce Platform project"
            },
            {
              id: "dashboard",              brand: "Analytics Dashboard",              name: "Data Insights",              price: "TypeScript + Charts",              rating: 5,
              reviewCount: "Performance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2hSPEbrNxDsvXyciCTcUQ3T1y/a-beautiful-portfolio-showcase-featuring-1773693134637-1d965fd6.png",              imageAlt: "Analytics Dashboard project"
            },
            {
              id: "webapp",              brand: "Web Application",              name: "Collaboration Tool",              price: "Full Stack",              rating: 5,
              reviewCount: "Scalable",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2hSPEbrNxDsvXyciCTcUQ3T1y/a-beautiful-portfolio-showcase-featuring-1773693134637-1d965fd6.png",              imageAlt: "Collaboration Tool project"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Voir tous les projets", href: "#" }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Projects showcase section"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Résultats & Impact"
          description="Mes accomplissements et contributions dans le développement frontend professionnel."
          tag="Statistiques"
          tagIcon={Award}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "projects",              title: "Projets complétés",              subtitle: "Applications web modernes",              category: "Portfolio",              value: "25+"
            },
            {
              id: "performance",              title: "Optimisation moyenne",              subtitle: "Amélioration de vitesse",              category: "Performance",              value: "45%"
            },
            {
              id: "clients",              title: "Clients satisfaits",              subtitle: "Taux de satisfaction",              category: "Clientèle",              value: "100%"
            },
            {
              id: "experience",              title: "Années d'expérience",              subtitle: "Développement web",              category: "Carrière",              value: "5+"
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="centered"
          useInvertedBackground={false}
          ariaLabel="Metrics and achievements section"
        />
      </div>

      <div id="experience" data-section="experience">
        <FaqSplitMedia
          title="Mon expérience professionnelle"
          description="Parcours et expériences clés dans le développement frontend et web."
          tag="Carrière"
          tagIcon={Zap}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "role1",              title: "Senior Frontend Developer - Tech Corp (2022-2024)",              content: "Responsable du développement et de la maintenance de plusieurs applications web complexes. Leadership technique, code reviews, mentoring junior developers, et architecture frontend scalable."
            },
            {
              id: "role2",              title: "Frontend Developer - Digital Agency (2020-2022)",              content: "Création de sites web et applications pour divers clients. Expertise en responsive design, optimisation SEO, et intégration de designs Figma complexes."
            },
            {
              id: "role3",              title: "Junior Frontend Developer - Startup (2019-2020)",              content: "Débuts en développement React et JavaScript vanilla. Contribution à plusieurs features produit et apprentissage des meilleures pratiques."
            },
            {
              id: "education",              title: "Formation & Certifications",              content: "Bootcamp fullstack web development, certifications React/TypeScript, et apprentissage continu via courses spécialisées et open source contributions."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2hSPEbrNxDsvXyciCTcUQ3T1y/a-professional-portrait-of-a-frontend-de-1773693134957-f3315092.png"
          imageAlt="Professional developer portrait"
          mediaAnimation="slide-up"
          mediaPosition="left"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
          ariaLabel="Experience and professional background"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Collaboration"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          title="Prêt à collaborer ?"
          description="Je suis toujours ouvert à des opportunités intéressantes et des collaborations. N'hésite pas à me contacter pour discuter de tes projets frontend ou besoin en développement web."
          buttons={[
            { text: "Me contacter", href: "mailto:contact@dev.io" },
            { text: "Mes réseaux", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          ariaLabel="Contact section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Dev.io"
          columns={[
            {
              items: [
                { label: "Accueil", href: "#hero" },
                { label: "À propos", href: "#about" },
                { label: "Compétences", href: "#skills" }
              ]
            },
            {
              items: [
                { label: "Projets", href: "#projects" },
                { label: "Expérience", href: "#experience" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "GitHub", href: "https://github.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            },
            {
              items: [
                { label: "Email", href: "mailto:contact@dev.io" },
                { label: "CV", href: "#" },
                { label: "Portfolio", href: "#" }
              ]
            }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}