"use client";

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="blurBottom"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="1929 Crash"
          navItems={[
            { name: "Home", id: "#hero" },
            { name: "Goldene Zwanziger", id: "#roaring-twenties" },
            { name: "Spekulation", id: "#speculation" },
            { name: "Wirtschaftliche Risse", id: "#economic-issues" },
            { name: "Der Crash", id: "#crash-chronicle" },
            { name: "Folgen", id: "#consequences" },
            { name: "Globaler Impact", id: "#global-impact" },
            { name: "Reformen", id: "#reforms" },
          ]}
          button={{ text: "Kontakt", href: "#footer" }}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Der Börsenkrach von 1929: Eine Welt im Wandel"
          description="Entdecken Sie die Ursachen, den dramatischen Verlauf und die weitreichenden globalen Folgen der Finanzkatastrophe, die das 20. Jahrhundert prägte."
          background={{
            variant: "animated-grid"}}
          buttons={[
            { text: "Mehr erfahren", href: "#roaring-twenties" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/caucasian-couple-is-checking-flight-time-schedule_53876-42578.jpg"
          imageAlt="Menschenmenge auf der Wall Street während des Börsenkrachs 1929"
        />
      </div>
      <div id="roaring-twenties" data-section="roaring-twenties">
        <MediaAbout
          title="Die 'Goldenen Zwanziger': Ein Zeitalter des Optimismus"
          description="Die USA erlebten in den 1920er Jahren ein beispielloses Wirtschaftswachstum. Autos und Telefone veränderten den Alltag, die Arbeitslosigkeit war niedrig, und die Börse wurde zum Symbol für schnellen Reichtum. Doch der scheinbare Wohlstand barg Risiken."
          imageSrc="http://img.b2bpic.net/free-photo/vintage-books-thrift-shop-arrangement_23-2150269046.jpg"
          imageAlt="Darstellung der Prosperität der 1920er Jahre mit Autos und glücklichen Menschen"
          useInvertedBackground={false}
        />
      </div>
      <div id="speculation" data-section="speculation">
        <FeatureCardNine
          features={[
            {
              title: "Blindes Vertrauen",              description: "Anleger kauften Aktien nicht aufgrund von Unternehmenswerten, sondern in der Hoffnung auf schnelle Gewinne, was die Kurse künstlich in die Höhe trieb.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-vector/forex-trading-stock-market-background_1017-31713.jpg?_wi=1",                imageAlt: "Steigender Börsenchart"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-vector/forex-trading-stock-market-background_1017-31713.jpg?_wi=2",                imageAlt: "Steigender Börsenchart"},
            },
            {
              title: "Kauf auf Pump",              description: "Aktien wurden massiv auf Kredit gekauft (Margin-Handel), wobei oft nur ein Bruchteil des Kaufpreises selbst finanziert wurde, was die Anfälligkeit des Marktes extrem erhöhte.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-vector/forex-trading-stock-market-background_1017-31713.jpg?_wi=3",                imageAlt: "Steigender Börsenchart"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-lumberjack-character_1048-18290.jpg?_wi=1",                imageAlt: "Fallender Börsenchart"},
            },
            {
              title: "Überbewerteter Markt",              description: "Die Kurse stiegen weit über den realen Wert der Unternehmen hinaus, geschaffen durch die spekulative Gier und das leicht verfügbare Kreditgeld, das den Markt flutete.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-lumberjack-character_1048-18290.jpg?_wi=2",                imageAlt: "Fallender Börsenchart"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-lumberjack-character_1048-18290.jpg?_wi=3",                imageAlt: "Fallender Börsenchart"},
            },
          ]}
          showStepNumbers={false}
          title="Die Schattenseiten des Booms: Spekulation und Kreditfieber"
          description="Aktien wurden oft ohne Blick auf den realen Wert gekauft, nur in Erwartung steigender Kurse. Der 'Margin-Handel', bei dem Anleger nur 10% des Kaufpreises selbst zahlten, blähte eine gefährliche Spekulationsblase auf."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="economic-issues" data-section="economic-issues">
        <MetricCardEleven
          metrics={[
            {
              id: "overproduction",              value: "Überproduktion",              title: "Industrie & Agrar",              description: "In der Landwirtschaft und Industrie wurde mehr produziert, als verkauft werden konnte.",              imageSrc: "http://img.b2bpic.net/free-photo/life-function-ancient-culture-traditional_1417-367.jpg",              imageAlt: "Historische Fabrik mit rauchenden Schornsteinen"},
            {
              id: "debt",              value: "Verschuldung",              title: "Bauern & Kreditnehmer",              description: "Viele Bauern waren hoch verschuldet, die Kaufkraft vieler Arbeitnehmer war zu gering.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-multi-generational-family-sharing-household-space-due-expensive-housing-prices_23-2151490327.jpg",              imageAlt: "Verzweifelter Bauer aus den 1930er Jahren"},
            {
              id: "low-demand",              value: "Sinkende Nachfrage",              title: "Verbraucherproblem",              description: "Trotz steigender Aktienkurse ging die Nachfrage nach produzierten Waren zurück.",              imageSrc: "http://img.b2bpic.net/free-photo/rusty-abandoned-house-background_23-2149454733.jpg",              imageAlt: "Leeres Schaufenster eines Geschäfts aus den 1930er Jahren"},
          ]}
          animationType="slide-up"
          title="Wirtschaftliche Risse unter der Oberfläche"
          description="Trotz des Börsenfiebers gab es alarmierende Warnsignale: Überproduktion in Industrie und Landwirtschaft, hohe Bauernschuld und unzureichende Kaufkraft der Bevölkerung. Diese strukturellen Probleme wurden vom Rausch der Spekulation überdeckt."
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="crash-chronicle" data-section="crash-chronicle">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Vertrauensverlust",              imageSrc: "http://img.b2bpic.net/free-photo/black-white-vintage-scene-with-people-migrating-rural-zones-old-times_23-2151295742.jpg",              imageAlt: "Verlorenes Vertrauen der Anleger"},
            {
              id: "2",              name: "Black Thursday",              imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-newspaper-pieces-arrangement_23-2149318831.jpg",              imageAlt: "Die ersten massiven Kursstürze am 24. Oktober 1929"},
            {
              id: "3",              name: "Vergebliche Stützung",              imageSrc: "http://img.b2bpic.net/free-photo/sharing-ideas-with-colleagues_1098-16389.jpg",              imageAlt: "Banken und Großinvestoren versuchen, den Markt zu stabilisieren"},
            {
              id: "4",              name: "Black Monday",              imageSrc: "http://img.b2bpic.net/free-photo/millennial-young-chinese-businesswoman-working-late-night-stress-out-with-project-research-problem-laptop-meeting-room-small-modern-office-asia-people-occupational-burnout-syndrome-concept_7861-2385.jpg",              imageAlt: "Weitere massive Kursverluste am 28. Oktober 1929"},
            {
              id: "5",              name: "Black Tuesday",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-desk-globe-with-blurred-background_181624-4413.jpg",              imageAlt: "Der unaufhaltsame Zusammenbruch am 29. Oktober 1929"},
            {
              id: "6",              name: "Tiefpunkt 1932",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-covid-19-financial-crisis_23-2148746522.jpg",              imageAlt: "Der Dow-Jones-Index verliert 90% seines Wertes bis Juli 1932"},
          ]}
          cardTitle="Der Crash entfaltet sich: Eine Chronik des Absturzes"
          cardTag="Historische Momente"
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>
      <div id="consequences" data-section="consequences">
        <FaqSplitMedia
          faqs={[
            {
              id: "faq-1",              title: "Was passierte mit den Banken?",              content: "Zahlreiche Banken, die selbst spekuliert oder Kredite für Aktienkäufe vergeben hatten, gerieten in Schwierigkeiten und mussten schließen. Da es damals noch keine Einlagensicherung gab, verloren Millionen Menschen ihre Ersparnisse."},
            {
              id: "faq-2",              title: "Wie kam es zur Massenarbeitslosigkeit?",              content: "Ohne ein funktionierendes Bankensystem konnten Unternehmen kaum noch Kredite aufnehmen. Viele Firmen reduzierten ihre Produktion, entließen Mitarbeiter oder gingen bankrott, was die Arbeitslosigkeit auf über 25% ansteigen ließ."},
            {
              id: "faq-3",              title: "Welche Rolle spielte der Konsum?",              content: "Der Zusammenbruch des Bankensystems und die hohe Arbeitslosigkeit ließen die Kaufkraft der Bevölkerung massiv sinken. Dies führte zu einem Rückgang der Nachfrage nach Waren und Dienstleistungen, was die Wirtschaftskrise weiter verschärfte und eine Deflation auslöste."},
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/black-white-vintage-scene-with-people-migrating-rural-zones-old-times_23-2151295747.jpg"
          imageAlt="Menschen stehen Schlange vor einer Bank während der Weltwirtschaftskrise"
          mediaAnimation="slide-up"
          mediaPosition="left"
          title="Kaskade des Elends: Bankenkrise und Arbeitslosigkeit"
          description="Die unmittelbaren Folgen des Crashs waren verheerend: Millionen von Anlegern verloren ihr Vermögen, Banken kollabierten und die Einlagen der Sparer waren ungeschützt. Dies führte zu einer fatalen Kaskade von Unternehmenspleiten und Massenarbeitslosigkeit."
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="global-impact" data-section="global-impact">
        <SocialProofOne
          names={[
            "USA",            "Deutschland",            "Großbritannien",            "Frankreich",            "Kanada",            "Australien",            "Japan"]}
          title="Ein globaler Dominoeffekt: Die Weltwirtschaftskrise"
          description="Der Crash blieb nicht auf die USA beschränkt. Amerikanische Banken zogen ihre Kredite aus Europa zurück, und protektionistische Maßnahmen wie der Smoot-Hawley Tariff Act lähmten den Welthandel. Besonders Deutschland litt unter der Krise."
          tag="Betroffene Nationen"
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
        />
      </div>
      <div id="reforms" data-section="reforms">
        <BlogCardOne
          animationType="slide-up"
          title="Aus der Krise lernen: Reformen und Lehren für die Zukunft"
          description="Als direkte Reaktion auf die Krise wurden in den USA bedeutende Reformen eingeleitet, um Spekulation und Marktmanipulation einzudämmen. Der Glass-Steagall Act und die Börsenaufsicht SEC waren Meilensteine, die das Finanzsystem nachhaltig veränderten."
          textboxLayout="default"
          useInvertedBackground={false}
          blogs={[
            {
              id: "blog-1",              category: "Finanzrecht",              title: "Der Glass-Steagall Act",              excerpt: "Die Trennung von Geschäfts- und Investmentbanken sollte Risiken minimieren und das Finanzsystem stabilisieren.",              imageSrc: "http://img.b2bpic.net/free-photo/old-white-books-with-money-coins-wooden-background_169016-2255.jpg",              imageAlt: "Historisches Dokument des Glass-Steagall Act",              authorName: "Historiker",              authorAvatar: "http://img.b2bpic.net/free-photo/view-ancient-greek-goddess-bust_23-2151615550.jpg",              date: "1933"},
            {
              id: "blog-2",              category: "Marktaufsicht",              title: "Gründung der SEC",              excerpt: "Die Börsenaufsichtsbehörde SEC führte neue Regeln für den Wertpapierhandel ein, um Spekulation und Marktmanipulation einzuschränken.",              imageSrc: "http://img.b2bpic.net/free-photo/skyscraper-blue-sky-background_23-2148184320.jpg",              imageAlt: "Historisches Gebäude der Securities and Exchange Commission (SEC)",              authorName: "Ökonom",              authorAvatar: "http://img.b2bpic.net/free-photo/happy-young-woman-talking-phone-emotion-concept-closeup_169016-66074.jpg",              date: "1934"},
            {
              id: "blog-3",              category: "Historische Analyse",              title: "Die wahren Ursachen der Krise",              excerpt: "Historiker und Ökonomen sind sich einig, dass nicht nur der Crash, sondern tiefere Probleme wie Spekulation, Überproduktion und Ungleichheit die Weltwirtschaftskrise auslösten.",              imageSrc: "http://img.b2bpic.net/free-photo/reading-glasses-personal-planning-finances_23-2148305939.jpg",              imageAlt: "Infografik über die Ursachen der Weltwirtschaftskrise",              authorName: "Analyst",              authorAvatar: "http://img.b2bpic.net/free-photo/greyscale-shot-fashionable-blonde-female-posing-surrounded-by-greenery_181624-41779.jpg",              date: "Heute"},
          ]}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="1929 Crash"
          columns={[
            {
              items: [
                { label: "Goldene Zwanziger", href: "#roaring-twenties" },
                { label: "Spekulation", href: "#speculation" },
                { label: "Der Crash", href: "#crash-chronicle" },
              ],
            },
            {
              items: [
                { label: "Folgen", href: "#consequences" },
                { label: "Globaler Impact", href: "#global-impact" },
              ],
            },
            {
              items: [
                { label: "Reformen", href: "#reforms" },
                { label: "Kontakt", href: "#" },
                { label: "Datenschutz", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
