"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="medium"
        background="none"
        cardStyle="soft-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#features",
        },
        {
          name: "Team",
          id: "#team",
        },
        {
          name: "Reviews",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Teal By Bana"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Welcome to Teal By Bana"
      description="Experience unparalleled beauty services with our expert team in Amman. From exquisite hair styling to flawless makeup, discover your perfect look."
      tag="Your Beauty Sanctuary"
      buttons={[
        {
          text: "Book an Appointment",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-relaxing-spa_329181-13153.jpg?_wi=1"
      imageAlt="Luxurious beauty salon interior with a client receiving hair treatment"
      showDimOverlay={false}
      showBlur={true}
      textPosition="bottom"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/woman-lying-massage-room_1262-401.jpg",
          alt: "Woman lying in the massage room",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-relaxed-woman_1098-1320.jpg",
          alt: "Close-up of relaxed woman",
        },
        {
          src: "http://img.b2bpic.net/free-photo/relaxed-woman-spa_1098-3.jpg",
          alt: "Relaxed woman in a spa",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-photo-attractive-tanned-woman-chilling-bath-full-rose-petals-indoor-overhead-shot-refined-blonde-female-model-enjoying-spa-with-gently-smile_197531-20797.jpg",
          alt: "Close-up photo of attractive tanned woman chilling in bath full of rose petals.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-small-plant_23-2149412612.jpg",
          alt: "Medium shot smiley woman holding small plant",
        },
      ]}
      avatarText="Loved by over 1,300 happy clients!"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="About Teal By Bana"
      description="At Teal By Bana, we believe in enhancing your natural beauty through personalized and professional services. Our dedicated team uses the finest products and techniques to ensure every visit leaves you feeling refreshed, confident, and absolutely beautiful. Rated 4.4 with over 1,300 glowing reviews, we are Amman's premier destination for elegance and style."
      tag="Our Story"
      imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cut-hair-her-client-hair-salon_1157-27201.jpg?_wi=1"
      imageAlt="A stylist working on a client's hair in a brightly lit, modern salon"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={true}
      features={[
        {
          title: "Hair Styling & Color",
          description: "Expert cuts, vibrant colors, and luxurious treatments to transform your hair. Our stylists, like Jumana and Islam, are masters of their craft.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-setting-hair-client-styling_23-2147769849.jpg",
          imageAlt: "Professional hair styling and coloring",
        },
        {
          title: "Flawless Makeup",
          description: "From natural radiance to bridal glam, our makeup artists, including Mona, create stunning looks that highlight your best features for any occasion.",
          imageSrc: "http://img.b2bpic.net/free-photo/hands-working-make-up-client_23-2148398657.jpg",
          imageAlt: "Flawless makeup application for a client",
        },
        {
          title: "Manicures & Pedicures",
          description: "Indulge in our nail care services, offering immaculate manicures, relaxing pedicures, and exquisite nail art to keep your hands and feet beautiful.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-her-nail-art-fingernails-with-varnish_23-2149820414.jpg",
          imageAlt: "Manicure and pedicure services",
        },
      ]}
      title="Our Signature Services"
      description="Discover a range of beauty treatments designed to perfect your look and pamper your senses."
      tag="What We Offer"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      groups={[
        {
          id: "stylists",
          groupTitle: "Hair & Makeup Artists",
          members: [
            {
              id: "jumana",
              title: "Jumana",
              subtitle: "Master Hair Colorist",
              detail: "Known for her exquisite color transformations and ensuring your hair always looks its best. Clients rave about her precision.",
              imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-hair-brushes-happy-cheerfuul-smiling_141793-37016.jpg",
              imageAlt: "Portrait of Jumana, Master Hair Colorist",
            },
            {
              id: "mona",
              title: "Mona",
              subtitle: "Senior Makeup Artist",
              detail: "Specializing in soft, clean, and glamorous looks. Mona's patience and ability to understand client desires are unmatched.",
              imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-slavic-female-barber-wearing-uniform-holding-scissors-shaving-brush-isolated-purple-background_141793-89890.jpg",
              imageAlt: "Portrait of Mona, Senior Makeup Artist",
            },
            {
              id: "islam",
              title: "Islam",
              subtitle: "Expert Hair Stylist",
              detail: "A true artist who can tame even the hardest-to-deal-with hair, creating neat and stunning styles that everyone adores.",
              imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-beautiful-female-barber-uniform-holding-hair-clipper-with-comb-isolated-green-background_141793-119384.jpg",
              imageAlt: "Portrait of Islam, Expert Hair Stylist",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/woman-relaxing-spa_329181-13153.jpg?_wi=2",
          imageAlt: "professional female hairdresser smiling",
        },
        {
          id: "support",
          groupTitle: "Client Relations",
          members: [
            {
              id: "receptionist",
              title: "Our Welcoming Staff",
              subtitle: "Client Experience Lead",
              detail: "Our entire team is dedicated to providing a friendly and welcoming atmosphere from the moment you step in.",
              imageSrc: "http://img.b2bpic.net/free-photo/pensive-woman-with-workspace-background_23-2147601434.jpg",
              imageAlt: "Smiling beauty salon receptionist",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cut-hair-her-client-hair-salon_1157-27201.jpg?_wi=2",
          imageAlt: "professional female hairdresser smiling",
        },
      ]}
      title="Meet Our Talented Team"
      description="Our passionate and skilled professionals are dedicated to delivering exceptional beauty experiences tailored just for you."
      tag="The Experts Behind Your Beauty"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Suzy A",
          handle: "@suzy_a",
          testimonial: "I definitely recommend this salon! These girls know what they’re doing and they won’t ruin your hair. I had the pleasure of having Jumana dye my hair and she was amazing!",
          imageSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-wearing-white-their-wedding_23-2150835701.jpg",
          imageAlt: "Happy client Suzy A",
        },
        {
          id: "2",
          name: "Rand Alfaouri",
          handle: "@r_alfaouri",
          testimonial: "I absolutely loved the makeup! Mona was incredible and so patient with me, and understood exactly what I wanted. The look was exactly what I asked for: soft, clean, and glam. I got so many compliments! Thank you for the amazing service!",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-luxury-brunette-woman-black-sweater-bright-background_613910-7030.jpg",
          imageAlt: "Happy client Rand Alfaouri",
        },
        {
          id: "3",
          name: "Batool Zraiqat",
          handle: "@b_zraiqat",
          testimonial: "The salon is absolutely amazing, I had Muna do my makeup and she nailed it. Islam did my hair and I adore it, my hair is hard to deal with but she crushed it, it’s so neat and everyone loved it!",
          imageSrc: "http://img.b2bpic.net/free-photo/feminine-young-blond-woman-holding-hand-head-gazing-aside-with-dreamy-smiling-face-expression-standing-summer-outfit-white-background_176420-50443.jpg",
          imageAlt: "Happy client Batool Zraiqat",
        },
        {
          id: "4",
          name: "Sarah K.",
          handle: "@sarahk_beauty",
          testimonial: "Every visit to Teal By Bana is a treat. The staff is so friendly and professional, and they always make sure I leave feeling pampered and beautiful. Highly recommend their elegant treatments!",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-caucasian-lady-uses-roller-massager-while-sitting-blonde-woman-table-indoors-skin-care-concept_197531-31466.jpg",
          imageAlt: "Happy client Sarah K.",
        },
        {
          id: "5",
          name: "Layla M.",
          handle: "@layla_glow",
          testimonial: "I came here for my bridal package, and it was a dream come true! The welcoming staff made me feel so comfortable, and my hair and makeup were absolutely perfect. Thank you, Teal By Bana!",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-lying-bed-with-ferry-light-her-hair-looking-camera_23-2147890824.jpg",
          imageAlt: "Happy client Layla M.",
        },
      ]}
      title="What Our Clients Say"
      description="With over 1,300 5-star reviews, our clients' satisfaction is our greatest pride. Hear why they love Teal By Bana."
      tag="Client Love"
      speed={50}
      topMarqueeDirection="left"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",
          title: "How do I book an appointment?",
          content: "You can book an appointment by calling us directly at 07 7190 9091, or by visiting our salon in Amman. We recommend booking in advance to secure your preferred time.",
        },
        {
          id: "2",
          title: "What payment methods do you accept?",
          content: "We accept cash, credit cards (Visa, MasterCard), and mobile payment options. Please inquire about specific options when booking your service.",
        },
        {
          id: "3",
          title: "Do you offer bridal packages?",
          content: "Yes, we specialize in comprehensive bridal packages including hair styling, makeup, and pre-wedding treatments. Contact us for a personalized consultation.",
        },
        {
          id: "4",
          title: "What are your operating hours?",
          content: "We are open daily from 9 AM to 7 PM. Live less busy than usual on Wednesdays, making it a great time to visit.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautician-woman-clinic-consults-client_23-2148878890.jpg"
      imageAlt="Stylist consulting with a client in a beauty salon"
      mediaAnimation="opacity"
      mediaPosition="left"
      title="Frequently Asked Questions"
      description="Have questions? We've got answers. Find more information about our services, appointments, and salon policies."
      tag="Your Queries Answered"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Get In Touch With Us"
      description="Ready to transform your look? Contact us today to book your next appointment or inquire about our services. We look forward to welcoming you!"
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Full Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email Address",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Phone Number (Optional)",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Tell us about your beauty needs...",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/makeup-artist-getting-ready-photoshoot_23-2149305114.jpg"
      imageAlt="Aesthetic and clean beauty salon interior with soft lighting"
      mediaAnimation="opacity"
      mediaPosition="right"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoAlt="Teal By Bana Logo"
      logoText="Teal By Bana"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
