"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, Clock, Rocket, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLarge"
        background="aurora"
        cardStyle="gradient-mesh"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Skills",
          id: "#skills",
        },
        {
          name: "Projects",
          id: "#projects",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Issam Chagtmi"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="Issam Chagtmi"
      description="Crafting digital experiences with modern code and design precision. Passionate about building seamless, aesthetic, and functional web solutions."
      buttons={[
        {
          text: "View Work",
          href: "#projects",
        },
        {
          text: "Contact Me",
          href: "#contact",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/empty-office-desk-with-computer-screen-showing-terminal-windows_482257-126357.jpg",
          imageAlt: "web developer workspace",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/programming-language-code-editor-software-ui-computer-display_482257-124942.jpg",
          imageAlt: "web developer workspace",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/code-testing-quality-assurance-done-computers-startup-workplace_482257-120129.jpg",
          imageAlt: "web developer workspace",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/african-american-engineer-programming-app-code-developing-online-software-with-cloud-server-firewall-security-coding-new-user-interface-with-binary-code-html-program-web-development_482257-49867.jpg",
          imageAlt: "web developer workspace",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/professional-software-developer-types-code-laptop-sleek-workspace_482257-124580.jpg",
          imageAlt: "web developer workspace",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-developer-hands-typing-code-keyboard-while-looking-computer-screens-with-programming-interface-software-programmer-sitting-desk-with-clipboard-writing-algorithm_482257-33551.jpg",
          imageAlt: "web developer workspace",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="About Me"
      title="Creative Developer & Designer"
      description="I bridge the gap between creative visual design and robust software development. My mission is to build digital products that users love."
      subdescription="With expertise in modern stacks and user-centric design, I deliver high-quality solutions tailored for growth and engagement."
      icon={Award}
      imageSrc="http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058823.jpg"
      mediaAnimation="slide-up"
      imageAlt="professional web developer"
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "s1",
          title: "Frontend",
          subtitle: "React & Next.js",
          category: "Development",
          value: "Proficient",
        },
        {
          id: "s2",
          title: "Web Design",
          subtitle: "Figma & UX/UI",
          category: "Design",
          value: "Expert",
        },
        {
          id: "s3",
          title: "Animation",
          subtitle: "GSAP & Framer",
          category: "Motion",
          value: "Skilled",
        },
      ]}
      title="My Expertise"
      description="Skills and technologies I leverage to bring your visions to life."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          brand: "WebApp",
          name: "Design System",
          price: "2024",
          rating: 5,
          reviewCount: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-nutritional-counter-app-concept_23-2149880602.jpg",
          imageAlt: "app ui mockup",
        },
        {
          id: "p2",
          brand: "E-com",
          name: "Retail Hub",
          price: "2023",
          rating: 5,
          reviewCount: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-tablet-with-empty-screen_23-2148674988.jpg",
          imageAlt: "web design project",
        },
        {
          id: "p3",
          brand: "SaaS",
          name: "Analytics Suite",
          price: "2023",
          rating: 5,
          reviewCount: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/male-entrepreneur-conducting-financial-planning-goal-setting_482257-122658.jpg",
          imageAlt: "saas dashboard design",
        },
        {
          id: "p4",
          brand: "App",
          name: "Health Track",
          price: "2022",
          rating: 5,
          reviewCount: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104482.jpg",
          imageAlt: "app ui mockup",
        },
        {
          id: "p5",
          brand: "Site",
          name: "Portfolio Core",
          price: "2024",
          rating: 5,
          reviewCount: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoy-online-shopping_53876-71210.jpg",
          imageAlt: "web design project",
        },
        {
          id: "p6",
          brand: "Tool",
          name: "Code Builder",
          price: "2024",
          rating: 5,
          reviewCount: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg",
          imageAlt: "saas dashboard design",
        },
      ]}
      title="Selected Projects"
      description="A collection of my latest work combining design and development."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Issam exceeded our expectations. His work is top-tier and he understands design principles better than anyone I have met."
      rating={5}
      author="Client Name"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
          alt: "happy client portrait",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1620.jpg",
          alt: "happy client portrait",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg",
          alt: "happy client portrait",
        },
        {
          src: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",
          alt: "happy client portrait",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg",
          alt: "Smiling African American girl sitting in cafe",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Rocket,
          title: "Projects",
          value: "50+",
        },
        {
          id: "m2",
          icon: Users,
          title: "Happy Clients",
          value: "40+",
        },
        {
          id: "m3",
          icon: Clock,
          title: "Coding Hours",
          value: "5000+",
        },
      ]}
      title="Key Milestones"
      description="Measurable results from my professional journey."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Do you work remotely?",
          content: "Yes, I am fully equipped to handle projects remotely.",
        },
        {
          id: "f2",
          title: "What tools do you use?",
          content: "I use Next.js, Tailwind CSS, TypeScript, and Figma.",
        },
        {
          id: "f3",
          title: "How long do projects take?",
          content: "It depends on complexity, usually 2 to 6 weeks.",
        },
      ]}
      title="Common Questions"
      description="Answers to frequently asked questions about my process."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Let's Connect"
      title="Ready to build something great?"
      description="Send me a message to discuss your next project."
      buttons={[
        {
          text: "Contact Me",
          href: "mailto:hello@issam.dev",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Issam Chagtmi"
      columns={[
        {
          title: "Links",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Projects",
              href: "#projects",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
