"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TextAbout from '@/components/sections/about/TextAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Scissors, Sparkles, TrendingUp, Users, Heart, Instagram, Facebook, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="neon-glow"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="minimal"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Barbershop"
          bottomLeftText="Open 6 days"
          bottomRightText="hello@barbershop.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Premium Barbershop Experience"
          description="Crafted cuts and grooming excellence. Where tradition meets modern style."
          tag="Est. 2015"
          tagIcon={Scissors}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850165195-selv2sf8.jpg"
          imageAlt="Professional barbershop interior"
          imagePosition="right"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850165195-selv2sf8.jpg", alt: "Lead Barber" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg", alt: "Senior Stylist" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171967-vqv1el7d.jpg", alt: "Master Barber" }
          ]}
          avatarText="5,000+ satisfied clients"
          buttons={[
            { text: "Book Appointment", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne
          title="Our Services"
          description="Expertly delivered grooming services tailored to your style"
          tag="Premium Cuts"
          tagIcon={Sparkles}
          textboxLayout="default"
          features={[
            {
              title: "Classic Haircut",
              description: "Timeless cuts with precision fades and sharp lines",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850165195-selv2sf8.jpg",
              button: { text: "Book Now", href: "contact" }
            },
            {
              title: "Beard Grooming",
              description: "Full beard trim, shape, and conditioning treatment",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850164268-l89tn75w.jpg",
              button: { text: "Book Now", href: "contact" }
            },
            {
              title: "Hot Towel Shave",
              description: "Traditional straight razor shave with premium aftercare",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041839169-yw95y472.jpg",
              button: { text: "Book Now", href: "contact" }
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Barbering is our passion. Excellence is our standard. Every client leaves looking sharp and feeling confident."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Story", href: "#" },
            { text: "Contact Us", href: "contact" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Why Choose Us"
          description="Industry-leading results and customer satisfaction"
          tag="By The Numbers"
          tagIcon={TrendingUp}
          textboxLayout="default"
          metrics={[
            { id: "1", value: "5000+", description: "Satisfied Clients" },
            { id: "2", value: "9 years", description: "Experience & Expertise" },
            { id: "3", value: "50+", description: "Signature Styles" },
            { id: "4", value: "4.9★", description: "Customer Rating" }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Barbers"
          description="Experienced professionals dedicated to your grooming excellence"
          tag="Expert Team"
          tagIcon={Users}
          textboxLayout="default"
          members={[
            {
              id: "1",
              name: "Marcus",
              role: "Master Barber",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850165195-selv2sf8.jpg"
            },
            {
              id: "2",
              name: "David",
              role: "Senior Stylist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg"
            },
            {
              id: "3",
              name: "James",
              role: "Expert Barber",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171967-vqv1el7d.jpg"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Clients Say"
          description="Real experiences from satisfied customers"
          tag="Testimonials"
          tagIcon={Heart}
          textboxLayout="default"
          testimonials={[
            {
              id: "1",
              name: "John Smith",
              handle: "@john_groomed",
              testimonial: "Best haircut I've ever had. Marcus is a true artist with the scissors. Will definitely be back!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850166105-8f5807nc.jpg"
            },
            {
              id: "2",
              name: "Michael Chen",
              handle: "@mchen_style",
              testimonial: "Professional service, amazing atmosphere, and exactly the fade I wanted. Highly recommended!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg"
            },
            {
              id: "3",
              name: "David Wilson",
              handle: "@dwilson",
              testimonial: "The hot towel shave experience was incredible. Worth every penny. Great attention to detail.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171104-55aomfy3.jpg"
            },
            {
              id: "4",
              name: "Robert Taylor",
              handle: "@robtown",
              testimonial: "Five stars for customer service and quality. This is my go-to place for grooming now.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041840554-dzv57h1m.jpg"
            }
          ]}
          animationType="slide-up"
          useInvertedBackground="noInvert"
          speed={30}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Book Your Appointment"
          description="Reserve your spot with our expert barbers. We look forward to giving you the best haircut experience."
          inputs={[
            { name: "name", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "service", type: "text", placeholder: "Service (Haircut, Beard, Shave)", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Preferred date and time...", rows: 4, required: false }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850169290-83ozx3zs.jpg"
          imageAlt="Barbershop contact"
          mediaPosition="right"
          buttonText="Reserve Now"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          description="Premium barbershop dedicated to grooming excellence and customer satisfaction."
          logoText="Barbershop"
          copyrightText="© 2025 Barbershop. All rights reserved."
          columns={[
            {
              title: "Quick Links",
              items: [
                { label: "Home", href: "hero" },
                { label: "Services", href: "services" },
                { label: "Team", href: "team" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Hours",
              items: [
                { label: "Monday - Friday: 9AM - 8PM" },
                { label: "Saturday: 8AM - 6PM" },
                { label: "Sunday: Closed" }
              ]
            },
            {
              title: "Info",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Book Now", href: "contact" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}