"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, CookingPot, Droplet, Lightbulb, MapPin, Mountain, ShieldCheck, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Startseite",          id: "#home"},
        {
          name: "Dienstleistungen",          id: "#unterkuenfte"},
        {
          name: "Merkmale",          id: "#ausstattung"},
        {
          name: "Referenzen",          id: "#gaestestimmen"},
        {
          name: "Kontakt",          id: "#kontakt"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/flat-design-gingerbread-house-collection_23-2148356369.jpg"
      logoAlt="Ihre Marke Logo"
      brandName="Ihre Marke"
      button={{
        text: "Aktion Call",        href: "#kontakt"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplit
      background={{
        variant: "radial-gradient"}}
      title="Ihre Überschrift für das Hero-Banner"
      description="Fügen Sie hier eine kurze, ansprechende Beschreibung Ihres Angebots oder Ihrer Dienstleistung ein."
      buttons={[
        {
          text: "Call to Action 1",          href: "#unterkuenfte"},
        {
          text: "Call to Action 2",          href: "#kontakt"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/house-covered-snow_198169-38.jpg"
      imageAlt="Platzhalterbild für Hero-Sektion"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12690.jpg",          alt: "Avatar 1"},
        {
          src: "http://img.b2bpic.net/free-photo/smiley-woman-with-backpack_23-2148518190.jpg",          alt: "Avatar 2"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-male-traveler-holding-map-hand-taking-selfie_23-2148148649.jpg",          alt: "Avatar 3"},
        {
          src: "http://img.b2bpic.net/free-photo/overweight-woman-exercising-outdoors-by-lake_23-2149618245.jpg",          alt: "Avatar 4"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-regular-male-with-red-cap-holiday-santa-christmas_140725-124553.jpg",          alt: "Avatar 5"},
      ]}
      avatarText="Optional: Über X zufriedene Kunden"
      marqueeItems={[
        {
          type: "text",          text: "Merkmal 1"},
        {
          type: "text-icon",          text: "Merkmal 2",          icon: Star,
        },
        {
          type: "text",          text: "Merkmal 3"},
        {
          type: "text-icon",          text: "Merkmal 4",          icon: ShieldCheck,
        },
        {
          type: "text",          text: "Merkmal 5"},
      ]}
    />
  </div>

  <div id="ausstattung" data-section="ausstattung">
      <FeatureBorderGlow
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Lightbulb,
          title: "Feature 1 Titel",          description: "Kurze Beschreibung zu Feature 1. Beschreiben Sie einen Vorteil oder eine wichtige Eigenschaft."},
        {
          icon: Droplet,
          title: "Feature 2 Titel",          description: "Kurze Beschreibung zu Feature 2. Heben Sie ein weiteres Merkmal hervor."},
        {
          icon: MapPin,
          title: "Feature 3 Titel",          description: "Kurze Beschreibung zu Feature 3. Nennen Sie einen weiteren Mehrwert."},
        {
          icon: CookingPot,
          title: "Feature 4 Titel",          description: "Kurze Beschreibung zu Feature 4. Geben Sie weitere Details an."},
        {
          icon: Mountain,
          title: "Feature 5 Titel",          description: "Kurze Beschreibung zu Feature 5. Fassen Sie einen letzten Punkt zusammen."}
      ]}
      title="Hauptmerkmale oder Vorteile"
      description="Beschreiben Sie hier, was Ihr Produkt oder Ihre Dienstleistung besonders macht."
    />
  </div>

  <div id="unterkuenfte" data-section="unterkuenfte">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "prod-1",          brand: "Kategorie 1",          name: "Produkt/Dienstleistung 1",          price: "Ab XXX€",          rating: 5,
          reviewCount: "X Bewertungen",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-cheerful-girl-rests-morning-beach_176420-5826.jpg",          imageAlt: "Produktbild 1"},
        {
          id: "prod-2",          brand: "Kategorie 1",          name: "Produkt/Dienstleistung 2",          price: "Ab XXX€",          rating: 5,
          reviewCount: "X Bewertungen",          imageSrc: "http://img.b2bpic.net/free-photo/two-elegant-girls-resort_1157-24582.jpg",          imageAlt: "Produktbild 2"},
        {
          id: "prod-3",          brand: "Kategorie 2",          name: "Produkt/Dienstleistung 3",          price: "Ab XXX€",          rating: 4,
          reviewCount: "X Bewertungen",          imageSrc: "http://img.b2bpic.net/free-photo/chair-bed-around-swimming-pool-hotel_74190-6669.jpg",          imageAlt: "Produktbild 3"},
        {
          id: "prod-4",          brand: "Kategorie 3",          name: "Produkt/Dienstleistung 4",          price: "Ab XXX€",          rating: 5,
          reviewCount: "X Bewertungen",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-cement-seat-urban-park_23-2148328851.jpg",          imageAlt: "Produktbild 4"},
        {
          id: "prod-5",          brand: "Kategorie 4",          name: "Produkt/Dienstleistung 5",          price: "Ab XXX€",          rating: 5,
          reviewCount: "X Bewertungen",          imageSrc: "http://img.b2bpic.net/free-photo/indoor-design-luxury-resort_23-2150497270.jpg",          imageAlt: "Produktbild 5"},
        {
          id: "prod-6",          brand: "Kategorie 4",          name: "Produkt/Dienstleistung 6",          price: "Ab XXX€",          rating: 4,
          reviewCount: "X Bewertungen",          imageSrc: "http://img.b2bpic.net/free-photo/landscape-ski-resort-french-alps-tignes_268835-1083.jpg",          imageAlt: "Produktbild 6"},
        {
          id: "prod-7",          brand: "Kategorie 1",          name: "Produkt/Dienstleistung 7",          price: "Ab XXX€",          rating: 5,
          reviewCount: "X Bewertungen",          imageSrc: "http://img.b2bpic.net/free-photo/out-sea-aircraft-carrier-heading-sea_181624-26254.jpg",          imageAlt: "Produktbild 7"},
      ]}
      title="Titel für Produkt-/Dienstleistungsübersicht"
      description="Hier können Sie Ihre Produkte oder Dienstleistungen vorstellen."
    />
  </div>

  <div id="ueber-uns" data-section="ueber-uns">
      <AboutMetric
      useInvertedBackground={false}
      title="Titel für den Über-Uns-Bereich"
      metrics={[
        {
          icon: Award,
          label: "Erfahrung",          value: "XX+"},
        {
          icon: Star,
          label: "Zufriedenheit",          value: "XXXXX+"},
        {
          icon: MapPin,
          label: "Standorte",          value: "X"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="gaestestimmen" data-section="gaestestimmen">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Kundenname 1",          handle: "@handle1",          testimonial: "'Dies ist eine Beispielbewertung von Kunde 1. Die Dienstleistung war hervorragend und hat unsere Erwartungen übertroffen.'",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-elegant-man-smiling_23-2148332976.jpg",          imageAlt: "Porträt von Kunde 1"},
        {
          id: "2",          name: "Kundenname 2",          handle: "@handle2",          testimonial: "'Kunde 2 fand die Qualität und den Service ausgezeichnet. Würde es jederzeit weiterempfehlen!'",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-relaxing-beach_53876-23520.jpg",          imageAlt: "Porträt von Kunde 2"},
        {
          id: "3",          name: "Kundenname 3",          handle: "@handle3",          testimonial: "'Ein großartiges Erlebnis. Die Details waren beeindruckend und der Support war sehr hilfreich.'",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/carefree-smiling-love-rucksack-grey-hair_1134-715.jpg",          imageAlt: "Porträt von Kunde 3"},
        {
          id: "4",          name: "Kundenname 4",          handle: "@handle4",          testimonial: "'Wir sind sehr zufrieden mit dem Ergebnis. Es war genau das, was wir gesucht haben.'",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/life-home-with-young-adult-reading_23-2149129076.jpg",          imageAlt: "Porträt von Kunde 4"},
        {
          id: "5",          name: "Kundenname 5",          handle: "@handle5",          testimonial: "'Der Service war professionell und die Ergebnisse sprechen für sich. Absolut empfehlenswert.'",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-caucasian-woman-sil-canyon-spain_181624-32967.jpg",          imageAlt: "Porträt von Kunde 5"},
      ]}
      showRating={true}
      title="Das sagen unsere Kunden"
      description="Authentische Kundenstimmen, die Vertrauen schaffen."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "Wie funktioniert es?",          content: "Geben Sie hier die Antwort auf die erste häufig gestellte Frage ein. Erläutern Sie den Prozess kurz und prägnant."},
        {
          id: "faq2",          title: "Was kostet es?",          content: "Geben Sie hier die Antwort auf die zweite Frage ein. Beschreiben Sie die Kostenstruktur oder verweisen Sie auf eine Preisseite."},
        {
          id: "faq3",          title: "Benötige ich spezielle Vorkenntnisse?",          content: "Geben Sie hier die Antwort auf die dritte Frage ein. Erklären Sie, ob bestimmte Voraussetzungen erforderlich sind."},
        {
          id: "faq4",          title: "Bieten Sie Support an?",          content: "Geben Sie hier die Antwort auf die vierte Frage ein. Beschreiben Sie die verfügbaren Support-Optionen."},
        {
          id: "faq5",          title: "Kann ich meine Meinung ändern?",          content: "Geben Sie hier die Antwort auf die fünfte Frage ein. Erläutern Sie Stornierungs- oder Änderungsbedingungen."},
        {
          id: "faq6",          title: "Wo finde ich weitere Informationen?",          content: "Geben Sie hier die Antwort auf die sechste Frage ein. Verweisen Sie auf weitere Ressourcen oder Kontaktmöglichkeiten."}
      ]}
      title="Häufig gestellte Fragen"
      description="Antworten auf die wichtigsten Fragen."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Firma A",        "Unternehmen B",        "Partner C",        "Organisation D",        "Marke E",        "Kunde F",        "Netzwerk G"]}
      title="Vertrauen Sie auf Qualität"
      description="Unsere Leistungen sind bei führenden Partnern gelistet und vielfach ausgezeichnet."
    />
  </div>

  <div id="kontakt" data-section="kontakt">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-static"}}
      text="Bereit, den nächsten Schritt zu tun? Kontaktieren Sie uns für ein unverbindliches Angebot oder weitere Informationen."
      buttons={[
        {
          text: "Jetzt kontaktieren",          href: "mailto:info@ihremarke.de"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Dienstleistungen",          items: [
            {
              label: "Service A",              href: "#unterkuenfte"},
            {
              label: "Service B",              href: "#unterkuenfte"},
            {
              label: "Service C",              href: "#unterkuenfte"},
            {
              label: "Service D",              href: "#unterkuenfte"},
            {
              label: "Service E",              href: "#unterkuenfte"},
          ],
        },
        {
          title: "Über Uns",          items: [
            {
              label: "Kontakt",              href: "#kontakt"},
            {
              label: "FAQs",              href: "#faq"},
            {
              label: "Unser Team",              href: "#ueber-uns"},
          ],
        },
        {
          title: "Rechtliches",          items: [
            {
              label: "Impressum",              href: "#"},
            {
              label: "Datenschutz",              href: "#"},
            {
              label: "AGB",              href: "#"},
          ],
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/flat-design-gingerbread-house-collection_23-2148356369.jpg"
      logoAlt="Ihre Marke Logo"
      logoText="Ihre Marke"
      copyrightText="© 2024 Ihre Marke | Alle Rechte vorbehalten"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}