"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { AlertCircle, Rocket, Target, Clipboard, BarChart3, Lightbulb, Eye, TrendingUp, ArrowRight, Star, CheckCircle, Clock, Shield, HelpCircle, Users, Heart, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="medium"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Business Pathfinder"
          navItems={[
            { name: "Problem", id: "problem" },
            { name: "How It Works", id: "how-it-works" },
            { name: "About", id: "about" },
            { name: "Start", id: "hero" }
          ]}
          bottomLeftText="For young entrepreneurs"
          bottomRightText="hello@businesspathfinder.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Finde ein Business, das wirklich zu dir passt."
          description="Die meisten starten ohne Plan. Wir analysieren deine Situation und zeigen dir, was realistisch funktioniert."
          tag="Für Schüler & Anfänger"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          buttons={[
            { text: "Analyse starten", href: "#questionnaire" },
            { text: "Mehr erfahren", href: "#how-it-works" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B7dc1juWnJA16ybcjnHihjR9Qm/uploaded-1773858948924-qesq0bfp.png"
          imageAlt="Business Analysis"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          background={{ variant: "plain" }}
        />
      </div>

      <div id="problem" data-section="problem">
        <TestimonialAboutCard
          tag="Das Problem"
          tagIcon={AlertCircle}
          tagAnimation="slide-up"
          title="Du willst starten. Aber wo?"
          description="Viele Schüler haben Ideen. Manche haben sogar Zeit und Budget. Aber dann kommt die Realität: Ist die Idee überhaupt sinnvoll? Passt sie zu mir? Wie fange ich konkret an?"
          subdescription="Ohne klare Analyse verschwendest du Zeit, Geld und Motivation. Genau hier setzen wir an."
          icon={Target}
          videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B7dc1juWnJA16ybcjnHihjR9Qm/uploaded-1773866447468-ilw7h6mu.mp4"
          imageAlt="Problem Recognition"
          mediaAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureHoverPattern
          title="So funktioniert Business Pathfinder"
          description="Keine Motivational-Sprüche. Nur Struktur, Klarheit und realistische Antworten."
          tag="3 einfache Schritte"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            { text: "Jetzt Fragebogen ausfüllen", href: "#questionnaire" }
          ]}
          buttonAnimation="slide-up"
          features={[
            {
              icon: Clipboard,
              title: "1. Fragebogen ausfüllen",              description: "Du beantwortest Fragen zu deinen Fähigkeiten, deiner Zeit, deinem Budget und deinen Interessen. 5–10 Minuten."
            },
            {
              icon: BarChart3,
              title: "2. Deine Situation analysieren",              description: "Wir schauen mir Daten genauer an. Keine Gutscheine, kein Verkauf – nur ehrliche Analyse."
            },
            {
              icon: Lightbulb,
              title: "3. Konkrete Business-Ideen + nächste Schritte",              description: "Du bekommst 2–3 realistische Business-Vorschläge, die zu DIR passen. Mit konkretem Action Plan."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
        />
      </div>

      <div id="value" data-section="value">
        <MetricCardThree
          title="Was du konkret bekommst"
          description="Keine leeren Versprechen. Das ist das Ergebnis."
          tag="Dein Mehrwert"
          tagIcon={Zap}
          tagAnimation="slide-up"
          metrics={[
            { id: "clarity", icon: Eye, title: "Klare Richtung", value: "Statt Chaos" },
            { id: "ideas", icon: Lightbulb, title: "Passende Business-Ideen", value: "Nicht generisch" },
            { id: "realistic", icon: TrendingUp, title: "Realistische Einschätzung", value: "Keine Lügen" },
            { id: "steps", icon: ArrowRight, title: "Konkrete nächste Schritte", value: "Sofort handeln" }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <TestimonialCardTwelve
          testimonials={[
            { id: "1", name: "Felix M.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-african-young-lady-walking-outdoors_171337-15121.jpg", imageAlt: "Felix" },
            { id: "2", name: "Sarah L.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg", imageAlt: "Sarah" },
            { id: "3", name: "Tim K.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg", imageAlt: "Tim" },
            { id: "4", name: "Maya S.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-partying-outdoors_23-2149009352.jpg", imageAlt: "Maya" }
          ]}
          cardTitle="Erste Ergebnisse."
          cardTag="Erste Kunden"
          cardTagIcon={Star}
          cardAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="cta-action" data-section="cta-action">
        <FeatureHoverPattern
          title="Starte nicht mit einer Idee. Starte mit einer Analyse."
          description="In 10 Minuten weißt du, welche Richtung wirklich zu dir passt."
          buttons={[
            { text: "Fragebogen ausfüllen", href: "#questionnaire" }
          ]}
          buttonAnimation="slide-up"
          features={[
            {
              icon: CheckCircle,
              title: "Kostenlos",              description: "Keine versteckten Gebühren. Kein Abo. Nur ehrliche Analyse."
            },
            {
              icon: Clock,
              title: "10 Minuten",              description: "So lange dauert der Fragebogen. Dann kommt die Analyse."
            },
            {
              icon: Shield,
              title: "Deine Daten",              description: "Wir speichern nur das, was du willst. Kein Datenschatten."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="email-signup" data-section="email-signup">
        <ContactSplitForm
          title="Noch unsicher?"
          description="Trag dich ein und erhalte Tipps, wie man als Schüler ein Business sinnvoll startet."
          inputs={[
            { name: "email", type: "email", placeholder: "deine@email.de", required: true },
            { name: "name", type: "text", placeholder: "Dein Name", required: true }
          ]}
          useInvertedBackground={true}
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          buttonText="E-Mail eintragen"
          imageSrc="http://img.b2bpic.net/free-vector/infographic-timeline-concept-with-road_23-2147857509.jpg"
          imageAlt="Process"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Wer wir sind"
          tagIcon={Users}
          tagAnimation="slide-up"
          title="Gegründet von Leuten, die verstehen, wie es ist."
          description="Wir sind nicht irgendwelche Experten mit 20 Jahren Erfahrung. Wir haben selbst angefangen. Mit Unsicherheit. Mit Fehler. Mit echten Fragen."
          subdescription="Darum geht es uns um Klarheit statt leere Motivation. Um realistische Einschätzungen statt Hype."
          icon={Heart}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B7dc1juWnJA16ybcjnHihjR9Qm/uploaded-1773866499079-rsl2gaa9.png"
          imageAlt="Our Team"
          mediaAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Häufige Fragen"
          description="Schnelle Antworten auf das, was du wissen musst."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            { id: "1", title: "Kostet das etwas?", content: "Nein. Die Analyse ist kostenlos. Nur wenn du danach weitere Unterstützung möchtest, können wir ein Paket schnüren. Aber das ist optional." },
            { id: "2", title: "Wie lange dauert das?", content: "Der Fragebogen dauert 5–10 Minuten. Die Analyse dauert 2–3 Tage. Dann bekommst du eine E-Mail mit deinen Business-Vorschlägen." },
            { id: "3", title: "Was, wenn meine Idee nicht passt?", content: "Das ist völlig okay. Dann zeigen wir dir, warum – und was stattdessen Sinn macht. Manchmal ist \"Nein\" die beste Antwort." },
            { id: "4", title: "Kann ich den Fragebogen später machen?", content: "Ja, trag dich einfach in die E-Mail-Liste ein. Wir schreiben dir regelmäßig Tipps, und du kannst jederzeit starten." },
            { id: "5", title: "Bin ich zu jung?", content: "Nein. Wir arbeiten mit Schülern ab 16 Jahren. Je früher du anfängst, desto besser." },
            { id: "6", title: "Was passiert mit meinen Daten?", content: "Wir speichern nur das, was du uns gibst. Keine Tracking-Pixelsl, keine Datenverkäufe. Punkt." }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/female-executive-reading-sticky-notes_1170-1710.jpg?_wi=3"
          imageAlt="Footer"
          columns={[
            {
              title: "Produkt",              items: [
                { label: "Fragebogen", href: "#questionnaire" },
                { label: "Wie es funktioniert", href: "#how-it-works" },
                { label: "Preise", href: "#" }
              ]
            },
            {
              title: "Unternehmen",              items: [
                { label: "Über uns", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Karriere", href: "#" }
              ]
            },
            {
              title: "Kontakt",              items: [
                { label: "E-Mail", href: "mailto:hello@businesspathfinder.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Discord", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Datenschutz", href: "#" },
                { label: "Impressum", href: "#" },
                { label: "AGB", href: "#" }
              ]
            }
          ]}
          logoText="Business Pathfinder"
          copyrightText="© 2025 Business Pathfinder. Alle Rechte vorbehalten."
        />
      </div>
    </ThemeProvider>
  );
}
