"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Code2 } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSmallSizeLargeTitles"
        background="noise"
        cardStyle="gradient-mesh"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "About",          id: "about"},
        {
          name: "Skills",          id: "skills"},
        {
          name: "Timeline",          id: "timeline"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="DEVANSH"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "gradient-bars"}}
      title="Hi, I'm Devansh."
      description="A Levels student. Future CS engineer. AI enthusiast."
      tag="// Mumbai, India"
      buttons={[
        {
          text: "View my work ↓",          href: "#projects"},
        {
          text: "Get in touch",          href: "#contact"},
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-cyber-particles_1048-13211.jpg",          imageAlt: "abstract geometric dark background"},
        {
          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-boho-frame-pack_23-2149014818.jpg",          imageAlt: "abstract geometric dark background"}
      ]}
      mediaAnimation="blur-reveal"
      rating={5}
      ratingText="Too young to be this serious, too driven to stop."
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="// About Me"
      title="Driven to build the future."
      description="I'm a 17-year-old student in Mumbai, juggling five A Level subjects including Further Maths and Chemistry. I started coding with Python, found my way to web design, and now I'm building things that matter."
      subdescription="Outside academics, I game competitively and play sports. I believe the same mindset that wins games wins problems. My goal: join a top CS program and work on meaningful AI."
      imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-illustration_23-2149265565.jpg"
      icon={Code2}
      imageAlt="abstract geometric dark background"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "Python",          description: "Scripting, automation, and logic-building for AI experiments.",          media: {
            imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-shapes-cover-collection_23-2148924494.jpg",            imageAlt: "Hand drawn abstract shapes cover collection"},
          items: [],
          reverse: false
        },
        {
          title: "HTML",          description: "Semantic structure for accessible, performant web markup.",          media: {
            imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-illustration_23-2149291049.jpg",            imageAlt: "Hand drawn one line art illustration"},
          items: [],
          reverse: true
        },
        {
          title: "CSS",          description: "Responsive layouts, animations, and precise pixel-perfect design.",          media: {
            imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-one-line-art-poster-set_23-2149291047.jpg",            imageAlt: "Hand drawn one line art poster set"},
          items: [],
          reverse: false
        }
      ]}
      title="Core Technical Stack"
      description="A focused set of tools chosen for efficiency and impact."
      tag="// what i work with"
    />
  </div>

  <div id="timeline" data-section="timeline">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          value: "2023",          title: "Completed IGCSE",          items: [
            "Finished with top results in Maths and CS."],
        },
        {
          id: "2",          value: "2024",          title: "Started A Levels",          items: [
            "Challenging myself with Further Maths and Chemistry."],
        },
        {
          id: "3",          value: "2024",          title: "First Webpage",          items: [
            "Zero to working HTML/CSS in weeks."],
        },
        {
          id: "4",          value: "2025",          title: "Portfolio Launch",          items: [
            "Committing to a serious online presence."],
        },
      ]}
      title="Timeline & Growth"
      description="My journey through education and personal milestones."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      title="Projects incoming."
      description="Currently building. Check back soon _"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="// Contact"
      title="Let's talk."
      description="I'm always up for a conversation about code, AI, or anything interesting."
      buttons={[
        {
          text: "Email Me",          href: "mailto:thakkar.devansh@gmail.com"},
        {
          text: "LinkedIn",          href: "https://linkedin.com/in/devansh-thakkar-584b66378"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="DEVANSH THAKKAR"
      copyrightText="© 2025 · Built with HTML, CSS & JS · Mumbai"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
