"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 FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Coffee, DollarSign, Heart, MessageCircle, Scissors } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeLargeTitles"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Über Uns",          id: "#about"},
        {
          name: "Dienstleistungen",          id: "#services"},
        {
          name: "Preise",          id: "#prices"},
        {
          name: "Team",          id: "#team"},
        {
          name: "Rezensionen",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Kontakt",          id: "#contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmmil2"
      logoAlt="Salon Klausnitzer Logo"
      brandName="Salon Klausnitzer"
      button={{
        text: "Termin Buchen",        href: "#contact"}}
      animateOnLoad={true}
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "radial-gradient"}}
      title="Ihr Glanzmoment beginnt hier bei Salon Klausnitzer"
      description="Erleben Sie meisterhaftes Handwerk, herzlichen Service und faire Preise – Ihr Friseur in Böblingen für den perfekten Look."
      kpis={[
        {
          value: "20+",          label: "Jahre Erfahrung"},
        {
          value: "5000+",          label: "Zufriedene Kunden"},
        {
          value: "100%",          label: "Kreative Köpfe"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Termin Buchen",          href: "#contact"},
        {
          text: "Unsere Leistungen",          href: "#services"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/hair-salon-workplace_23-2148108753.jpg"
      imageAlt="Eine Stylistin, die das Haar eines Kunden schneidet, in einem modernen, hellen Salon."
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",          alt: "Zufriedene Kundin"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-man-with-bright-smile_23-2148563438.jpg",          alt: "Zufriedener Kunde"},
        {
          src: "http://img.b2bpic.net/free-photo/beauty-woman-talking-by-mobile-phone-home_329181-4277.jpg",          alt: "Junge Kundin"},
        {
          src: "http://img.b2bpic.net/free-photo/successful-senior-businessman-showing-thumbs-up_1262-2446.jpg",          alt: "Älterer Kunde"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing-while-having-coffee-working_23-2148661181.jpg",          alt: "Kundin mittleren Alters"},
      ]}
      avatarText="5000+ Kunden vertrauen uns"
      marqueeItems={[
        {
          type: "text-icon",          text: "Meisterhaftes Handwerk",          icon: Scissors,
        },
        {
          type: "text-icon",          text: "Herzlicher Service",          icon: Heart,
        },
        {
          type: "text-icon",          text: "Faire Preise",          icon: DollarSign,
        },
        {
          type: "text-icon",          text: "Individuelle Beratung",          icon: MessageCircle,
        },
        {
          type: "text-icon",          text: "Entspanntes Ambiente",          icon: Coffee,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Tradition trifft auf Trend in Böblingen"
      description="Seit Jahren sind wir Ihr vertrauenswürdiger Partner für Haarschnitte, Farben und Stylings, die begeistern. Unser engagiertes Team aus Böblingen versteht sein Handwerk und nimmt sich Zeit für Ihre individuellen Wünsche, um den perfekten Look für Sie zu kreieren."
      imageSrc="http://img.b2bpic.net/free-photo/brunette-girl-with-curlers-posing_23-2148108872.jpg"
      imageAlt="Ein freundlicher Empfangsbereich im Salon Klausnitzer."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "competence",          title: "Kompetentes Team",          descriptions: [
            "Unsere Stylisten sind Meister ihres Fachs und immer auf dem neuesten Stand der Trends."],
          imageSrc: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094577.jpg",          imageAlt: "Ein Stylist, der die Haare eines Kunden präzise schneidet."},
        {
          id: "fair-price",          title: "Faire Preise",          descriptions: [
            "Exzellente Qualität muss nicht teuer sein. Wir bieten ein unschlagbares Preis-Leistungs-Verhältnis."],
          imageSrc: "http://img.b2bpic.net/free-photo/business-financial-management-document-icon_53876-14639.jpg",          imageAlt: "Ein Preisschild, das Wert und Erschwinglichkeit symbolisiert."},
        {
          id: "atmosphere",          title: "Wohlfühlambiente",          descriptions: [
            "Genießen Sie Ihren Besuch in einer entspannten und freundlichen Atmosphäre."],
          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-black-costume-lady-with-halloween-makeup_1157-41132.jpg",          imageAlt: "Ein entspannender Bereich im Salon mit warmem Licht."},
        {
          id: "spontaneous",          title: "Spontane Termine möglich",          descriptions: [
            "Manchmal muss es schnell gehen. Wir sind flexibel für Ihre spontanen Wünsche."],
          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-scissors-looking-aside-worried-confused_141793-37651.jpg",          imageAlt: "Eine Hand, die einen Terminkalender mit flexiblen Optionen zeigt."},
      ]}
      title="Unsere Stärken, Ihr Vorteil"
      description="Wir bieten Ihnen eine Mischung aus Qualität, Komfort und persönlicher Beratung, die Sie lieben werden. Entdecken Sie, was uns besonders macht."
    />
  </div>

  <div id="services" data-section="services">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      products={[
        {
          id: "ladies-cut",          name: "Haarschnitt Damen",          price: "Ab 50€",          variant: "Inkl. Waschen & Styling",          imageSrc: "http://img.b2bpic.net/free-photo/redhead-optimistic-woman-sundress-ruffles-her-curly-hair-laughs-against-white-door_197531-26451.jpg",          imageAlt: "Eine Frau mit einer eleganten Frisur"},
        {
          id: "mens-cut",          name: "Haarschnitt Herren",          price: "Ab 30€",          variant: "Inkl. Waschen & Styling",          imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg",          imageAlt: "Ein Mann mit einem modernen Haarschnitt"},
        {
          id: "highlights",          name: "Strähnen",          price: "Ab 75€",          variant: "Partiell oder Vollkopf",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-pink-hair-standing-beside-exotic-palm-trees-studio_197531-21220.jpg",          imageAlt: "Haare mit feinen Highlights"},
        {
          id: "balayage",          name: "Balayage",          price: "Ab 120€",          variant: "Individuelle Farbverläufe",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-consulting-client_23-2147769874.jpg",          imageAlt: "Haare mit einem sanften Balayage-Farbverlauf"},
        {
          id: "perm",          name: "Dauerwelle",          price: "Ab 85€",          variant: "Volumen & Locken",          imageSrc: "http://img.b2bpic.net/free-photo/mom-helping-her-child-styling-afro-hair_23-2149625724.jpg",          imageAlt: "Eine Frau mit frisch gemachter Dauerwelle"},
        {
          id: "beard-trim",          name: "Bartpflege",          price: "Ab 15€",          variant: "Trimmen & Formen",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-20127.jpg",          imageAlt: "Ein Mann, dem der Bart getrimmt wird"},
      ]}
      title="Unsere Top-Dienstleistungen"
      description="Entdecken Sie unser vielfältiges Angebot, das jeden Wunsch erfüllt. Von klassischen Schnitten bis zu modernen Farbtechniken – wir lassen Ihr Haar glänzen."
    />
  </div>

  <div id="prices" data-section="prices">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basis-schnitt-herren",          badge: "Beliebt",          price: "Ab 30€",          subtitle: "Schnell & Präzise",          buttons: [
            {
              text: "Jetzt Buchen",              href: "#contact"},
          ],
          features: [
            "Haarschnitt trocken",            "Kurze Wartezeit",            "Ideal für Spontanbesuche"],
        },
        {
          id: "style-cut-damen",          badge: "Empfohlen",          price: "Ab 50€",          subtitle: "Individuell & Stilvoll",          buttons: [
            {
              text: "Jetzt Buchen",              href: "#contact"},
          ],
          features: [
            "Haarschnitt nass/trocken",            "Waschen & Föhnen",            "Typgerechte Beratung"],
        },
        {
          id: "farb-paket",          badge: "Premium",          price: "Ab 120€",          subtitle: "Strahlende Farben",          buttons: [
            {
              text: "Jetzt Buchen",              href: "#contact"},
          ],
          features: [
            "Färben oder Strähnen",            "Intensive Pflege",            "Styling nach Wunsch"],
        },
      ]}
      title="Transparente Preise für exquisite Ergebnisse"
      description="Qualität, die überzeugt und Preise, die begeistern. Wählen Sie das passende Angebot für Ihren Besuch bei Salon Klausnitzer."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      groups={[
        {
          id: "stylists",          groupTitle: "Unsere Friseurmeister",          members: [
            {
              id: "stefanie",              title: "Stefanie K.",              subtitle: "Friseurmeisterin & Farbexpertin",              detail: "Stefanie ist seit über 10 Jahren im Team und liebt es, individuelle Farbkonzepte zu entwickeln.",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg",              imageAlt: "Porträt von Stefanie, einer lächelnden Friseurmeisterin."},
            {
              id: "valerio",              title: "Valerio",              subtitle: "Stylist & Herrenspezialist",              detail: "Valerio ist bekannt für seine präzisen Herrenhaarschnitte und seine freundliche Art, die Stammkunden lieben.",              imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg",              imageAlt: "Porträt von Valerio, einem professionellen Herrenstylisten."},
            {
              id: "silvia",              title: "Silvia Bauder",              subtitle: "Stylistin & Beraterin",              detail: "Silvia berät Sie umfassend und findet stets den Schnitt, der Ihre Persönlichkeit unterstreicht.",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-photo-tape-red-background-high-quality-photo_114579-60868.jpg",              imageAlt: "Porträt von Silvia, einer aufmerksamen Stylistin."},
          ]
        },
      ]}
      title="Treffen Sie unser engagiertes Team"
      description="Unsere erfahrenen Stylisten sind mit Leidenschaft und Expertise für Sie da. Jedes Mitglied bringt einzigartiges Talent ein, um Ihren Look zu perfektionieren und Ihnen ein Lächeln ins Gesicht zu zaubern."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="„Sehr freundlich und sehr preiswert. Ich bin jedes Mal aufs Neue begeistert von der Qualität und dem Service. Ein Besuch ist jeden Cent wert.“"
      rating={5}
      author="Andreas Kaiser"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/smiling-young-african-man-standing-isolated_171337-9681.jpg",          alt: "Andreas Kaiser"},
        {
          src: "http://img.b2bpic.net/free-photo/top-view-arrangement-with-smiley-emoji-card_23-2148860296.jpg",          alt: "Daniel Lange"},
        {
          src: "http://img.b2bpic.net/free-photo/headshot-pretty-girl-stylish-clothing-smiling-joyfully-enjoying-happy-teenage-life_273609-9279.jpg",          alt: "Ingrid dl3sap"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-man-with-blue-shirt_23-2148548056.jpg",          alt: "Stefanie K."},
        {
          src: "asset://testimonial-avatar-5",          alt: "Glücklicher Kunde"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "appointment",          title: "Muss ich einen Termin vereinbaren?",          content: "Seit der Corona-Pandemie arbeiten wir mit Terminvergabe, um Wartezeiten zu minimieren und den Service zu optimieren. Eine kurzfristige Terminvereinbarung ist aber meist möglich."},
        {
          id: "parking",          title: "Gibt es Parkmöglichkeiten?",          content: "Parkplätze sind vor dem Haus verfügbar, können aber zu Stoßzeiten belegt sein. Wir empfehlen, etwas mehr Zeit einzuplanen oder öffentliche Verkehrsmittel zu nutzen."},
        {
          id: "products",          title: "Welche Produkte verwenden Sie?",          content: "Wir verwenden ausschließlich hochwertige Markenprodukte, die auf die Bedürfnisse Ihres Haares abgestimmt sind. Unser Team berät Sie gerne zu passenden Produkten für die Pflege zu Hause."},
      ]}
      title="Häufig gestellte Fragen"
      description="Hier finden Sie Antworten auf die wichtigsten Fragen rund um Ihren Besuch bei Salon Klausnitzer. Sollten Sie weitere Fragen haben, kontaktieren Sie uns gerne."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      tag="Besuchen Sie uns"
      title="Ihr nächster Haarschnitt ist nur einen Anruf entfernt"
      description="Wir freuen uns darauf, Sie in unserem Salon in Böblingen begrüßen zu dürfen. Kontaktieren Sie uns für eine Beratung oder buchen Sie direkt Ihren Termin!"
      inputPlaceholder="Ihre E-Mail-Adresse"
      buttonText="Termin Anfragen"
      termsText="Mit dem Absenden der Anfrage stimmen Sie unseren Datenschutzbestimmungen zu."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/blonde-woman-posing-with-black-background_1122-935.jpg"
      imageAlt="Modernes Friseursalon-Interieur am Abend"
      logoText="Salon Klausnitzer"
      columns={[
        {
          title: "Navigation",          items: [
            {
              label: "Home",              href: "#home"},
            {
              label: "Dienstleistungen",              href: "#services"},
            {
              label: "Preise",              href: "#prices"},
            {
              label: "Team",              href: "#team"},
          ],
        },
        {
          title: "Rechtliches",          items: [
            {
              label: "Impressum",              href: "#"},
            {
              label: "Datenschutz",              href: "#"},
            {
              label: "AGB",              href: "#"},
          ],
        },
        {
          title: "Kontakt",          items: [
            {
              label: "Böblingen, DE",              href: "https://www.google.com/maps/search/Salon+Klausnitzer+Böblingen"},
            {
              label: "+49 123 456789",              href: "tel:+49123456789"},
            {
              label: "info@salonklausnitzer.de",              href: "mailto:info@salonklausnitzer.de"},
          ],
        },
      ]}
      copyrightText="© 2024 Salon Klausnitzer. Alle Rechte vorbehalten."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
