---
import { getAuthConfig } from '../../config/auth';

interface Tier {
  name: string;
  price: string;
  sub: string;
  href: string;
  cta: string;
  highlight?: boolean;
}

const auth = getAuthConfig();

const tiers: Tier[] = [
  {
    name: 'Trial',
    price: 'Free',
    sub: '14 days · 1 environment · 2 apps',
    href: auth.signUpUrl,
    cta: 'Start free trial',
  },
  {
    name: 'MID',
    price: '20 € /mo',
    sub: '2 environments · 10 apps · 7-day retention',
    href: auth.signUpUrl,
    cta: 'Start on MID',
    highlight: true,
  },
  {
    name: 'HIGH',
    price: 'Contact',
    sub: 'Unlimited envs · 50 apps · 90-day retention · Debugger, Replay',
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
  {
    name: 'BUSINESS',
    price: 'Contact',
    sub: 'Unlimited everything · 365-day retention · all features',
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
];
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-12">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Pricing</p>
      <h2 class="text-hero font-bold text-text mb-4">Start free. Grow when you need to.</h2>
      <p class="text-text-muted text-lg">
        No credit card for the trial.
        <a href="/pricing" class="text-accent hover:underline">See full comparison →</a>
      </p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
      {tiers.map((tier) => (
        <div class={`rounded-lg border bg-bg-elevated p-6 flex flex-col ${tier.highlight ? 'border-accent' : 'border-border'}`}>
          <div class="mb-4">
            <div class="font-mono text-xs tracking-wider text-text-muted mb-2">{tier.name.toUpperCase()}</div>
            <div class="text-2xl font-bold text-text">{tier.price}</div>
          </div>
          <p class="text-text-muted text-sm leading-relaxed flex-grow mb-5">{tier.sub}</p>
          <a
            href={tier.href}
            class={`inline-flex items-center justify-center rounded px-4 py-2 text-sm font-semibold transition-colors
              ${tier.highlight
                ? 'bg-accent text-bg hover:bg-accent-muted'
                : 'border border-border-strong text-text hover:border-accent hover:text-accent'}`}
          >
            {tier.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>
