"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLarge"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Start",          id: "hero"},
        {
          name: "Der Test",          id: "test"},
        {
          name: "FAQ",          id: "faq"},
      ]}
      brandName="Selbsttest"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "radial-gradient"}}
      logoText="Trauma-Selbsttest"
      description="Gewinne wertvolle Klarheit über dein emotionales Wohlbefinden. Unser strukturierter Test liefert dir direkt actionable Insights für ein tieferes Selbstverständnis und deinen nächsten Schritt."
      buttons={[
        {
          text: "Jetzt Test starten",          href: "#test"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/liquid-marble-border-blue-abstract-experimental-art_53876-108090.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="trust" data-section="trust">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Vertraulich",        "100% Online",        "Sofortige Auswertung",        "Datensicher",        "Anonym",        "Empathisch",        "Diskret"]}
      title="Dein Vertrauen steht an erster Stelle"
      description="Wir legen höchsten Wert auf Anonymität und Datenschutz, damit du dich auf den Prozess konzentrieren kannst."
    />
  </div>

  <div id="info" data-section="info">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Was erwartet dich?"
      description="Dieser Trauma-Selbsttest hilft dir dabei, mögliche emotionale Belastungsmuster besser einzuordnen. Bitte beachte: Dieser Test dient ausschließlich der Selbstreflexion und ersetzt keine professionelle psychologische oder medizinische Diagnose."
      metrics={[
        {
          value: "3",          title: "Minuten Dauer"},
        {
          value: "100%",          title: "Online verfügbar"},
        {
          value: "Diskret",          title: "Anonym"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/orange-paint-brush-strokes-forming-circular-shape-white-canvas_23-2148079143.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="test" data-section="test">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="one-large-right-three-stacked-left"
      useInvertedBackground={false}
      features={[
        {
          title: "Sicherheit & Vertrauen",          description: "Entdecke dein Bedürfnis nach Sicherheit und Ruhe in stürmischen Zeiten.",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-sitting-couch_23-2149720835.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/caring-african-american-woman-consoling-sad-woman-before-group-therapy-meeting_637285-10049.jpg",          buttonText: "Weiter"},
        {
          title: "Emotionaler Ballast",          description: "Erkenne, welche Situationen dich emotional stärker belasten als gewohnt.",          imageSrc: "http://img.b2bpic.net/free-vector/flat-time-logo-templates-collection_23-2148944207.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/3d-render-hourglass-mouse-symbol-design_460848-7398.jpg",          buttonText: "Weiter"},
        {
          title: "Gegenwart erleben",          description: "Verbinde dich wieder mit dem Hier und Jetzt und finde innere Balance.",          imageSrc: "http://img.b2bpic.net/free-vector/verified-badge-ribbon-set_78370-6066.jpg",          titleImageSrc: "http://img.b2bpic.net/free-vector/water-droplet-with-checkmarks-set_78370-7529.jpg",          buttonText: "Ergebnis anzeigen"},
      ]}
      title="Beginne deine Reflexion"
      description="Beantworte die folgenden 15 Fragen in Ruhe und ehrlich. Es gibt keine falschen Antworten."
    />
  </div>

  <div id="paywall" data-section="paywall">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "unlock",          title: "Persönliche Auswertung",          price: "3.00 CHF",          period: "einmalig",          features: [
            "Detaillierte Analyse",            "Handlungsorientierte Empfehlungen",            "Kein Abo"],
          button: {
            text: "Ergebnis für 3.00 CHF freischalten"},
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-psychedelic-papercut-background_23-2149303070.jpg",          imageAlt: "Abstract psychedelic papercut background"},
      ]}
      title="Erhalte deine professionelle Analyse"
      description="Investiere in deine mentale Klarheit. Dieser kleine Schritt ermöglicht dir wertvolle Selbstkenntnis und schafft die nötige Entlastung, um dich wieder auf das Wesentliche in deinem Leben zu fokussieren."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Ist der Test anonym?",          content: "Ja, der Test ist vollständig anonym und deine Daten werden nicht gespeichert."},
        {
          id: "2",          title: "Ist das ein medizinischer Test?",          content: "Nein, dieser Test dient nur der Selbstreflexion und ersetzt keine ärztliche Diagnose."},
        {
          id: "3",          title: "Warum kostet die Auswertung etwas?",          content: "Die kleine Gebühr von 3.00 CHF hilft uns, den Betrieb der Plattform und die Qualität der Inhalte zu finanzieren."},
        {
          id: "4",          title: "Wie werden die Ergebnisse generiert?",          content: "Die Analyse basiert auf wissenschaftlich fundierten Fragebögen, die psychologische Muster objektiv bewerten, um dir eine fundierte Einschätzung zu ermöglichen."},
      ]}
      title="Häufige Fragen"
      faqsAnimation="slide-up"
      description="Hier findest du Antworten auf die wichtigsten Fragen zu unserem Selbsttest-Prozess."
    />
  </div>

  <div id="results" data-section="results">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      text="Nach der Freischaltung erhältst du deine Auswertung mit sanften Empfehlungen zu Achtsamkeit und ersten Orientierungshilfen. Denke immer daran: Diese Auswertung ersetzt keine professionelle medizinische Beratung. Wir sind für dich da."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Trauma-Selbsttest"
      columns={[
        {
          title: "Rechtliches",          items: [
            {
              label: "Datenschutz",              href: "#"},
            {
              label: "Impressum",              href: "#"},
          ],
        },
        {
          title: "Hilfe",          items: [
            {
              label: "Kontakt",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2025 Trauma-Selbsttest. Hinweis: Wenn du dich akut belastet fühlst, wende dich bitte an eine Fachperson oder den Notdienst."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}