"use client";

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="noise"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Salon Klausnitzer"
          navItems={[
            { name: "Leistungen", id: "leistungen" },
            { name: "Über Uns", id: "ueber-uns" },
            { name: "Galerie", id: "galerie" },
            { name: "Kundenstimmen", id: "kundenstimmen" },
            { name: "Kontakt", id: "termin" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero" className="py-24 md:py-40">
        <HeroLogo
          logoText="Salon Klausnitzer"
          description="FRISEURSALON · BÖBLINGEN INNENSTADT\nGutes Handwerk. Faire Preise. Seit Jahrzehnten. Ihr Friseursalon für die ganze Familie – unkompliziert, kompetent und immer mit einem Lächeln.\nVon Stammkunden seit Jahrzehnten weiterempfohlen"
          buttons={[{ text: "Termin vereinbaren", href: "tel:0703125195" }]}
          imageSrc="http://img.b2bpic.net/free-photo/confident-stylist-preparing-young-girl-haircut_23-2147769749.jpg"
          imageAlt="Haarschnitt im Salon Klausnitzer"
          showDimOverlay={false}
        />
      </div>

      <div id="leistungen" data-section="leistungen" className="py-24 md:py-32">
        <FeatureCardTwentyNine
          title="Unsere Leistungen – Qualität, die überzeugt."
          description="Von klassischem Schnitt bis zur modernen Coloration: Wir bieten präzises Handwerk, individuelle Beratung und faire Preise für Damen, Herren und Kinder. Unser herzliches Team nimmt sich Zeit für Ihre Wünsche, um ein Ergebnis zu schaffen, das begeistert."
          features={[
            {
              title: "Damen- & Herrenschnitte",              description: "Klassische und moderne Haarschnitte, individuell auf Ihren Typ abgestimmt. Perfektes Styling für jeden Anlass.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817234.jpg",              titleImageSrc: "http://img.b2bpic.net/free-photo/pretty-barber-girl-cutting-hair_624325-3064.jpg",              buttonText: "Mehr erfahren",              buttonHref: "#preise"
            },
            {
              title: "Colorationen & Farbberatung",              description: "Von natürlichen Strähnen bis zu mutigen Farbveränderungen – wir finden Ihre Wunschfarbe mit professioneller Beratung.",              imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-hair-salon_23-2150668444.jpg",              titleImageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229742.jpg",              buttonText: "Mehr erfahren",              buttonHref: "#preise"
            },
            {
              title: "Dauerwelle & Locken",              description: "Volumen, Sprungkraft und dauerhafte Locken für einen ganz neuen Look. Sanft und typgerecht.",              imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-coloring-hair-client_23-2147769784.jpg",              titleImageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-beautiful-smiling-model-with-afro-curls-hairstyle-dressed-summer-hipster-white-dress_158538-739.jpg",              buttonText: "Mehr erfahren",              buttonHref: "#preise"
            },
            {
              title: "Pflege-Treatments & Styling",              description: "Intensive Haarpflege für Glanz und Gesundheit. Perfektes Föhnen und Styling für Ihren Auftritt.",              imageSrc: "http://img.b2bpic.net/free-photo/person-enjoying-scalp-massage-spa_23-2151454772.jpg",              titleImageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-hair-slugging-night-routine_23-2150396639.jpg",              buttonText: "Mehr erfahren",              buttonHref: "#preise"
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="preise" data-section="preise" className="py-24 md:py-32">
        <PricingCardFive
          title="Transparente Preise für top Qualität."
          description="Bei uns erhalten Sie meisterhaftes Handwerk zu Preisen, die begeistern. Ehrlichkeit und Wertschätzung stehen bei jedem Schnitt an erster Stelle.<!-- Preise vom Inhaber bestätigen lassen -->"
          plans={[
            {
              id: "damen-schnitt",              tag: "Damen",              price: "ab 45€",              period: "pro Schnitt",              description: "Haarschnitt, Waschen, Föhnen & Styling",              button: { text: "Termin vereinbaren", href: "tel:0703125195" },
              featuresTitle: "Inklusive:",              features: ["Individuelle Beratung", "Haarwäsche mit Pflege", "Professioneller Schnitt", "Styling nach Wunsch"]
            },
            {
              id: "herren-schnitt",              tag: "Herren",              price: "ab 30€",              period: "pro Schnitt",              description: "Haarschnitt, Waschen & Styling",              button: { text: "Termin vereinbaren", href: "tel:0703125195" },
              featuresTitle: "Inklusive:",              features: ["Kurze Beratung", "Haarwäsche", "Moderner Schnitt", "Frisches Styling"]
            },
            {
              id: "kinder-schnitt",              tag: "Kinder",              price: "ab 20€",              period: "pro Schnitt",              description: "Haarschnitt für unsere kleinen Kunden",              button: { text: "Termin vereinbaren", href: "tel:0703125195" },
              featuresTitle: "Inklusive:",              features: ["Geduldige Beratung", "Haarwäsche (auf Wunsch)", "Kindgerechter Schnitt", "Kleines Styling"]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="ueber-uns" data-section="ueber-uns" className="py-24 md:py-32">
        <TextSplitAbout
          title="Seit über zwei Jahrzehnten Ihr Salon in Böblingen."
          description={[
            "Wir sind mehr als nur ein Friseursalon: Seit über 20 Jahren dürfen wir Generationen von Kunden begrüßen, von den Großeltern bis zu den Kleinsten. Unser herzliches und kompetentes Team versteht nicht nur sein Handwerk, sondern nimmt sich auch Zeit für Ihre Wünsche und eine individuelle Beratung.",            "Treten Sie ein in eine Wohlfühlatmosphäre, in der Qualität und faire Preise Hand in Hand gehen. Bei uns kommen Sie auch spontan sehr schnell dran und können sich auf hohe Sauberkeit und ein entspanntes Erlebnis verlassen. Wir freuen uns darauf, Sie bald persönlich kennenzulernen und zu verwöhnen."
          ]}
          useInvertedBackground={true}
          showBorder={false}
          buttons={[]}
          buttonAnimation="opacity"
        />
      </div>

      <div id="galerie" data-section="galerie" className="py-24 md:py-32">
        <ProductCardTwo
          title="Inspirationen & unser Handwerk"
          description="Entdecken Sie eine Auswahl unserer Arbeiten und lassen Sie sich für Ihren nächsten Besuch inspirieren. Präzision und Ästhetik in jedem Detail."
          products={[
            {
              id: "galerie-1",              brand: "Styling",              name: "Elegante Wellen",              price: "",              rating: 5,
              reviewCount: "0",              imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-green-shirt-looking-camera-with-pensive-expression-thinking-holding-hand-his-chin-standing-brown-background_141793-133914.jpg",              imageAlt: "Elegante Wellenfrisur"
            },
            {
              id: "galerie-2",              brand: "Schnitt",              name: "Moderner Bob",              price: "",              rating: 5,
              reviewCount: "0",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-hipster-bad-girl-trendy-red-hoodie-earring-her-nose-positive-model-having-fun_158538-15419.jpg",              imageAlt: "Moderner Bob Haarschnitt"
            },
            {
              id: "galerie-3",              brand: "Farbe",              name: "Natürliche Highlights",              price: "",              rating: 5,
              reviewCount: "0",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexual-blond-female-with-curly-hair-grey-background_613910-15068.jpg",              imageAlt: "Haar mit natürlichen Highlights"
            },
            {
              id: "galerie-4",              brand: "Herren",              name: "Klassischer Fade",              price: "",              rating: 5,
              reviewCount: "0",              imageSrc: "http://img.b2bpic.net/free-photo/enthusiastic-white-girl-with-happy-smile-posing-outdoor-light-background-photo-glad-romantic-woman-with-long-pink-hair_197531-26165.jpg",              imageAlt: "Klassischer Fade Haarschnitt für Herren"
            },
            {
              id: "galerie-5",              brand: "Styling",              name: "Brautfrisur",              price: "",              rating: 5,
              reviewCount: "0",              imageSrc: "http://img.b2bpic.net/free-photo/spanish-woman-sreaching-touching-her-straight-dark-hair-ideal-skin-portrait_633478-2984.jpg",              imageAlt: "Elegante Brautfrisur"
            },
            {
              id: "galerie-6",              brand: "Kinder",              name: "Frecher Kurzhaarschnitt",              price: "",              rating: 5,
              reviewCount: "0",              imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-smokes-cigar_1304-5117.jpg",              imageAlt: "Kurzhaarschnitt für Kinder"
            }
          ]}
          carouselMode="buttons"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="kundenstimmen" data-section="kundenstimmen" className="py-24 md:py-32">
        <TestimonialCardFifteen
          testimonial="Super Team, bin schon seit Jahren Kunde dort und sehr zufrieden. Inzwischen gehe ich mit meinen Kindern dorthin. Weiter so!"
          rating={5}
          author="Valerio (Google-Rezension)"
          avatars={[]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="kontakt-info" data-section="kontakt-info" className="py-24 md:py-32">
        <FaqSplitMedia
          title="Öffnungszeiten & Anfahrt"
          description="Sie finden uns zentral in der Böblinger Innenstadt, nur wenige Schritte von der Poststraße entfernt. Einfach und bequem zu Fuß erreichbar. Wir freuen uns auf Ihren Besuch!"
          faqs={[
            { id: "oeffnungszeiten", title: "Unsere Öffnungszeiten", content: "Di–Fr 09:00–18:00\nSa 08:30–13:00\nMo geschlossen\n<!-- Öffnungszeiten vom Inhaber bestätigen lassen -->" },
            { id: "adresse", title: "So finden Sie uns", content: "Poststraße 26, 71032 Böblingen (Innenstadt, Region Stuttgart)" },
            { id: "telefon", title: "Telefonischer Kontakt", content: "Gerne können Sie uns unter 07031 25195 erreichen." }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/sunny-urban-landscape_23-2149504796.jpg"
          imageAlt="Lageplan des Salons in Böblingen"
          mediaAnimation="slide-up"
          mediaPosition="right"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="termin" data-section="termin" className="py-24 md:py-32">
        <ContactCenter
          tag="JETZT TERMIN SICHERN"
          title="Spontan vorbeikommen oder kurzfristig Termin sichern."
          description="Besuchen Sie uns direkt, rufen Sie uns an oder nutzen Sie das Kontaktformular für eine schnelle Terminanfrage. Wir sind flexibel und finden schnell einen passenden Zeitpunkt für Sie."
          background={{
            variant: "radial-gradient"
          }}
          buttonText="Jetzt anrufen"
          inputPlaceholder="Ihre Nachricht (optional)"
          termsText=""
          useInvertedBackground={true}
          tagAnimation="opacity"
        />
      </div>

      <div id="footer" data-section="footer" className="py-16 md:py-24">
        <FooterLogoEmphasis
          logoText="Salon Klausnitzer"
          columns={[
            { items: [{ label: "Leistungen", href: "#leistungen" }, { label: "Über Uns", href: "#ueber-uns" }, { label: "Galerie", href: "#galerie" }, { label: "Kundenstimmen", href: "#kundenstimmen" }] },
            { items: [{ label: "Poststraße 26", href: "https://maps.app.goo.gl/YourGoogleMapsLink" }, { label: "71032 Böblingen", href: "https://maps.app.goo.gl/YourGoogleMapsLink" }, { label: "07031 25195", href: "tel:0703125195" }] },
            { items: [{ label: "Impressum", href: "#" }, { label: "Datenschutz", href: "#" }, { label: "AGB", href: "#" }] }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
