---
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', 'GDPR', 'ZUGFeRD 2.0', 'DATEV'];

const moduleCount = modules.length;

const sovereigntyItems = [
  { label: '01 · HOSTING', body: 'Hetzner data centres in Falkenstein and Nuremberg. German law, GDPR, no US provider in the data path.' },
  { label: '02 · STACK', body: 'PostgreSQL, PostgREST, Docker. Open-source components under permissive licences only.' },
  { label: '03 · EXPORT', body: 'Full data exports in open formats — anytime, no extra fee, no approval required from us.' },
  { label: '04 · EGRESS', body: 'Optional compliance layer with egress audit and proxy. You see what your tenant sends.' },
];

const roadmapPhases = [
  {
    label: 'Today',
    description: 'What is in production use today.',
    current: true,
    items: [
      { name: 'CRM', status: 'available' as const },
      { name: 'Inventory', status: 'available' as const },
      { name: 'Orders', status: 'available' as const },
      { name: 'Documents', status: 'available' as const },
      { name: 'Payments', status: 'available' as const },
      { name: 'Accounting export (DATEV)', status: 'available' as const },
    ],
  },
  {
    label: 'Q3–Q4 2026',
    description: 'Active development, shipping in the coming months.',
    items: [
      { name: 'Team email', status: 'developing' as const },
      { name: 'Items', status: 'developing' as const },
      { name: 'Sales channels', status: 'developing' as const },
      { name: 'Shipping', status: 'developing' as const },
      { name: 'Invoices (ZUGFeRD)', status: 'developing' as const },
      { name: 'Tasks', status: 'developing' as const },
    ],
  },
  {
    label: '2027',
    description: 'Committed roadmap, sequencing follows tester feedback.',
    items: [
      { name: 'Helpdesk', status: 'planned' as const },
      { name: 'Telephony', status: 'planned' as const },
      { name: 'Purchasing', status: 'planned' as const },
      { name: 'Projects', status: 'planned' as const },
      { name: 'Time tracking', status: 'planned' as const },
      { name: 'HR', status: 'planned' as const },
    ],
  },
  {
    label: 'Vision',
    description: 'Direction, not promise.',
    items: [
      { name: 'WhatsApp Business', status: 'vision' as const },
      { name: 'AI assistant', status: 'vision' as const },
    ],
  },
];

const objections = [
  {
    q: 'We are only two. Is this even worth it?',
    a: 'Built exactly for you. Three modules are enough to start — and grow with you when you grow. No 27-module suite to wade through.',
  },
  {
    q: 'What if we grow?',
    a: 'SlimCore scales from one person to roughly fifty — same software, just more activated modules. No platform switch, no migration, no second training.',
  },
  {
    q: 'We already use HubSpot.',
    a: 'Keep it. SlimCore closes the gap between pipeline and documents — exactly where HubSpot ends and your accountant begins.',
  },
  {
    q: 'Odoo was too complex.',
    a: 'SlimCore delivers about 80% of Odoo without the implementation overhead. What you do not need, you do not see.',
  },
  {
    q: 'What if you disappear?',
    a: 'Full export in open schema. Any PostgreSQL host can keep your tenant running. No lock-in, not even from us.',
  },
];

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
  lang="en"
  title="Start lean. Infinite growth."
  description="The lean business software for solopreneurs and small teams. CRM, documents, tasks — modular, hosted in Germany, open source, no 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> Business software for solopreneurs and small teams
      </p>

      <h1 class="hero-headline mt-6 max-w-[18ch] font-serif font-medium text-[#F5F5F0]">
        Start lean.<br /><span class="hero-highlight">Infinite</span> growth.
      </h1>

      <p class="mt-6 max-w-[540px] text-[17px] leading-[1.6] text-[rgba(245,245,240,0.75)]">
        The lean business software for solopreneurs and small teams. You start by activating only what you need today — usually CRM, documents, and tasks. When you grow from one to three, then fifteen, you turn on more modules without switching tools.
      </p>

      <div class="mt-8 flex flex-wrap gap-3">
        <a
          href="/en/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)]"
        >
          Become a tester <span aria-hidden="true">→</span>
        </a>
        <a
          href="/en/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)]"
        >
          See modules <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={`FOUR PILLARS · ${moduleCount} MODULES`}
        subtitle="Every module activates individually. Today you start with CRM, documents and tasks — tomorrow you add shipping and team email, no migration, no platform switch."
      >
        Activate only what you need today.
      </SectionHeading>

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

      <div class="mt-10">
        <a
          href="/en/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)]"
        >
          All modules &amp; status <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="WHAT SETS US APART">
        Best practices from the big tools. Usable like modern SaaS.
      </SectionHeading>

      <div class="mt-12 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-8">
        <NumberedItem number="01" title="Lean from day 1">
          You activate what you need today — usually CRM, documents and tasks. No onboarding marathon, no 27-module suite you will never fully use.
        </NumberedItem>
        <NumberedItem number="02" title="Grows with you">
          When you grow from one to three, then fifteen, you stay in the same software. Team inbox, inventory, shipping, workflow — turn them on when you actually need them, without migrating.
        </NumberedItem>
        <NumberedItem number="03" title="Sovereign">
          Hosted in Germany, open-source stack, data export anytime. No US cloud, no vendor lock-in, no licence terms rewritten next year.
        </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)]">
        The big promise
      </p>
      <div class="mt-8">
        <SovereigntyBlock
          headlineLines={['Your data.', 'Your country.', 'Your control.']}
          lead="At SlimCore, sovereignty is not a marketing term — it is an architecture decision. Four concrete points show what that means in daily use."
          items={sovereigntyItems}
        />
      </div>
      <div class="mt-12">
        <a
          href="/en/sovereignty"
          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)]"
        >
          More on sovereignty <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">
        Today. Soon. Vision.
      </SectionHeading>

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

      <div class="mt-12">
        <a
          href="/en/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)]"
        >
          Full roadmap <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  {/* — 7. Schnell-Argumentarium — */}
  <section class={sectionPad}>
    <div class={container}>
      <SectionHeading eyebrow="FIVE OBJECTIONS, FIVE ANSWERS">
        Answers you usually only get on the third call.
      </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 PROGRAM · PHASE 1"
        headline="You know the gaps better than any consultant."
        body="Help us build the business software you would hopefully want to use for the next ten years. In return: early influence, discounted or free access — and a direct line to the team."
        ctas={[
          { label: 'Become a tester', href: '/en/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 MINUTES · NO COMMITMENT"
        headline="Tell us where you stand — we will say honestly whether SlimCore fits your situation."
        ctas={[
          { label: 'Become a tester', href: '/en/tester', variant: 'primary' },
          { label: 'Book a call', 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;
    font-weight: 550;
    vertical-align: baseline;
    border-radius: 0;
  }
</style>