"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Award, Crop, Droplets, Home, Scissors, Sparkles, Star, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Services",          id: "#services"},
        {
          name: "About Us",          id: "#about"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Book Now",          id: "#contact"},
      ]}
      brandName="Buisness-Romana"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplit
      background={{
        variant: "plain"}}
      imagePosition="right"
      title="Experience The Art of Grooming"
      description="Step into Buisness-Romana, Phoenix's premier barbershop. Where timeless style meets modern precision, and every visit feels like coming home. Elevate your look with our expert barbers."
      buttons={[
        {
          text: "Book Your Cut",          href: "#contact"},
        {
          text: "Our Services",          href: "#services"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg"
      imageAlt="Barber giving a precision haircut"
      mediaAnimation="blur-reveal"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/barber-showing-man-his-haircut-mirror_107420-94782.jpg",          alt: "Barber showing man his haircut in mirror"},
        {
          src: "http://img.b2bpic.net/free-photo/barber-sprays-water-hair_1304-2775.jpg",          alt: "Barber sprays water on the hair"},
        {
          src: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg",          alt: "Various trimmers on dressing table"},
        {
          src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94801.jpg",          alt: "Man getting his beard shaved with razor"},
        {
          src: "http://img.b2bpic.net/free-photo/calm-man-posing-near-mirror_171337-16537.jpg",          alt: "Calm Man posing near the mirror"},
      ]}
      avatarText="Trusted by 2,800+ happy clients"
      marqueeItems={[
        {
          type: "text-icon",          text: "Precision Cuts",          icon: Scissors,
        },
        {
          type: "text-icon",          text: "Hot Shaves",          icon: Droplets,
        },
        {
          type: "text-icon",          text: "Beard Styling",          icon: Crop,
        },
        {
          type: "text-icon",          text: "Expert Barbers",          icon: Award,
        },
        {
          type: "text-icon",          text: "Relaxing Atmosphere",          icon: Home,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Crafting Confidence Since Day One"
      description="At Buisness-Romana, we're more than just a barbershop – we're a community hub where tradition meets trend. With a 4.8-star rating from over 2,800 clients, our commitment to quality, customer satisfaction, and a welcoming atmosphere is unmatched. We pride ourselves on creating personalized grooming experiences that leave you feeling refreshed and looking your best. Our address: 2822 N 32nd St, Phoenix, AZ 85008."
      metrics={[
        {
          value: "4.8",          title: "Client Rating"},
        {
          value: "2800+",          title: "Happy Customers"},
        {
          value: "10+",          title: "Years Experience"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-getting-his-hair-washed_23-2149220571.jpg"
      imageAlt="Interior of Buisness-Romana barbershop with clients"
      mediaAnimation="blur-reveal"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-items-per-row"
      useInvertedBackground={false}
      features={[
        {
          title: "Classic Haircut",          description: "Timeless style and precision cut, tailored to your preference.",          imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg",          imageAlt: "Classic men's haircut with scissors"},
        {
          title: "Modern Fade",          description: "Sharp lines and seamless blends for a contemporary look.",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-waiting-haircut_23-2148353468.jpg",          imageAlt: "Barber styling a modern fade haircut"},
        {
          title: "Beard Trim & Shape",          description: "Expert grooming to sculpt and perfect your beard, hot towel finish.",          imageSrc: "http://img.b2bpic.net/free-photo/man-closes-his-eyes-while-barber-shapes-his-black-beard_1304-2778.jpg",          imageAlt: "Man getting a beard trim"},
        {
          title: "Luxurious Hot Shave",          description: "A relaxing, traditional hot towel shave for ultimate smoothness.",          imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg",          imageAlt: "Barber giving a hot towel shave"},
      ]}
      title="Our Signature Services"
      description="From classic cuts to modern fades, beard trims to hot shaves – discover a service tailored just for you. Our expert barbers use only premium products for a superior grooming experience."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "classic",          badge: "Standard",          price: "$35",          subtitle: "Classic Haircut & Style",          buttons: [
            {
              text: "Book Classic",              href: "#contact"},
          ],
          features: [
            "Precision Haircut",            "Hot Lather Neck Shave",            "Basic Styling"],
        },
        {
          id: "signature",          badge: "Popular",          badgeIcon: Sparkles,
          price: "$55",          subtitle: "Signature Cut & Beard Trim",          buttons: [
            {
              text: "Book Signature",              href: "#contact"},
          ],
          features: [
            "Precision Haircut",            "Deluxe Beard Trim & Line Up",            "Hot Towel Finish",            "Premium Styling Product"],
        },
        {
          id: "executive",          badge: "Premium",          price: "$80",          subtitle: "Executive Grooming Package",          buttons: [
            {
              text: "Book Executive",              href: "#contact"},
          ],
          features: [
            "Precision Haircut",            "Luxurious Hot Shave",            "Facial Massage",            "Premium Styling & Product"],
        },
      ]}
      title="Your Style, Your Investment"
      description="Quality grooming for every budget. Find the perfect service that suits your needs and elevate your personal style."
    />
  </div>

  <div id="why-choose" data-section="why-choose">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "metric-1",          icon: Award,
          title: "Expert Craftsmanship",          value: "10+ Years"},
        {
          id: "metric-2",          icon: Star,
          title: "Client Satisfaction",          value: "4.8/5 Stars"},
        {
          id: "metric-3",          icon: Users,
          title: "Trusted Community",          value: "2800+ Clients"},
      ]}
      title="The Romana Difference"
      description="Our commitment to excellence shines through every detail. Experience the best in Phoenix, where quality and customer satisfaction are our top priorities."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "John Doe",          role: "Regular Customer",          company: "Loyal Client",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-man-model-wearing-white-clothes-posing-blue-sea_158538-2320.jpg",          imageAlt: "Happy client John Doe"},
        {
          id: "t2",          name: "Michael Chen",          role: "New Client",          company: "Phoenix Resident",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blue-eyed-bearded-hipster-male-with-crossed-arms-grey-background_613910-3320.jpg",          imageAlt: "Happy client Michael Chen"},
        {
          id: "t3",          name: "Emily Rodriguez",          role: "Local Business Owner",          company: "Local Business",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6410.jpg",          imageAlt: "Happy client Emily Rodriguez"},
        {
          id: "t4",          name: "David Kim",          role: "First-time Visitor",          company: "First Timer",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462466.jpg",          imageAlt: "Happy client David Kim"},
        {
          id: "t5",          name: "Sarah Johnson",          role: "Satisfied Customer",          company: "Repeat Visitor",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/client-barber-greeting-each-other-barbershop_23-2148181951.jpg",          imageAlt: "Satisfied Customer Sarah Johnson"},
        {
          id: "t6",          name: "Chris Miller",          role: "Dedicated Client",          company: "Long-term Client",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18295.jpg",          imageAlt: "Dedicated Client Chris Miller"},
      ]}
      title="What Our Clients Say"
      description="Don't just take our word for it. Hear from our loyal customers who trust Buisness-Romana with their style and experience."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "4.8 Star Rating",        "Trusted Barbers",        "Phoenix's Finest",        "Community Favorite",        "Expert Craftsmanship",        "Premium Products",        "Hygiene Certified"]}
      title="Committed to Excellence"
      description="Our reputation is built on consistent quality, exceptional service, and a dedication to our craft, earning the trust of the Phoenix community."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "What are your business hours?",          content: "We are open from 10 AM to 6 PM, Monday through Saturday. We are closed on Sundays."},
        {
          id: "faq-2",          title: "Where are you located?",          content: "You can find us at 2822 N 32nd St, Phoenix, AZ 85008."},
        {
          id: "faq-3",          title: "How do I book an appointment?",          content: "You can easily book online via our 'Book Now' section on this page, or give us a call at (480) 754-9418 during business hours."},
        {
          id: "faq-4",          title: "Do you accept walk-ins?",          content: "While appointments are highly recommended to ensure availability, we do accept walk-ins based on barber availability. Feel free to call ahead!"},
      ]}
      title="Got Questions? We've Got Answers."
      description="Find quick answers to the most common questions about Buisness-Romana and our services, location, and booking process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Book Now"
      title="Schedule Your Next Transformation"
      description="Ready for a fresh cut or a relaxing shave? Fill out the form below to inquire about an appointment, or call us directly at (480) 754-9418. Our team looks forward to welcoming you!"
      inputPlaceholder="Enter your email"
      buttonText="Send Inquiry"
      termsText="By clicking Send Inquiry you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Classic Haircut",              href: "#services"},
            {
              label: "Modern Fade",              href: "#services"},
            {
              label: "Beard Trim",              href: "#services"},
            {
              label: "Hot Shave",              href: "#services"},
          ],
        },
        {
          title: "About Us",          items: [
            {
              label: "Our Story",              href: "#about"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "Why Romana",              href: "#why-choose"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          title: "Contact",          items: [
            {
              label: "Book Now",              href: "#contact"},
            {
              label: "Location",              href: "#faq"},
            {
              label: "Hours",              href: "#faq"},
            {
              label: "Call Us: (480) 754-9418",              href: "tel:+14807549418"},
          ],
        },
      ]}
      logoText="Buisness-Romana"
      copyrightText="© 2024 Buisness-Romana. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
