---
import BaseLayout from '@/layouts/BaseLayout.astro';
import TechStrip from '@/components/marketing/TechStrip.astro';
import SectionHeading from '@/components/marketing/SectionHeading.astro';
import NumberedItem from '@/components/marketing/NumberedItem.astro';
import ModuleGrid from '@/components/marketing/ModuleGrid.astro';
import SovereigntyBlock from '@/components/marketing/SovereigntyBlock.astro';
import RoadmapTimeline from '@/components/marketing/RoadmapTimeline.astro';
import ObjectionAnswer from '@/components/marketing/ObjectionAnswer.astro';
import CTABlock from '@/components/marketing/CTABlock.astro';
import { modules } from '@/content/module';

const stackItems = ['PostgreSQL', 'PostgREST', 'Hetzner DE', 'DSGVO', 'ZUGFeRD 2.0', 'DATEV'];

const moduleCount = modules.length;

const sovereigntyItems = [
  { label: '01 · HOSTING', body: 'Hetzner-Rechenzentren in Falkenstein und Nürnberg. Deutsches Recht, DSGVO, kein US-Anbieter im Datenfluss.' },
  { label: '02 · STACK', body: 'PostgreSQL, PostgREST, Docker. Ausschließlich Open-Source-Komponenten unter freien Lizenzen.' },
  { label: '03 · EXPORT', body: 'Volle Datenexporte in offenen Formaten — jederzeit, ohne Aufpreis, ohne Zustimmung von uns.' },
  { label: '04 · EGRESS', body: 'Optionaler Compliance-Layer mit Egress-Audit und -Proxy. Sie sehen, was Ihr Mandant sendet.' },
];

const roadmapPhases = [
  {
    label: 'Heute',
    description: 'Was heute produktiv genutzt wird.',
    current: true,
    items: [
      { name: 'CRM', status: 'available' as const },
      { name: 'Lager', status: 'available' as const },
      { name: 'Bestellungen', status: 'available' as const },
      { name: 'Belege', status: 'available' as const },
      { name: 'Zahlungen', status: 'available' as const },
      { name: 'BuHa-Export (DATEV)', status: 'available' as const },
    ],
  },
  {
    label: 'Q3–Q4 2026',
    description: 'Im aktiven Bau, kommt in den nächsten Monaten.',
    items: [
      { name: 'Team-E-Mail', status: 'developing' as const },
      { name: 'Artikel', status: 'developing' as const },
      { name: 'Verkaufskanäle', status: 'developing' as const },
      { name: 'Versand', status: 'developing' as const },
      { name: 'Rechnungen (ZUGFeRD)', status: 'developing' as const },
      { name: 'Aufgaben', status: 'developing' as const },
    ],
  },
  {
    label: '2027',
    description: 'Feste Roadmap, Reihenfolge nach Tester-Feedback.',
    items: [
      { name: 'Helpdesk', status: 'planned' as const },
      { name: 'Telefonie', status: 'planned' as const },
      { name: 'Einkauf', status: 'planned' as const },
      { name: 'Projekte', status: 'planned' as const },
      { name: 'Zeiterfassung', status: 'planned' as const },
      { name: 'Personal', status: 'planned' as const },
    ],
  },
  {
    label: 'Vision',
    description: 'Richtung, kein Versprechen.',
    items: [
      { name: 'WhatsApp Business', status: 'vision' as const },
      { name: 'KI-Assistent', status: 'vision' as const },
    ],
  },
];

const objections = [
  {
    q: 'Wir sind nur zwei. Lohnt sich das?',
    a: 'Genau für Sie gebaut. Drei Module reichen zum Start — und wachsen mit, wenn Sie wachsen. Keine 27-Module-Suite, in die Sie sich erst einarbeiten müssen.',
  },
  {
    q: 'Was, wenn wir wachsen?',
    a: 'SlimCore skaliert von einer Person bis ungefähr fünfzig — dieselbe Software, mehr aktivierte Module. Kein Wechsel, keine Migration, keine zweite Schulung.',
  },
  {
    q: 'Wir nutzen schon HubSpot.',
    a: 'Behalten Sie es. SlimCore schließt die Lücke zwischen Pipeline und Belegen — also genau die Stellen, an denen HubSpot endet und Ihr Buchhalter anfängt.',
  },
  {
    q: 'Odoo war zu komplex.',
    a: 'SlimCore liefert ungefähr 80 % von Odoo, ohne den Implementierungs-Overhead. Was Sie nicht brauchen, sehen Sie nicht.',
  },
  {
    q: 'Was, wenn ihr verschwindet?',
    a: 'Voller Export in offenem Schema. Jeder PostgreSQL-Hoster führt Ihren Mandanten weiter. Kein Lock-in, auch nicht durch uns.',
  },
];

