---
import BaseLayout from '@/layouts/BaseLayout.astro';
import SectionHeading from '@/components/marketing/SectionHeading.astro';
import CTABlock from '@/components/marketing/CTABlock.astro';

const sections = [
  {
    eyebrow: 'WER WIRD GESUCHT',
    heading: 'Ein bewusst breites Spektrum.',
    items: [
      'Inhaber:innen, die heute ein Tool-Sammelsurium nutzen und es ordnen wollen',
      'Solo-Selbstständige und Mikroteams (1–5 Personen) aus Beratung, Handwerk, Dienstleistung, Manufaktur',
      'Wachsende KMU bis ~30 Mitarbeitende, die heute klein starten und in 3 Jahren noch dieselbe Software nutzen wollen',
      'Online-Händler mit WooCommerce oder Shopify — willkommen, aber kein Muss',
      'Unternehmen, die heute eine US-Cloud nutzen und unzufrieden sind — wegen Preisen, Limits oder Souveränitäts-Bedenken',
    ],
  },
  {
    eyebrow: 'WAS TESTER BEKOMMEN',
    heading: 'Früher Einfluss, direkter Draht.',
    items: [
      'Eigene SlimCore-Instanz (Mandant) auf Staging oder Produktion',
      'Persönlicher Onboarding-Termin (1–2 h) mit dem Produktverantwortlichen',
      'Direkter Draht ins Entwicklungsteam über das eingebaute Feedback-Modul',
      'Mehrere Monate vergünstigter oder kostenfreier Nutzung',
    ],
  },
  {
    eyebrow: 'WAS TESTER GEBEN',
    heading: 'Zeit, Daten, ehrliches Feedback.',
    items: [
      '1–2 Stunden pro Woche aktiv mit dem Produkt arbeiten',
      'Bereitschaft, echte Daten in geschützter Testumgebung zu nutzen',
      'Strukturiertes Feedback über das eingebaute Feedback-Modul',
      'Erfahrungs-Gespräch nach 4 und nach 12 Wochen',
      'Toleranz für Bugs, Zwischenstände und Updates',
    ],
  },
];

const expectations = [
  'SlimCore ist kein fertiges Produkt — eine reife Plattform mit klarer Roadmap.',
  'Manche Module sind in Tester-Phase 1 noch nicht verfügbar.',
  'Mobile-App kommt im Verlauf der Tester-Phase.',
  'Tester-Feedback verändert die Roadmap. Das ist gewollt.',
];

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

<BaseLayout
  title="Tester-Programm — Phase 1"
  description="Wir suchen Solo-Selbstständige und kleine Teams für die Tester-Phase. Früher Einfluss, vergünstigte Nutzung, direkter Draht ins Team."
>
  <section class="bg-[#0E0F14] pt-[112px] pb-16 md:pt-[140px] md:pb-20">
    <div class={container}>
      <SectionHeading
        as="h1"
        inverse
        eyebrowPrefix="▸"
        eyebrow="TESTER-PROGRAMM · PHASE 1"
        subtitle="Wir suchen Solo-Selbstständige und kleine Teams aus diversen Branchen — und auch ein paar wachsende KMU. Ein bewusst breites Spektrum, weil wir verschiedene Nutzungsmuster sehen wollen, bevor wir verengen."
      >
        Sie kennen die Lücken besser als jeder Berater.
      </SectionHeading>
    </div>
  </section>

  <div data-hero-end aria-hidden="true"></div>

  {sections.map((section, i) => (
    <section class:list={[sectionPad, i % 2 === 0 ? '' : 'bg-[var(--color-bg-surface)]']}>
      <div class={container}>
        <div class="grid grid-cols-1 gap-10 md:grid-cols-12 md:gap-16">
          <div class="md:col-span-5">
            <p class="font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
              {section.eyebrow}
            </p>
            <h2 class="mt-4 max-w-[18ch] font-sans text-[1.75rem] md:text-[2rem] font-medium leading-[1.2] tracking-[-0.005em] text-[var(--color-text-primary)]">
              {section.heading}
            </h2>
          </div>
          <ul class="md:col-span-7 flex flex-col gap-4">
            {section.items.map((item) => (
              <li class="flex gap-4 border-l-2 border-[var(--color-accent)] pl-4 text-[1rem] leading-[1.65] text-[var(--color-text-secondary)]">
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  ))}

  <section class={`${sectionPad} bg-[var(--color-bg-surface)]`}>
    <div class={container}>
      <div class="grid grid-cols-1 gap-10 md:grid-cols-12 md:gap-16">
        <div class="md:col-span-5">
          <p class="font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
            WORAUF EINSTELLEN
          </p>
          <h2 class="mt-4 max-w-[18ch] font-sans text-[1.75rem] md:text-[2rem] font-medium leading-[1.2] tracking-[-0.005em] text-[var(--color-text-primary)]">
            Ein ehrlicher Disclaimer.
          </h2>
        </div>
        <ul class="md:col-span-7 flex flex-col gap-4 text-[var(--color-text-secondary)] italic">
          {expectations.map((item) => (
            <li class="text-[1rem] leading-[1.65]">{item}</li>
          ))}
        </ul>
      </div>
    </div>
  </section>

  <section class={sectionPad}>
    <div class={container}>
      <blockquote class="border-l-2 border-[var(--color-accent)] pl-6 max-w-[55ch]">
        <p class="font-sans text-[1.5rem] md:text-[1.75rem] font-medium leading-[1.4] text-[var(--color-text-primary)]">
          „Sie kennen die Lücken in Ihrer aktuellen Software besser als jeder Berater. Helfen Sie uns, eine Geschäftssoftware zu bauen, die in Deutschland gehört, gehostet und verstanden wird — und die nicht morgen einem US-Konzern gehört, weil eine Übernahme passiert ist."
        </p>
        <footer class="mt-4 font-mono text-[11px] uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
          Pascal Oelmann · digiFORMER GmbH
        </footer>
      </blockquote>
    </div>
  </section>

  <section class="bg-[#0E0F14] py-20 md:py-28">
    <div class={container}>
      <CTABlock
        inverse
        eyebrow="ANMELDUNG · PHASE 1"
        headline="Anmeldung läuft aktuell per Mail oder Termin."
        body="Das öffentliche Anmelde-Formular ist in Vorbereitung. Bis dahin bekommen Sie schneller eine Antwort, wenn Sie kurz schreiben oder einen 30-Minuten-Slot buchen."
        ctas={[
          { label: 'hallo@slimcore.io', href: 'mailto:hallo@slimcore.io?subject=Tester-Programm%20Phase%201', variant: 'primary' },
          { label: 'Termin vereinbaren', href: 'https://calendly.com/digiformer/quick-call', variant: 'secondary' },
        ]}
      />
    </div>
  </section>
</BaseLayout>