import { View, Text, StyleSheet } from "@react-pdf/renderer";
import { C, S } from "../styles";

const s = StyleSheet.create({
  heading: { ...S.h2, marginBottom: 4 },
  subtext: { ...S.small, marginBottom: 18, lineHeight: 1.6 },
  // Comparison table
  table: { borderWidth: 0.75, borderColor: C.border, borderRadius: 4, overflow: "hidden", marginBottom: 16 },
  headerRow: {
    flexDirection: "row",
    backgroundColor: "#1e293b",
    paddingHorizontal: 10,
    paddingVertical: 7,
    borderBottomWidth: 0.75,
    borderBottomColor: C.border,
  },
  tableRow: {
    flexDirection: "row",
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderBottomWidth: 0.5,
    borderBottomColor: "#f1f5f9",
    alignItems: "flex-start",
  },
  rowAlt: { backgroundColor: "#fafafa" },
  colDimension: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: "#94a3b8", letterSpacing: 0.8 },
  colThird: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: "#94a3b8", letterSpacing: 0.8 },
  colFirst: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.green, letterSpacing: 0.8 },
  dimText: { fontSize: 8.5, fontFamily: "Helvetica-Bold", color: C.ink, lineHeight: 1.4 },
  thirdText: { fontSize: 8, color: C.muted, lineHeight: 1.5 },
  firstText: { fontSize: 8, color: C.body, lineHeight: 1.5 },
  // Why it matters callout
  callout: {
    borderWidth: 0.75,
    borderColor: "#c7d2fe",
    borderRadius: 4,
    padding: 12,
    backgroundColor: "#eef2ff",
    marginBottom: 14,
  },
  calloutLabel: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.accent, letterSpacing: 0.8, marginBottom: 4 },
  calloutText: { fontSize: 9, color: C.body, lineHeight: 1.6 },
  // CTA block
  ctaBlock: {
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    padding: 14,
    backgroundColor: C.surface,
  },
  ctaTitle: { fontSize: 11, fontFamily: "Helvetica-Bold", color: C.ink, marginBottom: 4 },
  ctaBody: { fontSize: 9, color: C.body, lineHeight: 1.6, marginBottom: 8 },
  ctaUrl: { fontSize: 9, color: C.accent, fontFamily: "Helvetica-Bold" },
});

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

export function ThirdVsFirstPartyPage() {
  return (
    <View>
      <Text style={s.heading}>What This Audit Cannot See</Text>
      <Text style={s.subtext}>
        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.
      </Text>

      <View style={s.table}>
        <View style={s.headerRow}>
          <Text style={[s.colDimension, { flex: 2.5 }]}>Dimension</Text>
          <Text style={[s.colThird,     { flex: 3.5 }]}>What This Audit Shows</Text>
          <Text style={[s.colFirst,     { flex: 4 }]}>What meSEO First-Party Reveals</Text>
        </View>
        {ROWS.map((row, i) => (
          <View key={row.dimension} style={[s.tableRow, i % 2 === 1 ? s.rowAlt : {}]}>
            <Text style={[s.dimText,   { flex: 2.5 }]}>{row.dimension}</Text>
            <Text style={[s.thirdText, { flex: 3.5 }]}>{row.third}</Text>
            <Text style={[s.firstText, { flex: 4 }]}>{row.first}</Text>
          </View>
        ))}
      </View>

      <View style={s.callout} wrap={false}>
        <Text style={s.calloutLabel}>WHY THIS MATTERS</Text>
        <Text style={s.calloutText}>
          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 patterns to your site,
          your visitors, your specific blockers.
        </Text>
      </View>

      <View style={s.ctaBlock} wrap={false}>
        <Text style={s.ctaTitle}>Install the meSEO Site Tag</Text>
        <Text style={s.ctaBody}>
          Activation takes under 5 minutes via Google Tag Manager or direct script. Starts capturing
          behavioral telemetry, AI referral attribution, and conversion signals immediately.
        </Text>
        <Text style={s.ctaUrl}>meseoapp.com/book-demo — Schedule a consultation to walk through what first-party data would reveal for your brand.</Text>
      </View>
    </View>
  );
}
