"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Code, Layout, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="grid"
        cardStyle="layered-gradient"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Projects",
          id: "features",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Mohamed Anas"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="Mohamed Anas"
      description="Building and engaging with professional networks. Access knowledge, insights, and opportunities for growth through technical innovation."
      buttons={[
        {
          text: "Connect on LinkedIn",
          href: "https://www.linkedin.com/in/mohamed-anas-206334288",
        },
        {
          text: "View Projects",
          href: "#features",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/stylish-handsome-caucasian-man-posing-looking-camera-isolated-dark-background_613910-15062.jpg"
      imageAlt="Mohamed Anas Profile"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Professional Identity"
      description="I focus on managing professional identity and building relationships within the tech community. With a commitment to continuous learning, I strive to turn opportunities into meaningful professional impact."
      metrics={[
        {
          value: "10+",
          title: "Projects Completed",
        },
        {
          value: "5+",
          title: "Years Experience",
        },
        {
          value: "100%",
          title: "Commitment",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/man-entering-startup-agency-office-holding-laptop_482257-125888.jpg"
      imageAlt="Working environment"
      mediaAnimation="slide-up"
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBorderGlow
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: Sparkles,
          title: "Software Development",
          description: "Building scalable solutions and modern applications for enterprise needs.",
        },
        {
          icon: Code,
          title: "App Prototyping",
          description: "Designing intuitive interfaces and prototyping user-centered experiences.",
        },
        {
          icon: Layout,
          title: "Web Platforms",
          description: "Crafting clean and responsive web experiences using latest frontend technologies.",
        },
      ]}
      title="My Projects"
      description="Showcasing a collection of software development projects, design platforms, and professional insights."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Mohamed is an exceptional professional who consistently delivers high-quality work with a keen eye for detail and a collaborative spirit."
      rating={5}
      author="Sarah Jenkins"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/joyful-thrilled-woman-works-stock-trading-analysis-browsing-real-time-data_482257-118875.jpg",
          alt: "Testimonial Author",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Get in Touch"
      description="Interested in collaborating or just want to connect? Reach out and let's start a conversation."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Your message...",
        rows: 4,
        required: true,
      }}
      buttonText="Send Message"
      imageSrc="http://img.b2bpic.net/free-photo/african-american-investment-expert-works-home-analyzing-financial-statistics_482257-120570.jpg"
      imageAlt="Professional contact atmosphere"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Projects",
              href: "#features",
            },
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "User Agreement",
              href: "#",
            },
          ],
        },
      ]}
      logoText="Mohamed Anas"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
