"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Scissors, Flame, Sparkles, Zap, Shield, Crown, Users, Award, Star, MapPin, Instagram, Linkedin, Globe, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="Blackstone Barbers"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardScroll 
          title="Premium Barbering in Central London"
          description="Experience precision grooming from London's finest barbers. Specialising in classic cuts, beard grooming, and traditional hot shaves."
          tag="Est. 2015"
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg"
          imageAlt="Professional barber cutting hair"
          buttons={[
            { text: "Book Appointment", href: "contact" },
            { text: "View Services", href: "services" }
          ]}
        />
      </div>
      
      <div id="services" data-section="services">
        <FeatureHoverPattern 
          title="Our Premium Services"
          description="Crafted grooming experiences designed for the discerning gentleman"
          tag="Services"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              icon: Scissors,
              title: "Classic Haircuts",              description: "Precision cuts executed with expertise. From timeless styles to modern interpretations of classic designs."
            },
            {
              icon: Flame,
              title: "Hot Shave",              description: "Traditional straight razor shave with premium lather and finishing moisturiser. A luxurious ritual."
            },
            {
              icon: Sparkles,
              title: "Beard Grooming",              description: "Expert beard shaping, trimming, and conditioning. We specialise in bold, well-defined beards."
            },
            {
              icon: Zap,
              title: "Hair Treatments",              description: "Professional-grade treatments to restore vitality and shine. Scalp massage included with every service."
            },
            {
              icon: Shield,
              title: "Skin Care",              description: "Facial treatments and skincare advice tailored to your needs. Premium products for optimal results."
            },
            {
              icon: Crown,
              title: "Executive Services",              description: "Complete grooming packages. Haircut, shave, beard work, and premium skincare in one appointment."
            }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <AboutMetric 
          title="Blackstone Barbers: London's Premier Grooming Destination since 2015"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Users, label: "Satisfied Clients", value: "5,000+" },
            { icon: Award, label: "Years of Excellence", value: "9" },
            { icon: Star, label: "Google Rating", value: "4.9" },
            { icon: MapPin, label: "London Locations", value: "2" }
          ]}
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardTwo 
          title="Meet Our Master Barbers"
          description="Experienced professionals dedicated to the art of barbering"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          members={[
            {
              id: "1",              name: "Marcus Sterling",              role: "Senior Barber",              description: "18 years of barbering experience. Specialises in classic cuts and traditional hot shaves. Award-winning stylist.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg",              imageAlt: "Marcus Sterling, Senior Barber",              socialLinks: [
                { icon: Instagram, url: "https://instagram.com" },
                { icon: Linkedin, url: "https://linkedin.com" }
              ]
            },
            {
              id: "2",              name: "James Mitchell",              role: "Master Craftsman",              description: "12 years specialising in beard artistry and contemporary styling. Certified in premium grooming techniques.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg",              imageAlt: "James Mitchell, Master Craftsman",              socialLinks: [
                { icon: Instagram, url: "https://instagram.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "3",              name: "David Thompson",              role: "Style Director",              description: "Trendsetter in modern barbering. Expert in fade work and contemporary designs. Passionate about client care.",              imageSrc: "https://img.b2bpic.net/free-photo/man-hair-salon-looking-sideways_23-2148242781.jpg",              imageAlt: "David Thompson, Style Director",              socialLinks: [
                { icon: Instagram, url: "https://instagram.com" },
                { icon: Mail, url: "mailto:david@blackstonebarbers.com" }
              ]
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne 
          title="What Our Clients Say"
          description="Real feedback from our valued customers across London"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Alex Porter",              role: "Marketing Director",              company: "Tech Startup London",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg",              imageAlt: "Alex Porter testimonial"
            },
            {
              id: "2",              name: "Robert Chen",              role: "Investment Banker",              company: "City Finance",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-aside-smiling-confident-with-arms-crossed-chest_141793-55366.jpg",              imageAlt: "Robert Chen testimonial"
            },
            {
              id: "3",              name: "Christopher Hayes",              role: "Architect",              company: "Design Studio",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",              imageAlt: "Christopher Hayes testimonial"
            },
            {
              id: "4",              name: "Michael Barnes",              role: "Creative Director",              company: "Advertising Agency",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg",              imageAlt: "Michael Barnes testimonial"
            }
          ]}
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqSplitText 
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about our services and booking process"
          textPosition="left"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I book an appointment?",              content: "You can book online through our website, call us directly at 020 XXXX XXXX, or visit one of our locations in person. Online booking is available 24/7 and you'll receive instant confirmation."
            },
            {
              id: "2",              title: "What is your cancellation policy?",              content: "Appointments can be cancelled or rescheduled up to 24 hours in advance without charge. Cancellations within 24 hours may incur a 50% booking fee."
            },
            {
              id: "3",              title: "Do you offer walk-in appointments?",              content: "Yes, we welcome walk-ins subject to availability. However, we recommend booking in advance to ensure minimal waiting time, especially during peak hours (Tuesday-Friday evenings)."
            },
            {
              id: "4",              title: "What products do you use?",              content: "We use premium, professional-grade products including Kérastase, Pall Mall Barber Club, and Truefitt & Hill. All products are tested for quality and suited to various hair types."
            },
            {
              id: "5",              title: "Are your barbers qualified?",              content: "All our barbers are fully qualified and certified. Many have over 10 years of experience and regularly attend training workshops to stay current with latest techniques."
            },
            {
              id: "6",              title: "Do you offer loyalty programs?",              content: "Yes! Join our Blackstone Club and earn points on every visit. Accumulate points for discounts, free services, and exclusive member-only events."
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplitForm 
          title="Get in Touch"
          description="Ready to book your grooming appointment? Reach out to us and we'll get you scheduled with one of our master barbers."
          inputs={[
            { name: "name", type: "text", placeholder: "Your 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 of Interest", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your preferred appointment time and any special requests...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/young-bearded-man-washing-head-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6316.jpg"
          imageAlt="Blackstone Barbers interior"
          mediaPosition="right"
          buttonText="Book Appointment"
          onSubmit={() => console.log('Form submitted')}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSimple 
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#" },
                { label: "Services", href: "#services" },
                { label: "Team", href: "#team" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Haircuts", href: "#services" },
                { label: "Hot Shaves", href: "#services" },
                { label: "Beard Grooming", href: "#services" },
                { label: "Skincare", href: "#services" }
              ]
            },
            {
              title: "Locations",              items: [
                { label: "Soho, London", href: "#" },
                { label: "Shoreditch, London", href: "#" },
                { label: "Booking Info", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Blackstone Barbers. All rights reserved."
          bottomRightText="Premium Barbering Since 2015"
        />
      </div>
    </ThemeProvider>
  );
}