"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeMediumTitles"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Über Uns",
          id: "#about",
        },
        {
          name: "Dienstleistungen",
          id: "#services",
        },
        {
          name: "Team",
          id: "#team",
        },
        {
          name: "Galerie",
          id: "#gallery",
        },
        {
          name: "Preise",
          id: "#pricing",
        },
        {
          name: "Kundenstimmen",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Kontakt",
          id: "#contact",
        },
      ]}
      brandName="Haarhexe"
      button={{
        text: "Termin Buchen",
        href: "#contact",
      }}
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-static",
      }}
      title="Haarhexe: Dein Salon für magische Verwandlungen"
      description="Entdecke bei uns die neuesten Trends und zeitlosen Klassiker. Wir zaubern dir deinen Wunschlook, der deine Persönlichkeit unterstreicht."
      tag="Exklusive Haarkunst"
      buttons={[
        {
          text: "Jetzt Termin Buchen",
          href: "#contact",
        },
        {
          text: "Unsere Leistungen",
          href: "#services",
        },
      ]}
      carouselItems={[
        {
          id: "hc-1",
          imageSrc: "http://img.b2bpic.net/free-photo/luxury-blond-female-white-dress-posing-studio_613910-10972.jpg",
          imageAlt: "Eine stilvolle Frau mit perfektem Haarschnitt in einem modernen Salon",
        },
        {
          id: "hc-2",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-barbershop_23-2148506244.jpg",
          imageAlt: "Ein Mann erhält einen modernen Haarschnitt von einem Stylisten",
        },
        {
          id: "hc-3",
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg",
          imageAlt: "Friseurwerkzeuge wie Scheren und Kämme liegen bereit",
        },
        {
          id: "hc-4",
          imageSrc: "http://img.b2bpic.net/free-photo/elderly-guest-arrives-hotel-lobby_482257-81592.jpg",
          imageAlt: "Eine glamouröse Frau mit gestyltem Haar",
        },
        {
          id: "hc-5",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-shaving-his-beard_23-2148506239.jpg",
          imageAlt: "Ein Kind bekommt seinen ersten Haarschnitt",
        },
        {
          id: "hc-6",
          imageSrc: "http://img.b2bpic.net/free-photo/young-lady-white-dress-posing-room_1153-4293.jpg",
          imageAlt: "Ein Friseur mit Haarbürste und Föhn bei der Arbeit",
        },
      ]}
      autoPlay={true}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",
          content: "Willkommen bei Haarhexe: Wo Schönheit beginnt",
        },
      ]}
      buttons={[
        {
          text: "Mehr über uns",
          href: "#about",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Haarschnitte & Styling",
          description: "Von klassisch bis modern – wir finden den perfekten Schnitt für dich. Inklusive Waschen, Schneiden, Föhnen und Styling.",
          imageSrc: "http://img.b2bpic.net/free-photo/barber-using-blowdrier-style-his-client-s-hair_23-2149186485.jpg",
          imageAlt: "Nahaufnahme eines Friseurs beim Schneiden von Haaren",
        },
        {
          title: "Farbexperten",
          description: "Egal ob Highlights, Balayage oder eine komplette Farbveränderung. Unsere Farbexperten beraten dich individuell und kreieren einzigartige Looks.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60927.jpg",
          imageAlt: "Friseurin beim Auftragen von Haarfarbe",
        },
        {
          title: "Haarpflege & Behandlungen",
          description: "Verwöhne dein Haar mit unseren hochwertigen Pflegeprodukten und spezialisierten Behandlungen für Glanz, Volumen und Gesundheit.",
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-barber-female-uses-hair-dryer-barbershop_613910-5753.jpg",
          imageAlt: "Frau, die ihre Haare mit einem Lockenstab stylen lässt",
        },
      ]}
      title="Unsere Magie für Dein Haar"
      description="Entdecke unser breites Spektrum an erstklassigen Haardienstleistungen, die dich begeistern werden."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      members={[
        {
          id: "t-1",
          name: "Luna Schmidt",
          role: "Salonleitung & Master Stylist",
          description: "Mit über 15 Jahren Erfahrung kreiert Luna innovative Schnitte und Farbkonzepte.",
          imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-female-barber-wearing-uniform-glasses-headband-holding-comb-hair-trimmer-air-looking-down-pretend-doing-haircut-client-isolated-red-background_141793-137002.jpg",
          imageAlt: "Portrait von Luna Schmidt, Salonleitung",
        },
        {
          id: "t-2",
          name: "Max Müller",
          role: "Farbexperte & Barber",
          description: "Max ist unser Experte für brillante Farben und präzise Herrenhaarschnitte.",
          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-hair-brushes-happy-cheerfuul-smiling_141793-37016.jpg",
          imageAlt: "Portrait von Max Müller, Farbexperte und Barber",
        },
        {
          id: "t-3",
          name: "Lea Fischer",
          role: "Junior Stylist & Haarstylistin",
          description: "Lea hat ein Talent für elegante Stylings und aktuelle Trends.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-brushes_23-2147611452.jpg",
          imageAlt: "Portrait von Lea Fischer, Junior Stylistin",
        },
      ]}
      title="Das Team hinter der Magie"
      description="Lerne unsere talentierten Stylisten kennen, die deine Haarträume wahr werden lassen."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "p-1",
          name: "Blonde Balayage",
          price: "ab 120€",
          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-chair-hairdresser_23-2147769773.jpg",
          imageAlt: "Vorher-Nachher-Bild einer blonden Balayage",
        },
        {
          id: "p-2",
          name: "Moderner Pixie Cut",
          price: "ab 55€",
          imageSrc: "http://img.b2bpic.net/free-photo/playful-fashionable-young-woman-with-hair-buns-winks-eyes-sticks-out-tongue-dressed-green-jacket-has-vivid-makeup-shows-white-teeth-being-full-energy-people-emotions-style-concept_273609-57046.jpg",
          imageAlt: "Stylisher kurzer Pixie-Haarschnitt",
        },
        {
          id: "p-3",
          name: "Feuriges Rot",
          price: "ab 90€",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-two-ladies-standing-yellow-wall_171337-15341.jpg",
          imageAlt: "Leuchtend rote Haarfärbung",
        },
        {
          id: "p-4",
          name: "Herren Fade",
          price: "ab 35€",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-with-messy-bun_23-2149435263.jpg",
          imageAlt: "Moderner Herrenhaarschnitt mit Fade",
        },
        {
          id: "p-5",
          name: "Elegante Hochsteckfrisur",
          price: "ab 80€",
          imageSrc: "http://img.b2bpic.net/free-photo/back-view-unrecognizable-gorgeous-brunette-with-beautiful-hairdo-flowers-it-posing-luxurious-white-dress-with-bunch-pink-air-balloons_132075-13223.jpg",
          imageAlt: "Intrikate Hochsteckfrisur für Hochzeiten",
        },
        {
          id: "p-6",
          name: "Glattes langes Haar",
          price: "ab 60€",
          imageSrc: "http://img.b2bpic.net/free-photo/playful-white-girl-hat-smiling-gray-wall-looking-portrait-good-humoured-female-model-touching-her-red-hair_197531-10222.jpg",
          imageAlt: "Glattes, langes schwarzes Haar",
        },
      ]}
      title="Unsere Kunstwerke: Vorher & Nachher"
      description="Lass dich von unserer Galerie inspirieren – wir zeigen dir, was mit Leidenschaft und Können alles möglich ist."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "p-basic",
          badge: "Standard",
          badgeIcon: Sparkles,
          price: "ab 55€",
          name: "Grundschnitt",
          buttons: [
            {
              text: "Jetzt Buchen",
              href: "#contact",
            },
          ],
          features: [
            "Waschen, Schneiden, Föhnen",
            "Individuelle Beratung",
            "Styling-Tipps",
          ],
        },
        {
          id: "p-color",
          badge: "Beliebt",
          badgeIcon: Star,
          price: "ab 90€",
          name: "Farbpaket",
          buttons: [
            {
              text: "Jetzt Buchen",
              href: "#contact",
            },
          ],
          features: [
            "Haarschnitt & Föhnen",
            "Ansatzfärbung oder Highlights",
            "Pflegebehandlung",
          ],
        },
        {
          id: "p-premium",
          badge: "Premium",
          badgeIcon: Award,
          price: "ab 150€",
          name: "Komplett-Transformation",
          buttons: [
            {
              text: "Jetzt Buchen",
              href: "#contact",
            },
          ],
          features: [
            "Individueller Haarschnitt",
            "Komplett-Coloration/Balayage",
            "Intensive Tiefenpflege",
            "Professionelles Styling",
          ],
        },
      ]}
      title="Unsere Preise: Qualität, die begeistert"
      description="Transparente Preise für unsere vielfältigen Dienstleistungen. Finde dein perfektes Paket für deinen Wunschlook."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t-test-1",
          name: "Anna Meier",
          handle: "@annam",
          testimonial: "Ich bin absolut begeistert von meinem neuen Haarschnitt und der Farbe! Das Team bei Haarhexe ist super freundlich und professionell. Ich komme definitiv wieder!",
          imageSrc: "http://img.b2bpic.net/free-photo/joyful-beautiful-blonde-woman-wearing-white-shirt-standing-co-working-space-leaning-desk_74855-15168.jpg",
          imageAlt: "Anna Meier, zufriedene Kundin",
        },
        {
          id: "t-test-2",
          name: "Jonas Weber",
          handle: "@jonasw",
          testimonial: "Endlich ein Barber, der versteht, was ich möchte. Der Fade ist perfekt und die Atmosphäre im Salon ist sehr entspannt. Danke, Max!",
          imageSrc: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285279.jpg",
          imageAlt: "Jonas Weber, zufriedener Kunde",
        },
        {
          id: "t-test-3",
          name: "Sophie Richter",
          handle: "@sophier",
          testimonial: "Meine Balayage ist wunderschön geworden! Luna hat meine Vorstellungen übertroffen. Fühle mich wie neu geboren mit meinem frischen Look.",
          imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-having-fun-street-wearing-white-funny-dress-white-headphones_291049-2264.jpg",
          imageAlt: "Sophie Richter, zufriedene Kundin",
        },
        {
          id: "t-test-4",
          name: "Claudia Schwarz",
          handle: "@claudias",
          testimonial: "Seit Jahren meine Anlaufstelle für meine Haare. Immer top Beratung und perfekte Ergebnisse. Das Team ist einfach Spitze!",
          imageSrc: "http://img.b2bpic.net/free-photo/female-shop-seller-helping-customer-try-new-dress-woman-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11697.jpg",
          imageAlt: "Claudia Schwarz, langjährige Kundin",
        },
        {
          id: "t-test-5",
          name: "Felix Klein",
          handle: "@felixk",
          testimonial: "Ich war zum ersten Mal hier und bin absolut überzeugt. Die individuelle Beratung war super und das Ergebnis spricht für sich. Bis bald!",
          imageSrc: "http://img.b2bpic.net/free-photo/friends-having-dinner-restaurant_23-2148018770.jpg",
          imageAlt: "Felix Klein, neuer Kunde",
        },
      ]}
      title="Was unsere Kunden sagen"
      description="Echte Meinungen und strahlende Gesichter – unsere Kunden lieben Haarhexe!"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f-1",
          title: "Wie kann ich einen Termin buchen?",
          content: "Du kannst ganz einfach online über unser Buchungsportal einen Termin vereinbaren oder uns telefonisch kontaktieren. Unsere Kontaktdaten findest du im unteren Bereich dieser Seite.",
        },
        {
          id: "f-2",
          title: "Bietet ihr auch Haarverlängerungen an?",
          content: "Ja, wir bieten professionelle Haarverlängerungen und -verdichtungen mit hochwertigen Echthaar-Extensions an. Vereinbare gerne einen Beratungstermin, um mehr zu erfahren.",
        },
        {
          id: "f-3",
          title: "Kann ich meine eigenen Produkte mitbringen?",
          content: "Für beste Ergebnisse und um die Qualität unserer Dienstleistungen zu gewährleisten, verwenden wir ausschließlich professionelle Produkte in unserem Salon. Gerne beraten wir dich zu passenden Produkten für zu Hause.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/smiley-mom-combing-daughter-hair_23-2148482893.jpg"
      imageAlt="Friseurin berät eine Kundin im Salon"
      mediaAnimation="opacity"
      mediaPosition="right"
      title="Häufig gestellte Fragen"
      description="Antworten auf die häufigsten Fragen rund um unsere Dienstleistungen, Termine und mehr."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "rotated-rays-static",
      }}
      tag="Kontaktiere Uns"
      title="Dein Weg zu Traumhaar"
      description="Buche jetzt deinen Termin oder kontaktiere uns für eine persönliche Beratung. Wir freuen uns auf deine Nachricht!"
      inputPlaceholder="Deine E-Mail-Adresse"
      buttonText="Nachricht Senden"
      termsText="Durch das Senden deiner Nachricht stimmst du unseren Datenschutzbestimmungen zu."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Dienstleistungen",
          items: [
            {
              label: "Haarschnitte",
              href: "#services",
            },
            {
              label: "Colorationen",
              href: "#services",
            },
            {
              label: "Styling",
              href: "#services",
            },
            {
              label: "Pflege",
              href: "#services",
            },
          ],
        },
        {
          title: "Haarhexe",
          items: [
            {
              label: "Über Uns",
              href: "#about",
            },
            {
              label: "Unser Team",
              href: "#team",
            },
            {
              label: "Galerie",
              href: "#gallery",
            },
            {
              label: "Preise",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Kontakt",
          items: [
            {
              label: "Termin Buchen",
              href: "#contact",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Impressum",
              href: "#",
            },
            {
              label: "Datenschutz",
              href: "#",
            },
          ],
        },
      ]}
      logoText="Haarhexe"
      copyrightText="© 2024 Haarhexe | Alle Rechte vorbehalten."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
