"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Briefcase, CheckCircle, Code, ShieldCheck } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="largeSmall"
        background="grid"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Skills",          id: "#skills"},
        {
          name: "Experience",          id: "#experience"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Jérémy Vidocin"
      button={{
        text: "Download CV",        href: "http://img.b2bpic.net/free-vector/attractive-online-curriculum-template_23-2147818273.jpg"
      }}
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardGallery
      background={{
        variant: "canvas-reveal"
      }}
      title="Code the product Talk to the business"
      description="Fullstack developer × business analyst. I build SI solutions that work because I speak both languages—architecture and stakeholder needs. Available for 24-month apprenticeship, September 2026, Île-de-France."
      buttons={[
        {
          text: "View My Projects",          href: "#projects"
        },
        {
          text: "Download CV",          href: "http://img.b2bpic.net/free-vector/attractive-online-curriculum-template_23-2147818273.jpg"
        }
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg",          imageAlt: "Modern software dashboard"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139360.jpg",          imageAlt: "Abstract data flow"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/system-engineers-celebrating-successful-code-compiling-doing-high-five-hand-gesture-with-colleague-coder-analyzing-algorithm-multiple-screens-takes-off-glasses-congratulates-coworker_482257-41855.jpg",          imageAlt: "Developer and business analyst"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/two-creative-designers-working-project-together-sharing-new-ideas-workplace-business-team-work-concept_58466-12412.jpg",          imageAlt: "Collaborative tech meeting"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/data-center-manager-supervising-work-done-by-engineer_482257-126803.jpg",          imageAlt: "Secure server room"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-glass-phone-16-pro-max_187299-45887.jpg",          imageAlt: "Sleek web application UI"
        }
      ]}
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Your Strategic Tech Partner"
      metrics={[
        {
          icon: Code,
          label: "Fullstack Development",          value: "Expertise"
        },
        {
          icon: Briefcase,
          label: "Business Analysis",          value: "Acumen"
        },
        {
          icon: ShieldCheck,
          label: "SI Governance",          value: "Mastery"
        }
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "End-to-End Solution Delivery",          description: "From concept to deployment, I manage the full software lifecycle, ensuring robust and scalable solutions.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-163995.jpg",            imageAlt: "End-to-End Solution Delivery"
          },
          items: [
            {
              icon: CheckCircle,
              text: "Full lifecycle management"
            },
            {
              icon: CheckCircle,
              text: "Scalable architecture"
            },
            {
              icon: CheckCircle,
              text: "Robust deployment"
            }
          ],
          reverse: false
        },
        {
          title: "Stakeholder Communication & UAT",          description: "Translating complex technical details into clear business language, and guiding users through effective User Acceptance Testing.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/male-female-graphic-designers-interacting-with-each-other_1170-2963.jpg",            imageAlt: "Stakeholder Communication & UAT"
          },
          items: [
            {
              icon: CheckCircle,
              text: "Requirements gathering"
            },
            {
              icon: CheckCircle,
              text: "User story development"
            },
            {
              icon: CheckCircle,
              text: "UAT facilitation"
            }
          ],
          reverse: true
        },
        {
          title: "Technical Depth & Modern Stacks",          description: "Proficient in a wide array of modern technologies, ensuring efficient and high-performance development practices.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/jolly-bookkeeper-work-happy-after-finishing-verifying-business-documents_482257-126605.jpg",            imageAlt: "Technical Depth & Modern Stacks"
          },
          items: [
            {
              icon: CheckCircle,
              text: "Frontend frameworks"
            },
            {
              icon: CheckCircle,
              text: "Backend technologies"
            },
            {
              icon: CheckCircle,
              text: "Database management"
            }
          ],
          reverse: false
        },
        {
          title: "SI Governance & Compliance",          description: "Expertise in managing information system governance, including RGPD compliance and secure data practices.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/engineer-data-center-coding-laptop-optimizing-resource-utilization_482257-120596.jpg",            imageAlt: "SI Governance & Compliance"
          },
          items: [
            {
              icon: CheckCircle,
              text: "Data protection"
            },
            {
              icon: CheckCircle,
              text: "Regulatory adherence"
            },
            {
              icon: CheckCircle,
              text: "Risk assessment"
            }
          ],
          reverse: true
        }
      ]}
      title="Bridging the Gap: Development & Business Insight"
      description="My unique dual competency ensures seamless project execution from conception to deployment, aligning technical solutions with strategic business objectives."
    />
  </div>

  <div id="experience" data-section="experience">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          value: "5+",          title: "Years Experience",          description: "Diverse roles in software development and business analysis.",          imageSrc: "http://img.b2bpic.net/free-photo/words-succecc-notebook-with-handwriting_1357-138.jpg",          imageAlt: "Years of experience"
        },
        {
          id: "2",          value: "10+",          title: "Projects Delivered",          description: "Successful end-to-end delivery of complex SI projects.",          imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg",          imageAlt: "Projects delivered"
        },
        {
          id: "3",          value: "7+",          title: "Tech Stacks Mastered",          description: "Proficiency across various modern frontend and backend technologies.",          imageSrc: "http://img.b2bpic.net/free-photo/diagrams-with-connected-icons_1134-403.jpg",          imageAlt: "Tech stacks mastered"
        },
        {
          id: "4",          value: "99%",          title: "Successful Deployments",          description: "Consistent track record of smooth and reliable system rollouts.",          imageSrc: "http://img.b2bpic.net/free-photo/press-reporter-fallowing-leads-case_23-2149579746.jpg",          imageAlt: "Successful deployments"
        }
      ]}
      title="Impact & Expertise in Numbers"
      description="Quantifying my dedication to robust solutions and measurable business value."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "proj-ecommerce",          name: "E-commerce Platform Revamp",          price: "Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-text_23-2148675029.jpg",          imageAlt: "E-commerce platform screenshot"
        },
        {
          id: "proj-pmtool",          name: "SI Project Management Tool",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/african-american-company-employees-handling-financial-planning_482257-128572.jpg",          imageAlt: "Project management tool interface"
        },
        {
          id: "proj-fintech",          name: "Fintech Analytics Dashboard",          price: "Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-network-growth-charts_9975-22174.jpg",          imageAlt: "Fintech dashboard screenshot"
        },
        {
          id: "proj-medbooking",          name: "Health Clinic Booking System",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/woman-doctor-meeting-with-patient-medical-cabinet-copy-space_482257-118353.jpg",          imageAlt: "Health clinic booking system"
        },
        {
          id: "proj-hrportal",          name: "Corporate HR Portal",          price: "Case Study",          imageSrc: "http://img.b2bpic.net/free-photo/owner-getting-ready-reopening_23-2149142188.jpg",          imageAlt: "Corporate HR portal interface"
        },
        {
          id: "proj-supplychain",          name: "Supply Chain Optimizer",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-concept_23-2151908129.jpg",          imageAlt: "Supply chain optimization dashboard"
        }
      ]}
      title="My Portfolio: Solutions That Deliver Value"
      description="Explore a selection of my fullstack development and business analysis projects, showcasing diverse technical stacks and problem-solving approaches."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "test-1",          name: "Elodie Dubois",          handle: "@elodie.techrec",          testimonial: "Jérémy's understanding of both deep tech and business requirements is truly exceptional. A rare find for any SI team.",          imageSrc: "http://img.b2bpic.net/free-photo/smart-businesswoman-with-laptop_23-2147626415.jpg",          imageAlt: "Elodie Dubois"
        },
        {
          id: "test-2",          name: "Marc Lemaire",          handle: "@marc.cto",          testimonial: "His ability to bridge the gap between development and métier teams has been invaluable on complex projects. Highly recommended.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-asian-businessman-businesswoman-meeting-brainstorming-some-new-ideas-about-project_7861-2781.jpg",          imageAlt: "Marc Lemaire"
        },
        {
          id: "test-3",          name: "Sophie Martin",          handle: "@sophie.hiring",          testimonial: "Jérémy excels in both coding and strategic analysis. He's exactly the hybrid profile we look for in today's digital landscape.",          imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg",          imageAlt: "Sophie Martin"
        },
        {
          id: "test-4",          name: "Pierre Dupont",          handle: "@pierre.sidirector",          testimonial: "With a strong grasp of SI governance and RGPD, Jérémy brings a level of responsibility and foresight crucial for modern enterprises.",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-looking-away-holding-laptop_23-2148308516.jpg",          imageAlt: "Pierre Dupont"
        },
        {
          id: "test-5",          name: "Camille Leroy",          handle: "@camille.itlead",          testimonial: "His proactive approach in UAT and clear communication made our project sprints incredibly smooth. A true asset.",          imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-business-professionals-posing-together-monitoring-room_482257-89677.jpg",          imageAlt: "Camille Leroy"
        },
        {
          id: "test-6",          name: "Antoine Girard",          handle: "@antoine.dev",          testimonial: "Jérémy's technical skills are top-notch, always delivering clean, efficient code that integrates seamlessly with business goals.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",          imageAlt: "Antoine Girard"
        }
      ]}
      title="What Leaders Say"
      description="Feedback from recruiters, SI directors, and hiring managers on my dual-competency approach and project impact."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Let's Connect and Build Together"
      description="I'm Jérémy Vidocin, a Fullstack Developer and Business Analyst, passionate about crafting impactful SI solutions. I'm actively seeking a 24-month apprenticeship starting September 2026, ideally in Île-de-France. If you're looking for a hybrid profile who speaks both tech and business, let's discuss how my dual expertise can benefit your team.\n\nYou can reach me via:\n- Email: contact@jeremyvidocin.com\n- GitHub: https://github.com/jeremyvidocin\n- LinkedIn: https://linkedin.com/in/jeremyvidocin\n- Phone: +33 6 12 34 56 78"
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true
        },
        {
          name: "subject",          type: "text",          placeholder: "Subject",          required: true
        }
      ]}
      textarea={{
        name: "message",        placeholder: "Your Message",        rows: 4,
        required: true
      }}
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-business-meeting-mock-up_23-2148339336.jpg"
      imageAlt="Professional handshake"
      mediaAnimation="slide-up"
      mediaPosition="left"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="http://img.b2bpic.net/free-photo/man-holding-business-card_23-2148479528.jpg"
      logoAlt="Jérémy Vidocin Logo"
      columns={[
        {
          items: [
            {
              label: "Home",              href: "#home"
            },
            {
              label: "About",              href: "#about"
            },
            {
              label: "Skills",              href: "#skills"
            }
          ]
        },
        {
          items: [
            {
              label: "Projects",              href: "#projects"
            },
            {
              label: "Testimonials",              href: "#testimonials"
            },
            {
              label: "Contact",              href: "#contact"
            }
          ]
        },
        {
          items: [
            {
              label: "LinkedIn",              href: "https://linkedin.com/in/jeremyvidocin"
            },
            {
              label: "GitHub",              href: "https://github.com/jeremyvidocin"
            }
          ]
        }
      ]}
      logoText="Jérémy Vidocin"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
