"use client";

import Link from "next/link";
import type { SeoSection } from "@/lib/audit/types";

interface Props {
  teaser: NonNullable<SeoSection["lockedFirstPartyTeaser"]>;
  brandId?: string | null;
}

export function LockedFirstPartyTeaser({ teaser, brandId }: Props) {
  const installUrl = brandId
    ? `${teaser.siteTagInstallUrl}?brandId=${brandId}`
    : teaser.siteTagInstallUrl;

  return (
    <div className="rounded-2xl overflow-hidden border border-indigo-500/30 bg-gradient-to-br from-indigo-950/80 via-slate-900/90 to-slate-900/80">
      {/* Header */}
      <div className="px-6 pt-6 pb-2 flex items-start justify-between gap-4">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <svg className="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            <span className="text-xs font-semibold uppercase tracking-widest text-indigo-300/80">
              Upgrade to first-party insights
            </span>
          </div>
          <h3 className="text-base font-bold text-slate-100">
            This audit uses public signals only
          </h3>
          <p className="text-sm text-slate-400 mt-0.5">
            Install the Site Tag to unlock real-user behavioral and conversion data for every finding.
          </p>
        </div>
      </div>

      {/* What you're missing */}
      <div className="px-6 py-4">
        <p className="text-[10px] font-semibold uppercase tracking-widest text-indigo-300/60 mb-3">
          What you&apos;re missing
        </p>
        <ul className="space-y-2.5">
          {teaser.whatYouAreMissing.map((item, i) => (
            <li key={i} className="flex items-start gap-2.5 text-sm text-slate-300">
              <svg className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Proof point */}
      <div className="mx-6 my-4 px-4 py-3 rounded-xl bg-indigo-900/30 border border-indigo-500/20">
        <p className="text-xs text-indigo-200/70 leading-relaxed">{teaser.proofPointMetric}</p>
      </div>

      {/* CTA */}
      <div className="px-6 pb-6">
        <Link
          href={installUrl}
          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold transition-colors"
        >
          Install Site Tag
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </Link>
      </div>
    </div>
  );
}
