---
import Base from "../../layouts/Base.astro";
const benefits = [
  { title: "Zero-Trust & Hardening", text: "Security-by-Design, CIS/BSI guidelines, automated policies." },
  { title: "Cloud Foundations", text: "Landing zones, identity, observability – clean & scalable." },
  { title: "Automation", text: "IaC, CI/CD, GitOps, reproducible & auditable." }
];
const features = [
  { title: "Cloud & SecOps", text: "Plan, Build & Run – efficient, secure, scalable." },
  { title: "Security & Compliance", text: "BSI/ISO-aligned, Zero-Trust, audits, policies-as-code." },
  { title: "AI & Automation", text: "RAG, agents & process automation with measurable outcome." }
];
---
<Base path="/en">
  <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">
        We combine <strong>structure</strong> and <strong>value</strong>: secure cloud architectures, automation and compliance – pragmatic and measurable.
      </p>
      <div class="mt-8 flex gap-4">
        <a href="/en/leistungen" class="px-5 py-3 rounded-brand bg-primary text-white hover:opacity-90">Services</a>
        <a href="/en/kontakt" class="px-5 py-3 rounded-brand border border-primary text-primary hover:bg-graybg">Contact</a>
      </div>
      <div class="mt-8 grid grid-cols-3 gap-4 text-sm text-textMuted">
        <div class="p-3 border rounded-brand card">GDPR / EU hosting</div>
        <div class="p-3 border rounded-brand card">BSI/ISO aligned</div>
        <div class="p-3 border rounded-brand card">Auditable</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">Services</h2>
    <div class="grid md:grid-cols-3 gap-6">
      {features.map(f => (
        <div class="p-6 border rounded-brand hover:-translate-y-0.5 transition card">
          <h3 class="font-semibold text-lg">{f.title}</h3>
          <p class="mt-2 text-textMuted">{f.text}</p>
          <a href="/en/leistungen" class="mt-3 inline-block text-primary underline">Learn more</a>
        </div>
      ))}
    </div>
  </section>

  <section class="py-14">
  <h2 class="text-2xl font-bold mb-6">Our approach</h2>
    <div class="grid md:grid-cols-4 gap-6">
      <div class="p-6 border rounded-brand card">
        <div class="text-xl font-semibold">1. Assess</div>
        <p class="mt-2 text-textMuted">Risk & maturity analysis: quick-scan, clear priorities.</p>
      </div>
      <div class="p-6 border rounded-brand card">
        <div class="text-xl font-semibold">2. Design</div>
        <p class="mt-2 text-textMuted">Target architecture & guardrails: secure, scalable blueprints.</p>
      </div>
      <div class="p-6 border rounded-brand card">
        <div class="text-xl font-semibold">3. Build</div>
        <p class="mt-2 text-textMuted">IaC, pipelines & policies-as-code: reproducible & testable.</p>
      </div>
      <div class="p-6 border rounded-brand card">
        <div class="text-xl font-semibold">4. Run</div>
        <p class="mt-2 text-textMuted">Monitoring, audits & cost transparency for sustainable operations.</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">Secure cloud – implemented pragmatically.</div>
      <a href="/en/kontakt" class="px-6 py-3 rounded-brand bg-white text-primary font-medium">Request project</a>
    </div>
  </section>
</Base>
