"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, User, Code, Trophy, Star, Send, Linkedin, Twitter, Github, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "work" },
            { name: "Impact", id: "impact" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Crafting Digital Excellence"
          description="I blend strategic thinking with creative execution to build meaningful digital experiences. Let's create something remarkable together."
          tag="Designer & Developer"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          leftCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg", imageAlt: "portfolio design project digital web" },
            { imageSrc: "http://img.b2bpic.net/free-photo/business-team-working-busy-workplace-concept_53876-137638.jpg", imageAlt: "design work project creative digital" },
            { imageSrc: "http://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg", imageAlt: "portfolio case study project showcase design" },
            { imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-man-working-computer_53876-31625.jpg", imageAlt: "digital portfolio work project creative" }
          ]}
          rightCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg", imageAlt: "design project portfolio showcase web" },
            { imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg", imageAlt: "portfolio work creative design project" },
            { imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg", imageAlt: "design work digital portfolio project" },
            { imageSrc: "http://img.b2bpic.net/free-psd/portfolio-showcase-social-media-template-with-photo-frame_47987-32070.jpg", imageAlt: "portfolio showcase creative design work" }
          ]}
          buttons={[
            { text: "View My Work", href: "#work" },
            { text: "Get In Touch", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          carouselPosition="right"
          ariaLabel="Hero section with portfolio gallery"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="My Story"
          tagIcon={User}
          tagAnimation="slide-up"
          title="I'm passionate about creating beautiful, functional digital products that solve real problems and delight users. With expertise spanning design and development, I bring a holistic perspective to every project."
          buttons={[
            { text: "Download Resume", href: "#" },
            { text: "Learn More", href: "#impact" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About section"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardOne
          title="Selected Work"
          description="A collection of recent projects showcasing strategic design thinking and technical execution."
          tag="Portfolio"
          tagIcon={Code}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          products={[
            { id: "1", name: "Brand Identity System", price: "2023", imageSrc: "http://img.b2bpic.net/free-vector/modern-business-card-template-with-geometric-design_23-2147941082.jpg", imageAlt: "branding brand identity design logo" },
            { id: "2", name: "Mobile App Design", price: "2023", imageSrc: "http://img.b2bpic.net/free-vector/user-interface-design-concept-with-different-screens-buttons-web-elements-mobile-social-applications_1284-45222.jpg", imageAlt: "mobile app design ui interface" },
            { id: "3", name: "E-Commerce Platform", price: "2024", imageSrc: "http://img.b2bpic.net/free-vector/shopping-from-desktop-mobile-phone-landing-page_23-2148517509.jpg", imageAlt: "ecommerce store shopping platform web" }
          ]}
          ariaLabel="Featured work section"
        />
      </div>

      <div id="impact" data-section="impact">
        <MetricCardSeven
          title="Impact By Numbers"
          description="Measurable results from collaborative work across diverse industries and project types."
          tag="Achievements"
          tagIcon={Trophy}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",              value: "50+",              title: "Projects Completed",              items: ["Across web, mobile, and brand design", "From startups to established companies", "Average project satisfaction: 98%"]
            },
            {
              id: "2",              value: "8",              title: "Years of Experience",              items: ["Digital design and development", "Led cross-functional teams", "Mentored junior designers"]
            },
            {
              id: "3",              value: "15+",              title: "Industry Awards",              items: ["Design excellence recognition", "User experience innovation", "Creative problem solving"]
            },
            {
              id: "4",              value: "30M+",              title: "Users Impacted",              items: ["Products reaching global audiences", "Average retention rate: 92%", "Consistently high user satisfaction"]
            }
          ]}
          ariaLabel="Metrics section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Client Testimonials"
          description="What colleagues and clients have to say about our collaboration."
          tag="Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          testimonials={[
            { id: "1", name: "Sarah Chen", role: "CEO", company: "TechVenture Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=1", imageAlt: "portrait professional woman headshot business" },
            { id: "2", name: "Marcus Johnson", role: "Creative Director", company: "Design Studios Inc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "portrait professional man headshot business" },
            { id: "3", name: "Elena Rodriguez", role: "Product Manager", company: "Global Innovations", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=2", imageAlt: "portrait professional woman headshot business" },
            { id: "4", name: "David Park", role: "Founder", company: "StartupHub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "portrait professional man headshot business" }
          ]}
          ariaLabel="Testimonials section"
        />
      </div>

      <div id="cta" data-section="cta">
        <TextAbout
          tag="Next Steps"
          tagIcon={Send}
          tagAnimation="slide-up"
          title="Ready to bring your vision to life? Let's collaborate on something extraordinary."
          buttons={[
            { text: "Start A Project", href: "mailto:hello@portfolio.com" },
            { text: "Schedule Call", href: "#" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Call to action section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Portfolio"
          copyrightText="© 2024 | All rights reserved"
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Mail, href: "mailto:hello@portfolio.com", ariaLabel: "Email" }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}
