"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="blurBottom"
        cardStyle="inset"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "home",
        },
        {
          name: "Problem",
          id: "problem",
        },
        {
          name: "Features",
          id: "features",
        },
        {
          name: "WG Life",
          id: "wg-life",
        },
        {
          name: "FAQ",
          id: "faq",
        },
        {
          name: "Preise",
          id: "pricing",
        },
        {
          name: "Warteliste",
          id: "waitlist",
        },
      ]}
      button={{
        text: "Jetzt downloaden",
        href: "#",
      }}
      brandName="KaufKumpel"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardCarousel
      background={{
        variant: "radial-gradient",
      }}
      title="Gemeinsam smart einkaufen."
      description="KaufKumpel macht Einkaufen im Haushalt und mit Freunden einfach, effizient und günstig. Schluss mit WhatsApp-Chaos und verpassten Angeboten."
      tag="Neue Ära des Shoppings"
      buttons={[
        {
          text: "Jetzt auf die Warteliste",
          href: "#waitlist",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-with-paper-bag-full-healthy-food_23-2148173307.jpg",
          imageAlt: "KaufKumpel app shopping list",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg",
          imageAlt: "KaufKumpel app price comparison",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-buying-fruits-online-using-her-smartphone_23-2149240374.jpg",
          imageAlt: "KaufKumpel app shared shopping list",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-phone-card-mock-up_23-2148304897.jpg",
          imageAlt: "KaufKumpel app loyalty hub",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/person-scanning-qr-code_23-2149321701.jpg",
          imageAlt: "KaufKumpel app smart receipts",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-holding-blank-phone-variety-lunchboxes_23-2148520485.jpg",
          imageAlt: "KaufKumpel app social coordination",
        },
      ]}
    />
  </div>

  <div id="problem" data-section="problem">
      <TextAbout
      useInvertedBackground={true}
      tag="Dein Einkauf, neu gedacht"
      title="Kein Chaos mehr im Einkaufswagen: Die smarte Lösung für dich und dein Team."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Prospekte & Angebote",
          description: "Alle Supermärkte an einem Ort durchsuchbar – nie wieder die besten Deals verpassen.",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-composition_23-2149055983.jpg",
          imageAlt: "Smartphone displaying digital flyers and offers",
          titleImageSrc: "http://img.b2bpic.net/free-photo/sale-concept-with-shopping-carts_23-2148313071.jpg",
          buttonText: "Mehr erfahren",
        },
        {
          title: "Gruppen-Einkauf",
          description: "Geteilte Listen in Echtzeit und Fahrten-Ankündigung: Sag Adieu zum WhatsApp-Chaos.",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-taking-selfie-mall_23-2148385653.jpg",
          imageAlt: "People sharing shopping lists on smartphones",
          titleImageSrc: "http://img.b2bpic.net/free-photo/vibrant-shopping-spree-illustration_23-2152028653.jpg",
          buttonText: "Mehr erfahren",
        },
        {
          title: "KI-Assistent",
          description: "Automatischer Preisvergleich & günstigere Alternativ-Empfehlungen – dein smarter Sparhelfer.",
          imageSrc: "http://img.b2bpic.net/free-photo/advanced-technological-robot-interacting-with-money-finance_23-2151612641.jpg",
          imageAlt: "Smartphone with AI robot icon for price comparison",
          titleImageSrc: "http://img.b2bpic.net/free-photo/delivery-man-giving-groceries-order-customer_23-2149950076.jpg",
          buttonText: "Mehr erfahren",
        },
        {
          title: "Loyalty Hub",
          description: "Alle Kundenkarten (Payback etc.) digital in einer Wallet – dein Portemonnaie bleibt schlank.",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-holding-smartphones_23-2149303399.jpg",
          imageAlt: "Smartphone displaying digital loyalty cards",
          titleImageSrc: "http://img.b2bpic.net/free-vector/flat-illustration-dia-del-amor-y-la-amistad-celebration_23-2150618492.jpg",
          buttonText: "Mehr erfahren",
        },
        {
          title: "Smart Receipts",
          description: "Kassenbon-Scanner (OCR) mit automatischem Abhaken von Ausgaben – behalte den Überblick.",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-woman-using-smart-phone-while-learning-evening-home_637285-4409.jpg",
          imageAlt: "Smartphone scanning a paper receipt",
          titleImageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-creative-cardano-illustration_23-2149196757.jpg",
          buttonText: "Mehr erfahren",
        },
      ]}
      title="Deine Kumpels für den smarten Einkauf"
      description="KaufKumpel vereint alle Tools, die du für einen organisierten, gemeinschaftlichen und preisbewussten Einkauf brauchst."
      tag="Kernfunktionen"
    />
  </div>

  <div id="wg-life" data-section="wg-life">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah M.",
          handle: "@sarah_wg",
          testimonial: "Als WG war unser Einkauf immer chaotisch. KaufKumpel hat das komplett verändert! Geteilte Listen und die Angebotsübersicht sind Gold wert. #WGlife",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-brunette-woman-reading-mobile-phone-sitting-home-using-smartphone_1258-199777.jpg",
          imageAlt: "Sarah M., a happy KaufKumpel user",
        },
        {
          id: "2",
          name: "Max L.",
          handle: "@max_spart",
          testimonial: "Ich bin beeindruckt vom KI-Assistenten. Er findet wirklich die günstigsten Preise und empfiehlt Alternativen. Spare jetzt jede Woche Geld! Absolut empfehlenswert.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg",
          imageAlt: "Max L., a satisfied KaufKumpel user",
        },
        {
          id: "3",
          name: "Lena K.",
          handle: "@lena_organisiert",
          testimonial: "Nie wieder vergesse ich eine Kundenkarte! Der Loyalty Hub ist genial und der Kassenbon-Scanner macht die Ausgabenübersicht zum Kinderspiel. Top App!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/waist-up-portrait-shocked-frustrated-fashionable-young-woman-having-puzzled-surprised-expression-her-face-funny-girl-opening-mouth-shock-astonishment_273609-8084.jpg",
          imageAlt: "Lena K., an organized KaufKumpel user",
        },
        {
          id: "4",
          name: "Tom H.",
          handle: "@tom_technik",
          testimonial: "Die soziale Koordination ist super smooth. Endlich weiß jeder, wer was braucht und wer wann zum Supermarkt fährt. Intuitive Bedienung und tolles Design.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-159836.jpg",
          imageAlt: "Tom H., a tech-savvy KaufKumpel user",
        },
        {
          id: "5",
          name: "Julia S.",
          handle: "@julia_mama",
          testimonial: "Mit zwei kleinen Kindern ist Einkaufen schon anspruchsvoll. KaufKumpel hilft uns als Familie, den Überblick zu behalten und cleverer einzukaufen. Ein echter Kumpel!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-woman-casual-summer-clothes_158538-10246.jpg",
          imageAlt: "Julia S., a happy mother using KaufKumpel",
        },
        {
          id: "6",
          name: "David R.",
          handle: "@david_student",
          testimonial: "Als Student muss ich aufs Geld achten. KaufKumpel hat mir geholfen, meine Ausgaben besser zu planen und immer die besten Angebote zu finden. Unverzichtbar!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-glasses-looking-aside-happy-positive-touching-his-glasses_141793-54919.jpg",
          imageAlt: "David R., a student using KaufKumpel to save money",
        },
      ]}
      showRating={true}
      title="So organisieren WGs und Familien ihren Einkauf neu!"
      description="Höre, was unsere Nutzer über ihre Erfahrungen mit KaufKumpel sagen und wie sie ihren Alltag erleichtern."
      tag="Erfolgsgeschichten"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",
          title: "Wie funktioniert die Gruppenfunktion?",
          content: "Lade Freunde oder Familienmitglieder in deine Einkaufsgruppe ein. Ihr könnt dann gemeinsame Listen erstellen, Artikel hinzufügen, abhaken und sogar Fahrten zum Supermarkt ankündigen. Alles in Echtzeit!",
        },
        {
          id: "faq-2",
          title: "Welche Supermärkte sind integriert?",
          content: "Wir decken die gängigsten Supermarktketten in Deutschland ab, darunter Lidl, Aldi, Edeka, Rewe, Kaufland und viele mehr. Die Liste wird ständig erweitert, um dir die besten Angebote zu bieten.",
        },
        {
          id: "faq-3",
          title: "Ist KaufKumpel kostenlos?",
          content: "Ja, die Basisversion von KaufKumpel mit allen Kernfunktionen ist komplett kostenlos. Für erweiterte Funktionen wie personalisierte Spar-Analysen oder exklusive KI-Features bieten wir ein günstiges Premium-Abo an.",
        },
        {
          id: "faq-4",
          title: "Wie sicher sind meine Daten bei KaufKumpel?",
          content: "Datenschutz ist uns extrem wichtig. Deine Daten werden verschlüsselt und anonymisiert. Wir geben keine persönlichen Informationen an Dritte weiter. Alle Details findest du in unserer Datenschutzerklärung.",
        },
        {
          id: "faq-5",
          title: "Kann ich KaufKumpel auch alleine nutzen?",
          content: "Ja, absolut! Auch als Einzelperson profitierst du von unseren Preisvergleichen, digitalen Prospekten und dem Loyalty Hub. KaufKumpel ist flexibel an deine Bedürfnisse anpassbar.",
        },
      ]}
      sideTitle="Häufig gestellte Fragen"
      sideDescription="Deine Fragen, unsere Antworten. Finde schnell Hilfe und erfahre mehr über KaufKumpel."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "free",
          badge: "Gratis",
          price: "0€",
          subtitle: "Immer kostenlos",
          buttons: [
            {
              text: "Jetzt starten",
              href: "#",
            },
          ],
          features: [
            "Gemeinsame Einkaufslisten",
            "Prospekte & Angebote",
            "KI-Preisvergleich (Basis)",
            "Digitaler Loyalty Hub",
          ],
        },
        {
          id: "premium",
          badge: "Top Wahl",
          price: "3,99€",
          subtitle: "pro Monat",
          buttons: [
            {
              text: "Premium testen",
              href: "#",
            },
          ],
          features: [
            "Alle Funktionen des Gratis-Plans",
            "Erweiterter KI-Assistent",
            "Personalisierte Spar-Analysen",
            "Kassenbon-Tracking & Auswertung",
            "Priorisierter Support",
          ],
        },
      ]}
      title="Kostenlos oder Premium: Du entscheidest!"
      description="KaufKumpel gibt es in einer leistungsstarken Gratis-Version. Für Extra-Features gibt's unser Premium-Abo."
      tag="Preise"
    />
  </div>

  <div id="waitlist" data-section="waitlist">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Bleib informiert"
      title="Sei dabei! Jetzt auf die Warteliste setzen."
      description="Verpasse keine Updates und sei unter den Ersten, die KaufKumpel nutzen können, sobald wir starten."
      imageSrc="http://img.b2bpic.net/free-photo/christmas-tree-celebration-tinsel-concept_53876-160138.jpg"
      imageAlt="Smartphone displaying an email sign-up form for KaufKumpel"
      mediaAnimation="slide-up"
      mediaPosition="right"
      inputPlaceholder="Deine E-Mail-Adresse"
      buttonText="Auf die Warteliste"
      termsText="Mit dem Klick auf 'Auf die Warteliste' stimmst du unseren Nutzungsbedingungen zu."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "KaufKumpel",
          items: [
            {
              label: "Home",
              href: "#home",
            },
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Preise",
              href: "#pricing",
            },
            {
              label: "Warteliste",
              href: "#waitlist",
            },
          ],
        },
        {
          title: "Rechtliches",
          items: [
            {
              label: "Impressum",
              href: "#",
            },
            {
              label: "Datenschutz",
              href: "#",
            },
            {
              label: "AGB",
              href: "#",
            },
          ],
        },
        {
          title: "Social Media",
          items: [
            {
              label: "Instagram",
              href: "https://instagram.com",
            },
            {
              label: "Facebook",
              href: "https://facebook.com",
            },
            {
              label: "Twitter",
              href: "https://twitter.com",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 KaufKumpel. Alle Rechte vorbehalten."
      bottomRightText="Made with ❤️ in Germany"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
