"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Scissors, Award, Sparkles, Star, HelpCircle, Phone, Zap, Droplets, Brush, Users, Shield } from 'lucide-react';

const navItems = [
  { name: "Home", id: "home" },
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" }
];

const testimonials = [
  {
    id: "1",    name: "James Mitchell",    role: "Business Owner",    company: "Mitchell Enterprises",    rating: 5,
    imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1681.jpg",    imageAlt: "professional business man portrait headshot"
  },
  {
    id: "2",    name: "David Chen",    role: "Creative Director",    company: "Design Studio",    rating: 5,
    imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-thinking-posing-beige-wall_176420-144.jpg",    imageAlt: "creative professional man headshot portrait"
  },
  {
    id: "3",    name: "Marcus Johnson",    role: "Software Developer",    company: "Tech Company",    rating: 5,
    imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg",    imageAlt: "tech professional man portrait headshot"
  },
  {
    id: "4",    name: "Robert Williams",    role: "Marketing Manager",    company: "Creative Agency",    rating: 5,
    imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-thinking-posing-beige-wall_176420-144.jpg",    imageAlt: "marketing professional man headshot portrait"
  },
  {
    id: "5",    name: "Anthony Rodriguez",    role: "Entrepreneur",    company: "Startup Ventures",    rating: 5,
    imageSrc: "http://img.b2bpic.net/free-photo/serious-young-businessman-showing-finger-frame_1262-5556.jpg",    imageAlt: "startup entrepreneur man headshot portrait"
  },
  {
    id: "6",    name: "Christopher Lee",    role: "Sales Executive",    company: "Business Solutions",    rating: 5,
    imageSrc: "http://img.b2bpic.net/free-photo/furious-mature-business-man-conference-room_1262-3010.jpg",    imageAlt: "sales executive man headshot portrait"
  }
];

const faqs = [
  {
    id: "1",    title: "How do I book an appointment?",    content: "You can book an appointment directly through our contact form or call us at (555) 123-4567. We also accept walk-ins, though appointments are recommended to minimize wait times, especially during peak hours."
  },
  {
    id: "2",    title: "What is your cancellation policy?",    content: "We ask for at least 24 hours notice for cancellations or rescheduling. Cancellations made with less notice may be subject to a cancellation fee. No-shows will be charged the full service fee."
  },
  {
    id: "3",    title: "Do you offer services for first-time customers?",    content: "Absolutely! We welcome first-time customers and take time to understand your preferences and hair type. Our barbers will consult with you to ensure you get the perfect cut and style."
  },
  {
    id: "4",    title: "What payment methods do you accept?",    content: "We accept cash, all major credit cards, and digital payment methods including Apple Pay and Google Pay. Contactless payment options are available for your convenience."
  },
  {
    id: "5",    title: "How long does a typical haircut take?",    content: "A standard haircut typically takes 30-45 minutes. Specialized services like beard grooming or hot shaves may take longer. We'll provide an estimate when you book your appointment."
  },
  {
    id: "6",    title: "Do you offer gift certificates?",    content: "Yes! We offer gift certificates in various denominations. They make perfect gifts for any occasion. Contact us for details on how to purchase."
  }
];

const footerColumns = [
  {
    title: "Quick Links",    items: [
      { label: "Home", href: "#home" },
      { label: "Services", href: "#services" },
      { label: "About", href: "#about" },
      { label: "Contact", href: "#contact" }
    ]
  },
  {
    title: "Hours",    items: [
      { label: "Monday - Friday: 9AM - 7PM", href: "#" },
      { label: "Saturday: 9AM - 6PM", href: "#" },
      { label: "Sunday: Closed", href: "#" },
      { label: "Holidays: Call for hours", href: "#" }
    ]
  },
  {
    title: "Contact",    items: [
      { label: "Phone: (555) 123-4567", href: "tel:5551234567" },
      { label: "Email: info@gregsbarber.com", href: "mailto:info@gregsbarber.com" },
      { label: "123 Main Street, City, State", href: "#" },
      { label: "Follow us on Social", href: "#" }
    ]
  }
];

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple navItems={navItems} brandName="Greg's Barber Shop" />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Premium Grooming Since 2010"
          description="Experience the art of traditional barbering with modern excellence. Where every cut tells a story of craftsmanship and style."
          tag="Welcome to Greg's"
          tagIcon={Scissors}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book an Appointment", href: "#contact" },
            { text: "Explore Services", href: "#services" }
          ]}
          buttonAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/crop-barber-holding-mousse-client_23-2147778804.jpg"
          imageAlt="Professional barber cutting hair in shop"
          showDimOverlay={true}
          showBlur={true}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Crafting Excellence in Every Cut"
          description="Greg's Barber Shop has been a cornerstone of our community for over a decade. We believe that a great haircut is more than just grooming—it's a confidence booster and a form of self-expression. Our team of skilled barbers combines traditional techniques with contemporary styles to deliver exceptional results every single time."
          tag="Our Story"
          tagIcon={Award}
          tagAnimation="opacity"
          buttons={[
            { text: "Meet Our Team", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186456.jpg"
          imageAlt="Interior view of Greg's Barber Shop"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureHoverPattern
          title="Our Services"
          description="From classic fades to modern designs, we offer a full range of professional grooming services tailored to your style."
          tag="Premium Services"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          features={[
            {
              icon: Scissors,
              title: "Classic Haircuts",              description: "Timeless cuts executed with precision. Perfect for the man who appreciates tradition and quality craftsmanship."
            },
            {
              icon: Zap,
              title: "Modern Fades & Designs",              description: "Contemporary styles with sharp lines and intricate patterns. We stay up-to-date with the latest trends."
            },
            {
              icon: Droplets,
              title: "Beard Grooming",              description: "Expert beard trimming, shaping, and treatments. We'll help you maintain a perfectly groomed look."
            },
            {
              icon: Brush,
              title: "Hair Treatments",              description: "Specialized treatments including deep conditioning and scalp care for healthy, vibrant hair."
            },
            {
              icon: Users,
              title: "Kids Haircuts",              description: "Friendly service for the younger gentlemen. Fun, patient, and quick cuts in a welcoming environment."
            },
            {
              icon: Shield,
              title: "Hot Shave Service",              description: "Classic hot towel shave experience with premium razors and soothing aftercare products."
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Clients Say"
          description="Real experiences from the men who trust us with their grooming needs."
          tag="Client Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={testimonials}
          kpiItems={[
            { value: "1000+", label: "Happy Customers" },
            { value: "12+", label: "Years in Business" },
            { value: "5★", label: "Average Rating" }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Get answers to common questions about our services, booking, and barbershop policies."
          tag="FAQs"
          tagIcon={HelpCircle}
          tagAnimation="opacity"
          faqs={faqs}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          title="Ready for Your Next Great Haircut?"
          description="Book your appointment today or reach out with any questions. We're here to help you look and feel your best."
          tagIcon={Phone}
          tagAnimation="blur-reveal"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Get in Touch"
          termsText="By submitting, you agree to our Terms and Conditions."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167454.jpg"
          imageAlt="Greg's Barber Shop exterior"
          columns={footerColumns}
          logoText="Greg's Barber Shop"
          copyrightText="© 2024 Greg's Barber Shop. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}