"use client"

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Briefcase, Users, Award, Globe, Sparkles, TrendingUp, Zap, Mail, Dribbble, Github, Linkedin, Twitter } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Portfolio"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Work", id: "gallery" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get in Touch",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Creative Portfolio"
          description="Crafting digital experiences that inspire. I blend design thinking with modern technology to deliver compelling web solutions for forward-thinking brands."
          buttons={[
            { text: "View My Work", href: "#gallery" },
            { text: "Get in Touch", href: "#contact" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
          imageAlt="portfolio creative workspace design artist"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="A designer and developer dedicated to creating beautiful, functional digital products that solve real problems and delight users."
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Briefcase, label: "Projects Completed", value: "50+" },
            { icon: Users, label: "Happy Clients", value: "40+" },
            { icon: Award, label: "Years Experience", value: "8" },
            { icon: Globe, label: "Global Reach", value: "15+" }
          ]}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardFour
          title="Featured Projects"
          description="A selection of recent work showcasing design strategy, user experience, and technical excellence across web and digital products."
          tag="Portfolio"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "Premium",              variant: "Web Design, UX/UI",              imageSrc: "https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg",              imageAlt: "web design project interface mockup"
            },
            {
              id: "2",              name: "Brand Identity System",              price: "Complete",              variant: "Branding, Visual Design",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-computer-desktop-workspace_53876-30381.jpg",              imageAlt: "brand design creative project portfolio"
            },
            {
              id: "3",              name: "Mobile App Interface",              price: "Interactive",              variant: "App Design, Interaction",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164830.jpg",              imageAlt: "digital design ux interface app"
            },
            {
              id: "4",              name: "Digital Marketing Campaign",              price: "Creative",              variant: "Graphic Design, Campaign",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151272908.jpg",              imageAlt: "graphic design creative visual artwork"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Client Success Stories"
          description="Hear from clients about their experience working with me and the impact design has made on their businesses."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              title: "Transformed Our Digital Presence",              quote: "Working with this designer completely transformed how our customers interact with our brand. The attention to detail and creative thinking exceeded all expectations. Highly recommended!",              name: "Sarah Anderson",              role: "CEO, TechStartup Inc",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional person portrait headshot business"
            },
            {
              id: "2",              title: "Perfect Balance of Art and Function",              quote: "The designer understood our vision immediately and delivered a product that was both beautiful and highly functional. The entire process was smooth and professional.",              name: "Michael Chen",              role: "Marketing Director, Creative Agency",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "professional person portrait business colleague"
            },
            {
              id: "3",              title: "Exceptional Problem Solver",              quote: "Beyond creating stunning visuals, the designer solved complex UX challenges that improved our conversion rates significantly. A true partner in our success.",              name: "Emma Rodriguez",              role: "Product Manager, SaaS Company",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "professional portrait person business team"
            },
            {
              id: "4",              title: "Design Excellence and Reliability",              quote: "Consistently delivers high-quality work on time. The communication is transparent, and the results speak for themselves. A valuable asset to any team.",              name: "David Kim",              role: "Founder, Digital Solutions",              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageAlt: "professional portrait person business colleague"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Impact & Achievements"
          description="Data-driven results that showcase the value and effectiveness of strategic design solutions."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            { id: "1", icon: TrendingUp, title: "Conversion Increase", value: "156%" },
            { id: "2", icon: Users, title: "User Satisfaction", value: "98%" },
            { id: "3", icon: Zap, title: "Page Speed", value: "95" },
            { id: "4", icon: Award, title: "Design Awards", value: "12+" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Collaborate"
          tagIcon={Mail}
          title="Let's Create Something Amazing Together"
          description="Whether you have a specific project in mind or just want to explore possibilities, I'd love to hear from you. Let's discuss how I can help bring your vision to life."
          buttons={[
            { text: "Start a Project", href: "mailto:hello@portfolio.com" },
            { text: "Schedule a Call", href: "#contact-form" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Portfolio"
          copyrightText="© 2025 Creative Portfolio. All rights reserved."
          socialLinks={[
            { icon: Dribbble, href: "https://dribbble.com", ariaLabel: "Dribbble" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}