const sectionPad = 'py-20 md:py-28 xl:py-32';
const container = 'mx-auto max-w-[1100px] px-6 md:px-10 xl:px-12';
---

<BaseLayout
  title="Schlank starten. Grenzenlos wachsen."
  description="Schlanke Geschäftssoftware für Solo-Selbstständige und kleine Teams. CRM, Belege, Aufgaben — modular, in Deutschland gehostet, Open Source, kein Vendor-Lock-in."
>
  {/* — 1. Hero — */}
  <section class="hero relative bg-[#0E0F14] pt-[112px] pb-12 md:pt-[140px] md:pb-12">
    <div class={container}>
      <p class="font-mono text-[11px] font-medium uppercase tracking-[0.10em] text-[#FF6B2C]">
        <span aria-hidden="true">▸</span> Geschäftssoftware für Solo-Selbstständige und kleine Teams
      </p>

      <h1 class="hero-headline mt-6 max-w-[18ch] font-sans font-medium text-[#F5F5F0]">
        Schlank starten.<br /><span class="hero-highlight">Grenzenlos</span> wachsen.
      </h1>

      <p class="mt-6 max-w-[540px] text-[17px] leading-[1.6] text-[rgba(245,245,240,0.75)]">
        Die schlanke Geschäftssoftware für Solo-Selbstständige und kleine Teams. Sie aktivieren am Anfang nur, was Sie heute brauchen — meistens CRM, Belege und Aufgaben. Wenn aus Ihnen drei werden, dann fünfzehn, schalten Sie weitere Module zu, ohne zu wechseln.
      </p>

      <div class="mt-8 flex flex-wrap gap-3">
        <a
          href="/tester"
          class="inline-flex items-center gap-1 rounded-md bg-[#FF6B2C] px-5 py-[11px] text-[13px] font-medium text-[#2A0F02] transition-colors hover:bg-[var(--color-accent-hover)]"
        >
          Tester werden <span aria-hidden="true">→</span>
        </a>
        <a
          href="/module"
          class="inline-flex items-center gap-1 rounded-md border-[0.5px] border-[rgba(245,245,240,0.5)] bg-transparent px-5 py-[11px] text-[13px] font-medium text-[#F5F5F0] transition-colors hover:bg-[rgba(245,245,240,0.06)]"
        >
          Module ansehen <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  {/* — 2. Tech-Strip — */}
  <TechStrip items={stackItems} variant="dark" />

  {/* Sentinel: Markiert das Ende der dunklen Zone für die NavBar */}
  <div data-hero-end aria-hidden="true"></div>

  {/* — 3. Modul-Landschaft — */}
  <section class={sectionPad}>
    <div class={container}>
      <SectionHeading
        eyebrow={`VIER SÄULEN · ${moduleCount} MODULE`}
        subtitle="Jedes Modul ist einzeln aktivierbar. Heute starten Sie mit CRM, Belegen und Aufgaben — morgen schalten Sie Versand und Team-E-Mail dazu, ohne Migration, ohne Wechsel."
      >
        Aktivieren Sie nur, was Sie heute brauchen.
      </SectionHeading>

      <div class="mt-12">
        <ModuleGrid />
      </div>

      <div class="mt-10">
        <a
          href="/module"
          class="inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-primary)] underline underline-offset-4 transition-colors hover:text-[var(--color-accent)]"
        >
          Alle Module &amp; Status ansehen <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  {/* — 4. Was uns trennt — */}
  <section class={`${sectionPad} bg-[var(--color-bg-surface)]`}>
    <div class={container}>
      <SectionHeading eyebrow="WAS UNS TRENNT">
        Best-Practices der großen Tools. Bedienbar wie ein modernes SaaS.
      </SectionHeading>

      <div class="mt-12 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-8">
        <NumberedItem number="01" title="Schlank von Tag 1">
          Sie aktivieren das, was Sie heute brauchen — meistens CRM, Belege und Aufgaben. Kein Onboarding-Marathon, keine 27-Module-Suite, die Sie nie ausschöpfen.
        </NumberedItem>
        <NumberedItem number="02" title="Wächst mit">
          Wenn aus Ihnen drei werden, dann fünfzehn, bleiben Sie in derselben Software. Team-Postfach, Lager, Versand, Workflow schalten Sie zu, wenn Sie sie wirklich brauchen — ohne Migration.
        </NumberedItem>
        <NumberedItem number="03" title="Souverän">
          In Deutschland gehostet, Open-Source-Stack, Datenexport jederzeit. Keine US-Cloud, kein Vendor-Lock-in, keine Lizenzbedingungen, die nächstes Jahr neu geschrieben werden.
        </NumberedItem>
      </div>
    </div>
  </section>

  {/* — 5. Souveränität — */}
  <section class={sectionPad}>
    <div class={container}>
      <p class="font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
        Das große Versprechen
      </p>
      <div class="mt-8">
        <SovereigntyBlock
          headlineLines={['Ihre Daten.', 'Ihr Land.', 'Ihre Kontrolle.']}
          lead="Souveränität ist bei SlimCore kein Marketing-Begriff, sondern eine Architektur-Entscheidung. Vier konkrete Punkte zeigen, was das im Alltag bedeutet."
          items={sovereigntyItems}
        />
      </div>
      <div class="mt-12">
        <a
          href="/souveraenitaet"
          class="inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-primary)] underline underline-offset-4 transition-colors hover:text-[var(--color-accent)]"
        >
          Mehr zur Souveränität <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  {/* — 6. Roadmap-Snapshot — */}
  <section class={`${sectionPad} bg-[var(--color-bg-surface)]`}>
    <div class={container}>
      <SectionHeading eyebrow="ROADMAP">
        Heute. Bald. Vision.
      </SectionHeading>

      <div class="mt-12">
        <RoadmapTimeline phases={roadmapPhases} />
      </div>

      <div class="mt-12">
        <a
          href="/roadmap"
          class="inline-flex items-center gap-1 text-sm font-medium text-[var(--color-text-primary)] underline underline-offset-4 transition-colors hover:text-[var(--color-accent)]"
        >
          Detail-Roadmap <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  {/* — 7. Schnell-Argumentarium — */}
  <section class={sectionPad}>
    <div class={container}>
      <SectionHeading eyebrow="FÜNF EINWÄNDE, FÜNF SÄTZE">
        Antworten, die Sie sonst erst im dritten Call bekommen.
      </SectionHeading>

      <div class="mt-12 grid grid-cols-1 gap-x-10 gap-y-8 md:grid-cols-2">
        {objections.map((o) => (
          <ObjectionAnswer question={o.q}>{o.a}</ObjectionAnswer>
        ))}
      </div>
    </div>
  </section>

  {/* — 8. Tester-Programm-Teaser — */}
  <section class={`${sectionPad} bg-[var(--color-bg-surface)]`}>
    <div class={container}>
      <CTABlock
        eyebrow="TESTER-PROGRAMM · PHASE 1"
        headline="Sie kennen die Lücken besser als jeder Berater."
        body="Helfen Sie uns, die Geschäftssoftware zu bauen, die Sie hoffentlich die nächsten zehn Jahre nutzen wollen. Im Gegenzug: früher Einfluss, vergünstigte oder kostenfreie Nutzung — und ein direkter Draht ins Team."
        ctas={[
          { label: 'Tester werden', href: '/tester', variant: 'primary' },
          { label: 'hallo@slimcore.io', href: 'mailto:hallo@slimcore.io', variant: 'ghost' },
        ]}
      />
    </div>
  </section>

  {/* — 9. Final-CTA — */}
  <section class="bg-[#0E0F14] py-20 md:py-28 xl:py-32">
    <div class={container}>
      <CTABlock
        inverse
        eyebrow="30 MINUTEN · UNVERBINDLICH"
        headline="Sie schildern, wo Sie stehen — wir sagen ehrlich, ob SlimCore zu Ihrer Situation passt."
        ctas={[
          { label: 'Tester werden', href: '/tester', variant: 'primary' },
          { label: 'Termin vereinbaren', href: 'https://calendly.com/digiformer/quick-call', variant: 'secondary' },
        ]}
      />
    </div>
  </section>
</BaseLayout>

<style>
  .hero-headline {
    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.18;
    letter-spacing: -0.015em;
  }

  .hero-highlight {
    display: inline-block;
    background-color: #ff6b2c;
    color: #2a0f02;
    padding: 0.04em 0.2em 0.08em;
    line-height: 0.95;
    /* +50 Gewicht gegen optische Verdünnung dunkler Schrift auf hellem Persimmon */
    font-weight: 550;
    vertical-align: baseline;
    border-radius: 0;
  }
</style>