---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Build Your Tenant">
  <div class="flex flex-col items-center gap-8 py-16 text-center">
    <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-[var(--color-accent)]">
      <svg viewBox="0 0 28 28" class="h-10 w-10" fill="none">
        <rect width="28" height="28" rx="6" fill="transparent"/>
        <path d="M8 14a6 6 0 1112 0 6 6 0 01-12 0z" stroke="#fff" stroke-width="2"/>
        <circle cx="14" cy="14" r="2" fill="#fff"/>
      </svg>
    </div>
    <h1 class="text-4xl font-bold text-[var(--color-text-strong)]">
      Build your cloud tenant<br/>in under 5 minutes
    </h1>
    <p class="max-w-lg text-lg text-[var(--color-text-dim)]">
      Choose a plan, pick your apps, set up your domain, and launch.
      Every app is <span class="font-semibold text-[var(--color-success)]">FREE</span> — you only pay for the infrastructure.
    </p>
    <a
      href="/plans"
      class="inline-flex items-center gap-2 rounded-xl bg-[var(--color-accent)] px-8 py-3.5 text-base font-semibold text-white transition-colors hover:bg-[var(--color-accent-hover)] no-underline"
    >
      Get Started
      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
      </svg>
    </a>
    <div class="mt-8 grid max-w-3xl grid-cols-2 gap-4 text-left sm:grid-cols-4">
      {[
        { icon: '∞', label: 'Unlimited apps' },
        { icon: '🔒', label: 'Isolated tenant' },
        { icon: '🌐', label: 'Free subdomains' },
        { icon: '⚡', label: 'One-click deploy' },
      ].map(f => (
        <div class="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4">
          <span class="text-2xl">{f.icon}</span>
          <p class="mt-1 text-sm font-medium text-[var(--color-text)]">{f.label}</p>
        </div>
      ))}
    </div>
  </div>
</Layout>
