cameleer-website/src/pages/pricing.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro';
import TopographicBg from '../components/TopographicBg.astro';
import { getAuthConfig } from '../config/auth';

interface FullTier {
  name: string;
  price: string;
  priceNote: string;
  envs: string;
  apps: string;
  retention: string;
  features: string[];
  href: string;
  cta: string;
  highlight?: boolean;
}

const auth = getAuthConfig();

const tiers: FullTier[] = [
  {
    name: 'Trial',
    price: 'Free',
    priceNote: '14 days',
    envs: '1 environment',
    apps: '2 apps',
    retention: '1-day retention',
    features: ['Route topology', 'Processor-level tracing', 'Payload capture with redaction'],
    href: auth.signUpUrl,
    cta: 'Start free trial',
  },
  {
    name: 'Starter',
    price: '20 €',
    priceNote: 'per month',
    envs: '2 environments',
    apps: '10 apps',
    retention: '7-day retention',
    features: ['Everything in Trial', 'Data flow lineage', 'Cross-service correlation'],
    href: auth.signUpUrl,
    cta: 'Start on Starter',
    highlight: true,
  },
  {
    name: 'Scale',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: '50 apps',
    retention: '90-day retention',
    features: ['Everything in Starter', 'Live debugger', 'Exchange replay', 'Live tap'],
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
  {
    name: 'Enterprise',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: 'Unlimited apps',
    retention: '365-day retention',
    features: ['Everything in Scale', 'Priority support', 'SLA', 'Dedicated success contact'],
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
];
---
<BaseLayout
  title="Pricing — Cameleer"
  description="Simple pricing for Apache Camel observability. Free 14-day trial, then 20 €/month or enterprise plans."
>
  <SiteHeader />
  <main>
    <section class="relative overflow-hidden border-b border-border">
      <TopographicBg opacity={0.12} lines={8} />
      <div class="relative max-w-content mx-auto px-6 pt-20 pb-12">
        <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Pricing</p>
        <h1 class="text-display font-bold text-text mb-6">Priced so engineers can say yes.</h1>
        <p class="text-lg text-text-muted max-w-prose">
          Start free for 14 days. No credit card required. Move up when you need more apps, longer retention, or enterprise features.
        </p>
      </div>
    </section>

    <section>
      <div class="max-w-content mx-auto px-6 py-16">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {tiers.map((tier) => (
            <div class={`rounded-lg border bg-bg-elevated p-7 flex flex-col ${tier.highlight ? 'border-accent' : 'border-border'}`}>
              <div class="mb-6">
                <div class="font-mono text-xs tracking-wider text-text-muted mb-3">{tier.name.toUpperCase()}</div>
                <div class="flex items-baseline gap-2">
                  <span class="text-3xl font-bold text-text">{tier.price}</span>
                  <span class="text-sm text-text-muted">{tier.priceNote}</span>
                </div>
              </div>
              <ul class="text-sm space-y-2 mb-6 text-text-muted flex-grow">
                <li><span class="text-text">{tier.envs}</span></li>
                <li><span class="text-text">{tier.apps}</span></li>
                <li><span class="text-text">{tier.retention}</span></li>
                <li class="pt-3 border-t border-border mt-3"></li>
                {tier.features.map((f) => <li>• {f}</li>)}
              </ul>
              <a
                href={tier.href}
                class={`inline-flex items-center justify-center rounded px-4 py-2.5 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>
        <p class="text-center text-text-faint text-sm mt-10">
          Prices in EUR, excluding VAT. Billed monthly. Annual billing available for Scale and Enterprise — <a href={auth.salesMailto} class="text-accent hover:underline">talk to sales</a>.
        </p>
      </div>
    </section>
  </main>
  <SiteFooter />
</BaseLayout>