"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Award, Camera, CheckCircle, Heart, Scissors, Shield, Sparkles, Star, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Captain's"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Why Us", id: "why-us" },
            { name: "Gallery", id: "gallery" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Command Your Look"
          description="Precision fades. Clean cuts. Legendary energy. Trusted by York for over a decade."
          background={{ variant: "plain" }}
          tag="4.8★ Rated | 78 Five-Star Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Your Cut", href: "#contact" },
            { text: "Become a Regular", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-comb_613910-5069.jpg"
          imageAlt="Precision fade haircut"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Clients Don't Just Visit. They Stay."
          description="Real testimonials from York's most loyal gentlemen"
          tag="Community Trust"
          tagIcon={Heart}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Worth the wait, come for the haircut, stay for the vibes",            "Great service and awesome fades and cuts",            "Had my first haircut 10ish years ago and I'm still here",            "Master-level fades every single time",            "The energy in this place is unbeatable",            "Best barber in York, hands down"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          tagIcon={Scissors}
          tagAnimation="slide-up"
          title="More Than a Haircut. It's an Experience."
          description="Captain's Barber Shop isn't just a place for haircuts—it's a command center for modern gentlemen. Founded on the principle that every client deserves master-level attention and legendary service, we've built a community rooted in trust, precision, and authentic energy. With over 10 years of loyal clientele, we've earned our reputation as York's most trusted barber destination. Our skilled barbers combine traditional barbering expertise with modern techniques to deliver clean cuts, sharp fades, and a welcoming environment where you're treated like family."
          metrics={[
            { value: "10+", title: "Years of Loyalty" },
            { value: "4.8★", title: "Customer Rating" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
          imageAlt="Captain's Barber Shop interior"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBorderGlow
          title="Premium Services"
          description="Luxury barbering crafted for the modern gentleman"
          tag="Services"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            { icon: Zap, title: "Precision Fade", description: "Master-level fades with surgical precision and attention to detail. Book Now »" },
            { icon: Scissors, title: "Gentleman's Cut", description: "Clean, sharp cuts designed to complement your style. Limited daily appointments. Book Now »" },
            { icon: Sparkles, title: "Beard Sculpt & Lineup", description: "Professional beard shaping and edge-ups for a polished look. Book Now »" },
            { icon: Shield, title: "Razor Sharp Edge-Up", description: "Crisp, clean edges that command attention. Book Now »" },
            { icon: Award, title: "Kids Cuts", description: "Fun, friendly cuts for the next generation. Book Now »" },
            { icon: CheckCircle, title: "Full Transformation", description: "Complete grooming package for the ultimate refresh. Book Now »" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Book Your Service", href: "#contact" }]}
        />
      </div>

      <div id="why-us" data-section="why-us">
        <MetricCardFourteen
          title="Why Choose Captain's? The Difference Is Real."
          tag="Differentiators"
          tagAnimation="slide-up"
          metrics={[
            { id: "1", value: "Master-Level", description: "Fades executed with surgical precision and decades of combined expertise" },
            { id: "2", value: "Long-Lasting", description: "Clean cuts that hold their shape and stay sharp between appointments" },
            { id: "3", value: "High-Energy", description: "Friendly, welcoming atmosphere where you're treated like one of the crew" },
            { id: "4", value: "Trusted Local", description: "10+ years of returning customers who've built a community here" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <TeamCardSix
          title="Gallery of Excellence"
          description="Precision cuts and sharp lineups that speak for themselves"
          tag="Craft"
          tagIcon={Camera}
          tagAnimation="slide-up"
          members={[
            { id: "1", name: "Precision Fade", role: "Master Technique", imageSrc: "http://img.b2bpic.net/free-photo/funny-worker-amusing-colleague-office-telling-joke_482257-102093.jpg", imageAlt: "Precision fade haircut" },
            { id: "2", name: "Sharp Lineup", role: "Signature Look", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-middle-eastern-beard-entrepreneur-wear-black-coat-blue-shirt-eyeglasses-against-office-building_627829-5284.jpg", imageAlt: "Sharp lineup barber work" },
            { id: "3", name: "Confident Client", role: "Transformation", imageSrc: "http://img.b2bpic.net/free-photo/sucessful-bearded-businessman-white-shirt-is-posing-dark-photo-studio_613910-17276.jpg", imageAlt: "Confident man after haircut" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Voices of Loyalty"
          description="Real gentlemen sharing why Captain's is their trusted choice"
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            { id: "1", title: "Worth Every Minute", quote: "Worth the wait, come for the haircut, stay for the vibes. This place has something special—it's the energy, the precision, and the genuine care. Captain's isn't just cutting hair; they're delivering an experience.", name: "Marcus Thompson", role: "Regular Client", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Marcus Thompson" },
            { id: "2", title: "Unmatched Quality", quote: "Great service and awesome fades and cuts. Every time I leave, I feel like I've been given a masterpiece. The barbers here know their craft inside and out.", name: "James Rodriguez", role: "Loyal Member", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "James Rodriguez" },
            { id: "3", title: "A Decade of Trust", quote: "Had my first haircut 10ish years ago and I'm still here. That says everything. The consistency, the care, the community—once you experience it, you never leave.", name: "David Chen", role: "10-Year Client", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "David Chen" },
            { id: "4", title: "Master-Level Work", quote: "Master-level fades every single time. The attention to detail and precision is unmatched. This is where I trust my look to.", name: "Anthony Brown", role: "Executive", imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg", imageAlt: "Anthony Brown" },
            { id: "5", title: "Pure Energy", quote: "The energy in this place is unbeatable. From the moment you walk in, you feel welcomed. It's not just a barber shop; it's a community hub.", name: "Kevin Williams", role: "Regular", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageAlt: "Kevin Williams" },
            { id: "6", title: "The Best in York", quote: "Best barber in York, hands down. The skill, the personality, the results—everything is top-tier. I wouldn't go anywhere else.", name: "Steven Lee", role: "Dedicated Client", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Steven Lee" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Stay Sharp. Stay Ready."
          description="Appointments fill fast. Secure your chair now. Walk-ins welcome. Appointments recommended."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "phone", type: "tel", placeholder: "(647) 855-7706", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Preferred service or time (optional)", rows: 3, required: false }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
          imageAlt="Captain's Barber Shop"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Book Appointment"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Captain's"
          columns={[
            {
              title: "Shop",              items: [
                { label: "Services", href: "#services" },
                { label: "Gallery", href: "#gallery" },
                { label: "Book Now", href: "#contact" }
              ]
            },
            {
              title: "About",              items: [
                { label: "Our Story", href: "#about" },
                { label: "Why Us", href: "#why-us" },
                { label: "Reviews", href: "#testimonials" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Phone", href: "tel:(647)855-7706" },
                { label: "Location", href: "https://maps.google.com/?q=2667+Eglinton+Ave+W,+York,+ON" },
                { label: "Hours", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Captain's Barber Shop | 2667 Eglinton Ave W, York, ON"
        />
      </div>
    </ThemeProvider>
  );
}
