"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import { Sparkles } from "lucide-react";
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeMediumTitles"
        background="noise"
        cardStyle="solid"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Dienstleistungen",          id: "#services"},
        {
          name: "Polsterreinigung",          id: "#sofacleaning"},
        {
          name: "Mobiler Service",          id: "#mobileservice"},
        {
          name: "Galerie",          id: "#gallery"},
        {
          name: "Angebot",          id: "#offer"},
        {
          name: "Warum Uns",          id: "#whyus"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Kontakt",          id: "#contact"}
      ]}
      button={{
        text: "Jetzt Termin anfragen",        href: "#contact"}}
      brandName="PUREGLOSS Mobile Detailing"
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="PUREGLOSS Mobile Detailing"
      description="Mobiler Service – Wir kommen zu Ihnen!"
      buttons={[
        {
          text: "Jetzt Termin anfragen",          href: "#contact"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/luxury-car-interior-brown-black-colors_181624-31177.jpg",          imageAlt: "Professional detailer cleaning a luxury car interior"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193557.jpg",          imageAlt: "Professional detailer cleaning a luxury car exterior"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-metallic-wheel_23-2151113145.jpg",          imageAlt: "Close-up of luxury car wheel detailing"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cleaning-tools_23-2150552299.jpg",          imageAlt: "Luxury car interior vacuuming"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22303.jpg",          imageAlt: "Detailer polishing luxury car dashboard"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/man-holding-car-door-medium-shot_23-2149714260.jpg",          imageAlt: "Luxury car exterior waxing"}
      ]}
      autoplayDelay={4000}
      showDimOverlay={true}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Innenraumreinigung",          author: "Fahrzeugpflege",          description: "Tiefenreinigung und Pflege aller Oberflächen im Fahrzeuginneren, inklusive Armaturenbrett und Konsolen.",          tags: [
            "Fahrzeug",            "Interieur"],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193592.jpg",          imageAlt: "Luxury car interior cleaning"},
        {
          id: "f2",          title: "Handwäsche & Lackschutz",          author: "Fahrzeugpflege",          description: "Schonende Handwäsche, Felgenreinigung, Reifenpflege und Lackschutz mit Quick Detailer für strahlenden Glanz.",          tags: [
            "Fahrzeug",            "Exterieur"],
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2787.jpg",          imageAlt: "Professional car exterior hand wash"},
        {
          id: "f3",          title: "Leder & Polsterpflege",          author: "Fahrzeugpflege",          description: "Spezielle Reinigung und Pflege für Leder- und Stoffpolster, inklusive Geruchsneutralisierung.",          tags: [
            "Fahrzeug",            "Spezial"],
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-cancer-vacuuming-couch_23-2151056048.jpg",          imageAlt: "Car leather and upholstery cleaning"}
      ]}
      title="Unsere Dienstleistungen"
      description="Entdecken Sie unser umfassendes Angebot für die perfekte Pflege Ihres Fahrzeugs."
    />
  </div>

  <div id="sofacleaning" data-section="sofacleaning">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      imagePosition="right"
      title="Sofa & Polsterreinigung"
      description="Wir bringen Ihre Möbel wieder zum Strahlen. Unsere mobile Polsterreinigung sorgt für hygienische Sauberkeit und frischen Duft direkt bei Ihnen zu Hause."
      bulletPoints={[
        {
          title: "Sofas",          description: "Professionelle Tiefenreinigung für alle Arten von Sofas und Couchgarnituren."},
        {
          title: "Sesseln",          description: "Gründliche Reinigung und Auffrischung Ihrer Sessel und Lounge-Möbel."},
        {
          title: "Polstermöbel",          description: "Umfassende Pflege für alle Polstermöbel, inklusive Stühle und Hocker."},
        {
          title: "Fleckenentfernung",          description: "Effektive Entfernung selbst hartnäckiger Flecken und Verschmutzungen."},
        {
          title: "Tiefenreinigung",          description: "Eliminierung von Allergenen, Bakterien und Gerüchen aus der Tiefe des Gewebes."},
        {
          title: "Frischer Duft",          description: "Verleihen Sie Ihren Polstern einen angenehmen, langanhaltenden Frischeduft."}
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/man-doing-household-tasks_23-2151733227.jpg"
      imageAlt="Professional sofa and upholstery cleaning service"
      mediaAnimation="slide-up"
      tagAnimation="slide-up"
    />
  </div>

  <div id="mobileservice" data-section="mobileservice">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      imagePosition="left"
      title="Ihr Mobiler Service"
      description="Erleben Sie ultimativen Komfort: Wir kommen mit unserer professionellen Fahrzeugpflege direkt zu Ihnen. Ob zu Hause, im Büro oder an Ihrem Wunschort – sparen Sie wertvolle Zeit und Mühe."
      bulletPoints={[
        {
          title: "Komfortabel",          description: "Sie müssen Ihr Fahrzeug nicht bewegen. Wir erledigen alles vor Ort."},
        {
          title: "Flexibel",          description: "Termine, die sich Ihrem Zeitplan anpassen. Einfach und unkompliziert."},
        {
          title: "Zeitersparnis",          description: "Nutzen Sie Ihre Zeit für Wichtigeres, während wir uns um Ihr Fahrzeug kümmen."}
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-36576.jpg"
      imageAlt="PUREGLOSS mobile detailing van arriving at a client's location"
      mediaAnimation="slide-up"
      tagAnimation="slide-up"
      buttonAnimation="slide-up"
    />
  </div>

  <div id="whyus" data-section="whyus">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "100%",          title: "Mobiler Service",          items: [
            "Wir kommen direkt zu Ihnen",            "Bequem und flexibel"]},
        {
          id: "m2",          value: "Top",          title: "Professionelle Produkte",          items: [
            "Hochwertige Pflegemittel",            "Schonend und effektiv"]},
        {
          id: "m3",          value: "Fair",          title: "Faire Preise",          items: [
            "Transparente Kosten",            "Keine versteckten Gebühren"]},
        {
          id: "m4",          value: "Immer",          title: "Zuverlässigkeit",          items: [
            "Pünktlich und gewissenhaft",            "Termineinhaltung garantiert"]},
        {
          id: "m5",          value: "Ihre",          title: "Flexibilität",          items: [
            "Termine nach Wunsch",            "Anpassung an Ihren Alltag"]}
      ]}
      title="Warum PUREGLOSS wählen?"
      description="Entscheiden Sie sich für Qualität, Komfort und Service, der überzeugt."
    />
  </div>

  <div id="offer" data-section="offer">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "promo-june",          badge: "Exklusiv",          badgeIcon: Sparkles,
          price: "20% Rabatt",          subtitle: "auf alle Dienstleistungen",          buttons: [
            {
              text: "Jetzt buchen",              href: "#contact"}],
          features: [
            "Gültig vom 01.06 bis 07.06",            "Für Neu- und Bestandskunden",            "Unverbindliche Beratung inklusive"]
        }
      ]}
      title="Sonderangebot"
      description="Profitieren Sie jetzt von unserem exklusiven Angebot und lassen Sie Ihr Fahrzeug verwöhnen!"
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "before-after-1",          name: "Innenraum Vorher/Nachher",          price: "Luxus",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-interior-clean-up-service_23-2149212260.jpg",          imageAlt: "Spotless luxury car interior after detailing"},
        {
          id: "before-after-2",          name: "Polster Vorher/Nachher",          price: "Reinheit",          imageSrc: "http://img.b2bpic.net/free-photo/brown-sofa-blue-room_1194-6647.jpg",          imageAlt: "Clean fabric sofa after professional upholstery cleaning"},
        {
          id: "before-after-3",          name: "Lack Vorher/Nachher",          price: "Glanz",          imageSrc: "http://img.b2bpic.net/free-photo/many-blobs-black-liquid_23-2147934098.jpg",          imageAlt: "Mirror finish car paint after exterior detailing"},
        {
          id: "before-after-4",          name: "Geruchsentfernung Vorher/Nachher",          price: "Frische",          imageSrc: "http://img.b2bpic.net/free-photo/place-airbag-close-up-view-interior-brand-new-modern-luxury-automobile_146671-16599.jpg",          imageAlt: "Fresh and clean car interior after odor neutralization"},
        {
          id: "before-after-5",          name: "Matte Lackierung Vorher/Nachher",          price: "Perfektion",          imageSrc: "http://img.b2bpic.net/free-photo/black-car-garage_417767-26.jpg",          imageAlt: "Deep black matte car paint restored after detailing"},
        {
          id: "before-after-6",          name: "Lederpflege Vorher/Nachher",          price: "Eleganz",          imageSrc: "http://img.b2bpic.net/free-photo/woman-coffee-phone-car-business_1303-1959.jpg",          imageAlt: "Supple and restored car leather seats after conditioning"}
      ]}
      title="Unsere Transformationen"
      description="Sehen Sie selbst, welche beeindruckenden Ergebnisse wir mit unserer professionellen Pflege erzielen."
    />
  </div>

  <div id="faq" data-section="faq">
    <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      title="Häufig gestellte Fragen (FAQ)"
      description="Finden Sie hier Antworten auf die am häufigsten gestellten Fragen zu unseren Dienstleistungen, Preisen und unserem mobilen Service."
      faqsAnimation="slide-up"
      faqs={[
        {
          id: "faq1",          title: "Welche Dienstleistungen bietet PUREGLOSS an?",          content: "PUREGLOSS bietet eine umfassende mobile Fahrzeugaufbereitung, darunter Innenraumreinigung, Handwäsche & Lackschutz, Leder- & Polsterpflege sowie mobile Sofa- und Polsterreinigung für Zuhause."
        },
        {
          id: "faq2",          title: "Bieten Sie auch eine Polsterreinigung für Möbel an?",          content: "Ja, wir bieten auch einen mobilen Polsterreinigungsdienst für Sofas, Sessel und andere Polstermöbel direkt bei Ihnen zu Hause an."
        },
        {
          id: "faq3",          title: "Was beinhaltet die Innenraumreinigung?",          content: "Unsere Innenraumreinigung umfasst eine Tiefenreinigung aller Oberflächen, inklusive Armaturenbrett, Konsolen, Lüftungsschlitze, Scheiben, sowie die Pflege von Leder- und Stoffpolstern mit Geruchsneutralisierung."
        },
        {
          id: "faq4",          title: "Wie werden die Preise für Ihre Dienstleistungen berechnet?",          content: "Unsere Preise sind transparent und richten sich nach dem Umfang der gewünschten Dienstleistung sowie dem Zustand und der Größe des Fahrzeugs oder der Polstermöbel. Für ein individuelles Angebot kontaktieren Sie uns bitte direkt."
        },
        {
          id: "faq5",          title: "Gibt es versteckte Kosten?",          content: "Nein, bei PUREGLOSS gibt es keine versteckten Kosten. Alle Preise werden vorab klar kommuniziert und in einem detaillierten Angebot aufgeführt."
        },
        {
          id: "faq6",          title: "Wo bieten Sie Ihren mobilen Service an?",          content: "Wir bieten unseren mobilen Service in Euskirchen, Bonn, Köln und Umgebung an. Wir kommen direkt zu Ihnen nach Hause, ins Büro oder an einen anderen Wunschort."
        },
        {
          id: "faq7",          title: "Welche Voraussetzungen gibt es für den mobilen Service?",          content: "Wir benötigen lediglich einen zugänglichen Stellplatz für Ihr Fahrzeug und nach Möglichkeit einen Strom- und Wasseranschluss in der Nähe. Sollte dies nicht gegeben sein, finden wir gemeinsam eine Lösung."
        },
        {
          id: "faq8",          title: "Welche Zahlungsmethoden akzeptieren Sie?",          content: "Wir akzeptieren Barzahlung, EC-Karte und gängige Kreditkarten direkt vor Ort nach Abschluss der Dienstleistung."
        }
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="Kontaktieren Sie uns"
      title="Ihre Anfrage ist uns wichtig"
      description="Kontaktieren Sie uns noch heute für eine individuelle Beratung oder um einen Termin zu vereinbaren. Wir freuen uns darauf, von Ihnen zu hören!\n    Telefon: +49 123 456789\n    WhatsApp: +49 123 456789\n    Instagram: @puregloss_detailing\n    E-Mail: info@puregloss-detailing.de"
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Exi6xjmnxJkVY6uh7ko2ehc9fk/uploaded-1781129042699-2bsrr3y7.png"
      imageAlt="Luxurious car interior representing a contact point for a detailing service"
      mediaAnimation="slide-up"
      mediaPosition="right"
      inputPlaceholder="Ihre E-Mail Adresse"
      buttonText="Anfrage senden"
      termsText="Mit dem Absenden erklären Sie sich mit unseren Datenschutzbestimmungen einverstanden."
      tagAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "PUREGLOSS",          items: [
            {
              label: "Dienstleistungen",              href: "#services"},
            {
              label: "Galerie",              href: "#gallery"},
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Kontakt",              href: "#contact"}
          ]
        },
        {
          title: "Servicebereich",          items: [
            {
              label: "Euskirchen",              href: "#mobileservice"},
            {
              label: "Bonn",              href: "#mobileservice"},
            {
              label: "Köln & Umgebung",              href: "#mobileservice"}
          ]
        },
        {
          title: "Social Media",          items: [
            {
              label: "WhatsApp",              href: "https://wa.me/49123456789"},
            {
              label: "Instagram",              href: "https://instagram.com/puregloss_detailing"},
            {
              label: "E-Mail",              href: "mailto:info@puregloss-detailing.de"}
          ]
        },
        {
          title: "Rechtliches",          items: [
            {
              label: "Impressum",              href: "#"},
            {
              label: "Datenschutz",              href: "#"}
          ]
        }
      ]}
      bottomLeftText="© 2024 PUREGLOSS Mobile Detailing. Alle Rechte vorbehalten."
      bottomRightText=""
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
