"use client";

interface Props {
  isFirstParty: boolean;
}

// ─── Comparison table data ────────────────────────────────────────────────────

const ROWS = [
  {
    dimension: "AI Search Visibility",
    thirdParty: "Estimated AI Overview presence from public SERP data",
    firstParty: "Actual AI referral volume per engine (ChatGPT, Perplexity, Gemini, Copilot, and others)",
  },
  {
    dimension: "AI Conversion Rate",
    thirdParty: "Cannot measure — estimation only",
    firstParty: "Real conversion rate per AI engine, per landing page, with session-level attribution",
  },
  {
    dimension: "Page Performance",
    thirdParty: "Synthetic Core Web Vitals from lab data",
    firstParty: "Real Core Web Vitals at P75 from actual visitor devices across all browsers",
  },
  {
    dimension: "Visitor Behavior",
    thirdParty: "Cannot observe — inferred from page architecture only",
    firstParty: "Rage clicks, dead clicks, scroll patterns, and form abandonment by field",
  },
  {
    dimension: "Conversion Funnel",
    thirdParty: "Inferred from page architecture and site structure",
    firstParty: "Stage-by-stage drop-off with exact percentages and identified bottleneck pages",
  },
  {
    dimension: "Channel Mix",
    thirdParty: "Cannot observe — no session data available",
    firstParty: "Phone calls vs. forms vs. booking starts, with conversion rate per channel",
  },
  {
    dimension: "Device & Geography",
    thirdParty: "Cannot observe — no visitor data available",
    firstParty: "Mobile vs. desktop conversion delta, top metro areas, geographic concentration",
  },
  {
    dimension: "Revenue Attribution",
    thirdParty: "Cannot calculate — no session-level data",
    firstParty: "Revenue per AI engine, per page, and per session when revenue tracking is enabled",
  },
  {
    dimension: "Real-Time Monitoring",
    thirdParty: "Point-in-time analysis only — no ongoing signal",
    firstParty: "Continuous monitoring with alerts on score changes and weekly intelligence reports",
  },
  {
    dimension: "Recommendations",
    thirdParty: "Based on industry patterns and observed structural signals",
    firstParty: "Quantified with behavioral telemetry: specific friction events mapped to conversion lift estimates",
  },
];

// ─── Mobile card view ────────────────────────────────────────────────────────

function MobileCard({ row }: { row: typeof ROWS[0] }) {
  return (
    <div className="rounded-xl border border-white/10 overflow-hidden">
      <div className="px-4 py-3 bg-slate-800/80 border-b border-white/10">
        <p className="text-xs font-semibold text-slate-100">{row.dimension}</p>
      </div>
      <div className="grid grid-cols-2 divide-x divide-white/10">
        <div className="px-3 py-3">
          <p className="text-[10px] text-slate-500 uppercase tracking-widest mb-1.5">This Audit</p>
          <p className="text-[11px] text-slate-400 leading-relaxed">{row.thirdParty}</p>
        </div>
        <div className="px-3 py-3">
          <p className="text-[10px] text-emerald-500 uppercase tracking-widest mb-1.5">With Site Tag</p>
          <p className="text-[11px] text-slate-300 leading-relaxed">{row.firstParty}</p>
        </div>
      </div>
    </div>
  );
}

// ─── Main export ──────────────────────────────────────────────────────────────

export function ThirdVsFirstPartyComparison({ isFirstParty }: Props) {
  if (isFirstParty) return null;

  return (
    <section
      id="third-vs-first-party"
      className="rounded-2xl bg-slate-950/80 border border-white/10 overflow-hidden"
    >
      {/* Section header */}
      <div className="px-6 py-5 border-b border-white/10">
        <h3 className="text-sm font-semibold text-slate-100">What This Audit Cannot See</h3>
        <p className="text-xs text-slate-400 mt-2 leading-relaxed max-w-2xl">
          This audit analyzes your site from the outside, using publicly available signals: crawl
          data, backlinks, SERP positions, and competitor analysis. It is a strong starting point.
          But there is an entire layer of data this audit cannot access — the actual behavior of
          real visitors on your site. Installing the meSEO Site Tag closes that gap with
          first-party intelligence.
        </p>
      </div>

      {/* Desktop table */}
      <div className="hidden md:block p-6">
        <div className="overflow-x-auto">
          <table className="w-full text-xs">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left pb-3 pr-6 text-[10px] font-semibold text-slate-500 uppercase tracking-widest w-[22%]">
                  Dimension
                </th>
                <th className="text-left pb-3 pr-6 text-[10px] font-semibold text-slate-500 uppercase tracking-widest w-[39%]">
                  What This Audit Shows
                </th>
                <th className="text-left pb-3 text-[10px] font-semibold text-emerald-500 uppercase tracking-widest w-[39%]">
                  What meSEO First-Party Reveals
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/5">
              {ROWS.map((row) => (
                <tr key={row.dimension} className="hover:bg-white/[0.02] transition-colors">
                  <td className="py-3 pr-6 font-medium text-slate-200 align-top">{row.dimension}</td>
                  <td className="py-3 pr-6 text-slate-400 leading-relaxed align-top">{row.thirdParty}</td>
                  <td className="py-3 text-slate-300 leading-relaxed align-top">{row.firstParty}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Mobile card stack */}
      <div className="md:hidden p-4 space-y-3">
        {ROWS.map((row) => (
          <MobileCard key={row.dimension} row={row} />
        ))}
      </div>

      {/* Why this matters callout */}
      <div className="mx-6 mb-6 rounded-xl bg-indigo-500/10 border border-indigo-500/20 p-5">
        <p className="text-xs font-semibold text-indigo-300 uppercase tracking-widest mb-2">Why This Matters</p>
        <p className="text-sm text-slate-300 leading-relaxed">
          Audits based on public signals identify structural gaps, but they cannot tell you
          why visitors leave, which AI engines are sending you traffic, or where your conversion
          funnel breaks. First-party behavioral data transforms recommendations from "industry
          best practice" to "your site, your visitors, your specific blockers."
        </p>
      </div>

      {/* CTA block */}
      <div className="mx-6 mb-6 rounded-xl bg-slate-800/60 border border-white/10 p-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <p className="text-sm font-semibold text-white mb-1">Install the meSEO Site Tag</p>
          <p className="text-xs text-slate-400">
            Activation takes under 5 minutes via Google Tag Manager or direct script. Starts
            capturing behavioral telemetry, AI referral attribution, and conversion signals
            immediately.
          </p>
        </div>
        <a
          href="https://meseoapp.com/book-demo"
          target="_blank"
          rel="noopener noreferrer"
          className="shrink-0 inline-flex items-center justify-center rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-5 py-2.5 transition-colors"
        >
          Schedule a Consultation →
        </a>
      </div>
    </section>
  );
}
