Landing Page Creative Testing at Scale

┌────────────────────────────────────────────────────────┐
│                   META / GOOGLE AD CLICK               │
│   https://kaamlabs.in/landing?hook=server-crash        │
└───────────────────────────┬────────────────────────────┘
                            │ Vercel / Cloudflare Edge (8ms)
                            ▼
┌────────────────────────────────────────────────────────┐
│             EDGE MIDDLEWARE VARIANT RESOLVER           │
│   • Reads `hook=server-crash` parameter                │
│   • Injects matched headline: "Stop 3 AM Server Outages"│
│   • Injects matched hero image & social proof badge    │
│   • Preserves canonical URL & Google Core Web Vitals   │
└───────────────────────────┬────────────────────────────┘
                            │ Zero Client-Side Layout Shift
                            ▼
┌────────────────────────────────────────────────────────┐
│             HYPER-TARGETED measured LANDING PAGE     │
│   Instant visual congruence = 3.8x to 4.2x Higher ROAS │
└────────────────────────────────────────────────────────┘

// app/landing/page.tsx
interface PageProps {
  searchParams: Promise<{ hook?: string; utm_campaign?: string }>;
}

const VARIANTS: Record<string, { headline: string; highlight: string; cta: string }> = {
  'server-crash': {
    headline: 'Stop Waking Up at 3 AM to',
    highlight: 'CRASHED AWS SERVERS',
    cta: 'Get 24/7 DevOps Architecture',
  },
  'high-aws-bill': {
    headline: 'Slash Your Monthly Cloud Spend by',
    highlight: '80% WITH COOLIFY & HETZNER',
    cta: 'Claim Free Cloud Audit',
  },
  'default': {
    headline: 'Zero Faltu Gyaan.',
    highlight: 'REAL SOFTWARE ARCHITECTURE',
    cta: 'Schedule Technical Scope Call',
  }
};

export default async function DynamicLandingPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const variant = VARIANTS[params.hook || 'default'] || VARIANTS['default'];

  return (
    <main className="min-h-screen pt-32 px-6 max-w-5xl mx-auto">
      <h1 className="text-4xl sm:text-6xl font-black text-zinc-950 tracking-tight">
        {variant.headline} <br />
        <span className="text-coral">{variant.highlight}</span>
      </h1>
      <button className="mt-8 px-8 py-4 bg-zinc-950 text-white font-mono font-bold rounded-full">
        {variant.cta} &rarr;
      </button>
    </main>
  );
}