"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, User, Briefcase, Zap, Star, Lightbulb, Linkedin, Github, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Lorenzo"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "projects" },
            { name: "Skills", id: "skills" },
            { name: "Contact", id: "contact" },
            { name: "Resume", id: "https://example.com/resume" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Hi, I'm Lorenzo"
          description="A creative designer and developer crafting beautiful digital experiences. I specialize in web design, UI/UX, and brand identity. Let's build something amazing together."
          tag="Designer & Developer"
          tagIcon={Sparkles}
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Let's Connect", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
          imageAlt="Lorenzo - Designer and Developer"
          className="py-20 md:py-32"
          titleClassName="text-5xl md:text-6xl font-bold leading-tight"
          descriptionClassName="text-lg md:text-xl text-accent/80"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Me"
          tagIcon={User}
          title="Passionate about creating intuitive, beautiful, and functional digital products that solve real problems and delight users."
          description="Lorenzo"
          subdescription="UX/UI Designer & Full-Stack Developer"
          icon={Lightbulb}
          imageSrc="https://img.b2bpic.net/free-photo/top-view-items-redecorating-house-with-copy-space_23-2148815770.jpg"
          imageAlt="Lorenzo working at his creative workspace"
          useInvertedBackground="noInvert"
          titleClassName="text-4xl md:text-5xl font-bold leading-tight"
          descriptionClassName="text-lg font-semibold"
          subdescriptionClassName="text-sm text-accent/75"
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardFour
          title="Featured Projects"
          description="A selection of recent work showcasing design thinking, technical expertise, and creative problem-solving."
          tag="Portfolio"
          tagIcon={Briefcase}
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2023",              variant: "Web Design & Development",              imageSrc: "https://img.b2bpic.net/free-psd/sale-new-winter-season-clothes_23-2148319690.jpg",              imageAlt: "E-commerce platform redesign project"
            },
            {
              id: "2",              name: "Mobile App Design System",              price: "2023",              variant: "UI/UX Design",              imageSrc: "https://img.b2bpic.net/free-psd/web-template-dancing-performers_23-2148457153.jpg",              imageAlt: "Mobile app design system project"
            },
            {
              id: "3",              name: "Brand Identity System",              price: "2022",              variant: "Branding & Visual Design",              imageSrc: "https://img.b2bpic.net/free-psd/dancing-landing-page-template_23-2148470640.jpg",              imageAlt: "Complete brand identity system project"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="skills" data-section="skills">
        <FeatureCardSix
          title="Skills & Expertise"
          description="A focused approach to modern design and development with proven results."
          tag="Capabilities"
          tagIcon={Zap}
          features={[
            {
              id: 1,
              title: "UI/UX Design",              description: "Creating user-centered designs that are beautiful, intuitive, and accessible. I specialize in wireframing, prototyping, and user research to ensure every design decision is validated.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              id: 2,
              title: "Web Development",              description: "Building responsive, performant websites with modern technologies. Proficient in React, Next.js, TypeScript, and full-stack development with a focus on clean, maintainable code.",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-items-redecorating-house-with-copy-space_23-2148815770.jpg"
            },
            {
              id: 3,
              title: "Brand Strategy",              description: "Developing cohesive brand identities from concept to execution. I work on logo design, color systems, typography, and brand guidelines to create memorable visual experiences.",              imageSrc: "https://img.b2bpic.net/free-psd/sale-new-winter-season-clothes_23-2148319690.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-lg text-accent/75"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Others Say"
          description="Feedback from clients and collaborators I've worked with on various projects."
          tag="Testimonials"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              name: "Sarah Anderson",              role: "CEO",              company: "Tech Startup Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg",              imageAlt: "Sarah Anderson testimonial"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Product Manager",              company: "Digital Solutions Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Michael Chen testimonial"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Brand Director",              company: "Creative Agency Plus",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "Emily Rodriguez testimonial"
            },
            {
              id: "4",              name: "James Wilson",              role: "Founder",              company: "StartupHub",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "James Wilson testimonial"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-lg text-accent/75"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Let's Work Together"
          description="Have a project in mind or want to discuss opportunities? I'd love to hear from you. Reach out and let's create something amazing."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Send"
          termsText="I'll get back to you as soon as possible to discuss your project."
          titleClassName="text-4xl md:text-5xl font-bold leading-tight"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Lorenzo"
          copyrightText="© 2025 Lorenzo. All rights reserved."
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Mail, href: "mailto:lorenzo@example.com", ariaLabel: "Email" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}