---
import Base from "../../layouts/Base.astro";
const benefits = [
  { title: "Zero-Trust & Härtung", text: "Security-by-Design, CIS/BSI-Richtlinien, automatisierte Policies." },
  { title: "Cloud Foundations", text: "Landing Zones, Identity, Observability – sauber & skalierbar." },
  { title: "Automatisierung", text: "IaC, CI/CD, GitOps, wiederholbar & auditfähig." }
];
const approach = [
  { title: 'Assess', text: 'Risiko- und Reifegradanalyse: schneller Quick-Scan, klare Prioritäten.' },
  { title: 'Design', text: 'Zielarchitektur & Guardrails: sichere, skalierbare Blueprint-Entwürfe.' },
  { title: 'Build', text: 'IaC, Pipelines & Policies-as-Code: reproduzierbar und überprüfbar.' },
  { title: 'Run', text: 'Monitoring, Audits & Kostentransparenz: nachhaltig betreibbar.' }
];
---
<Base path="/de">
  <section class="py-16 grid lg:grid-cols-2 gap-12 items-center">
    <div class="fade-in">
      <h1 class="text-4xl md:text-5xl font-bold leading-tight">
        Security-first Cloud Consulting.
      </h1>
      <p class="mt-4 text-lg text-textMuted">
        Wir verbinden <strong>Struktur</strong> und <strong>Wert</strong>: sichere Cloud-Architekturen, Automatisierung und Compliance – pragmatisch und messbar.
      </p>
      <div class="mt-8 flex gap-4">
        <a href="/de/leistungen" class="px-5 py-3 rounded-brand bg-primary text-white hover:opacity-90">Leistungen</a>
        <a href="/de/kontakt" class="px-5 py-3 rounded-brand border border-primary text-primary hover:bg-graybg">Kontakt</a>
      </div>
      <div class="mt-8 grid grid-cols-3 gap-4 text-sm text-textMuted">
        <div class="p-3 border rounded-brand card">DSGVO / EU-Hosting</div>
        <div class="p-3 border rounded-brand card">BSI/ISO-orientiert</div>
        <div class="p-3 border rounded-brand card">Auditfähig</div>
      </div>
    </div>
  </section>

  <section class="py-10 grid md:grid-cols-3 gap-6">
    {benefits.map(b => (
      <div class="p-6 border rounded-brand hover:shadow-sm transition-shadow card">
        <h3 class="font-semibold text-lg">{b.title}</h3>
        <p class="mt-2 text-textMuted">{b.text}</p>
      </div>
    ))}
  </section>

  <section class="py-12">
    <h2 class="text-2xl font-bold mb-6">Leistungen</h2>
    <div class="grid md:grid-cols-3 gap-6">
      <div class="p-6 border rounded-brand card">
        <h3 class="font-semibold text-lg">Cloud & DevSecOps</h3>
        <p class="mt-2 text-textMuted">Plan, Build & Run – effizient, sicher, skalierbar.</p>
        <a href="/de/leistungen" class="mt-3 inline-block text-primary underline">Mehr erfahren</a>
      </div>
      <div class="p-6 border rounded-brand card">
        <h3 class="font-semibold text-lg">Security & Compliance</h3>
        <p class="mt-2 text-textMuted">Zero-Trust, IAM, Hardening, Audits, BSI/ISO‑orientierte Prozesse.</p>
      </div>
      <div class="p-6 border rounded-brand card">
        <h3 class="font-semibold text-lg">AI & Automation</h3>
        <p class="mt-2 text-textMuted">RAG/Agenten, Automatisierung von Betriebsprozessen, sichere Integration.</p>
      </div>
    </div>
  </section>

  <section class="py-14">
    <h2 class="text-2xl font-bold mb-6">Unser Ansatz</h2>
    <div class="grid md:grid-cols-4 gap-6">
      {approach.map((a, i) => (
        <div class="p-6 border rounded-brand card">
          <div class="text-xl font-semibold">{i+1}. {a.title}</div>
          <p class="mt-2 text-textMuted">{a.text}</p>
        </div>
      ))}
    </div>
  </section>

  <section class="py-12">
    <div class="rounded-brand p-8 bg-gradient-to-r from-accent to-primary text-white flex flex-col md:flex-row items-center justify-between gap-6">
      <div class="text-xl font-semibold tracking-wide">Sichere Cloud – pragmatisch umgesetzt.</div>
      <a href="/de/kontakt" class="px-6 py-3 rounded-brand bg-white text-primary font-medium">Projekt anfragen</a>
    </div>
  </section>
</Base>
