"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Scissors, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="The Edge"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Reviews", id: "testimonials" },
            { name: "Pricing", id: "pricing" }
          ]}
          button={{
            text: "Book Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="The Edge Barber Shop"
          description="Premium men's grooming and haircuts in Miami. Expert barbers delivering precision cuts, styling, and professional services since day one."
          background={{
            variant: "downward-rays-static"
          }}
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Satisfied customer 1"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              alt: "Satisfied customer 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              alt: "Satisfied customer 3"
            }
          ]}
          avatarText="Trusted by 500+ Miami men"
          buttons={[
            {
              text: "Book Appointment",              href: "contact"
            },
            {
              text: "View Services",              href: "services"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Story"
          tagIcon={Scissors}
          title="The Edge Barber Shop is Miami's destination for premium men's grooming"
          description="Founded in 2015"
          subdescription="Located in the heart of Miami's Wynwood District"
          icon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-with-scissors-comb-barbershop-close-up-photo_613910-18538.jpg"
          imageAlt="The Edge Barber Shop interior"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardMedia
          title="Premium Barbering Services"
          description="Experience the precision and craftsmanship that sets The Edge apart from other barbershops in Miami"
          tag="Services"
          features={[
            {
              id: "1",              title: "Classic Haircut",              description: "Precision cuts tailored to your style and face shape",              tag: "Popular",              imageSrc: "https://img.b2bpic.net/free-photo/bearded-male-sitting-armchair-barber-shop-while-hairdresser-modeling-beard-with-scissors-comb-barbershop_613910-4343.jpg"
            },
            {
              id: "2",              title: "Beard Trimming",              description: "Expert beard grooming and styling for the distinguished man",              tag: "Specialty",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg"
            },
            {
              id: "3",              title: "Fade Cuts",              description: "Modern fade styles executed with technical precision",              tag: "Trending",              imageSrc: "https://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-5073.jpg"
            },
            {
              id: "4",              title: "Hot Towel Shave",              description: "Traditional straight razor shave with premium products",              tag: "Classic",              imageSrc: "https://img.b2bpic.net/free-photo/man-getting-his-beard-trimmed-salon_23-2148242774.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Real reviews from satisfied customers in Miami"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Marcus Johnson",              date: "Date: 15 January 2025",              title: "The best barbershop in Miami, hands down",              quote: "Been coming to The Edge for 2 years now. The barbers are incredibly skilled and professional. Every cut is exactly what I ask for, and the atmosphere is welcoming and cool.",              tag: "Regular Customer",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              id: "2",              name: "David Chen",              date: "Date: 12 January 2025",              title: "Premium service at reasonable prices",              quote: "I was skeptical at first, but The Edge delivered on every promise. The hot towel shave experience is something special. Will definitely be back every month.",              tag: "First Time",              avatarSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg"
            },
            {
              id: "3",              name: "James Rodriguez",              date: "Date: 8 January 2025",              title: "Precision cuts and genuine care",              quote: "What sets The Edge apart is the attention to detail. They take time to understand exactly what you want and deliver it perfectly. Customer service is top-notch.",              tag: "Loyal Client",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg"
            },
            {
              id: "4",              name: "Anthony Lee",              date: "Date: 5 January 2025",              title: "Worth every penny",              quote: "I've tried many barbershops in Miami, and The Edge is consistently the best. Great location, talented barbers, and a cool vibe. Highly recommended for anyone serious about their grooming.",              tag: "Verified Customer",              avatarSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Transparent Pricing"
          description="No hidden fees, just premium barbering services at fair prices"
          tag="Pricing"
          plans={[
            {
              id: "1",              price: "$25",              name: "Classic Haircut",              features: [
                "Full precision haircut",                "Hot towel neck trim",                "Styling consultation"
              ],
              buttons: [
                {
                  text: "Book Now",                  href: "contact"
                }
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$35",              name: "Premium Cut + Beard",              features: [
                "Precision haircut",                "Beard trim and shape",                "Hot towel service",                "Premium styling products"
              ],
              buttons: [
                {
                  text: "Book Now",                  href: "contact"
                }
              ]
            },
            {
              id: "3",              price: "$40",              name: "Luxury Full Service",              features: [
                "Expert haircut",                "Full beard grooming",                "Hot towel shave",                "Premium products included",                "Complimentary beverages"
              ],
              buttons: [
                {
                  text: "Book Now",                  href: "contact"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Common questions about The Edge Barber Shop and our services"
          tag="FAQ"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",              title: "Do you accept walk-ins or is booking required?",              content: "We accept both walk-ins and appointments. However, we highly recommend booking online or calling (305) 555-EDGE to guarantee availability, especially during peak hours on weekends."
            },
            {
              id: "2",              title: "What are your hours of operation?",              content: "We're open Monday through Saturday, 9 AM to 7 PM, and Sunday 10 AM to 5 PM. We're located in Wynwood, Miami. Closed major holidays."
            },
            {
              id: "3",              title: "What payment methods do you accept?",              content: "We accept cash, all major credit cards (Visa, Mastercard, American Express), and digital payments like Apple Pay and Google Pay for your convenience."
            },
            {
              id: "4",              title: "Do you offer services for kids?",              content: "Yes, we offer professional haircuts for children and teens. Our barbers are experienced with all hair types and styles. Kids' cuts are priced at $20."
            },
            {
              id: "5",              title: "How long do appointments typically take?",              content: "A standard haircut takes about 30 minutes. Premium services with beard work may take 45 minutes. We always allow time between appointments for a quality experience."
            },
            {
              id: "6",              title: "What if I'm not satisfied with my cut?",              content: "Your satisfaction is guaranteed. If you're not happy with your cut, let us know immediately, and our senior barber will make corrections at no additional charge within 48 hours."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Book Your Appointment Today"
          description="Schedule your visit at The Edge Barber Shop in Miami. Fill out the form and we'll confirm your appointment within 24 hours."
          inputs={[
            {
              name: "fullName",              type: "text",              placeholder: "Your Full Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Phone Number",              required: true
            },
            {
              name: "service",              type: "text",              placeholder: "Service (e.g., Classic Haircut, Beard Trim)",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Any special requests or preferences?",            rows: 5,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/man-with-beard-hairdresser-with-client-man-with-brush_1157-43552.jpg"
          imageAlt="The Edge Barber Shop contact"
          mediaPosition="right"
          buttonText="Book Appointment"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="The Edge"
          columns={[
            {
              title: "Services",              items: [
                { label: "Haircuts", href: "#services" },
                { label: "Beard Grooming", href: "#services" },
                { label: "Hot Towel Shave", href: "#services" },
                { label: "Kids Cuts", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Pricing", href: "#pricing" },
                { label: "Reviews", href: "#testimonials" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Visit Us",              items: [
                { label: "123 Wynwood Ave, Miami, FL 33127", href: "https://maps.google.com" },
                { label: "(305) 555-EDGE", href: "tel:+13055553433" },
                { label: "Mon-Sat: 9AM - 7PM", href: "#" },
                { label: "Sun: 10AM - 5PM", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 The Edge Barber Shop. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}