// MyAirSpace — The certificate document itself (A4 portrait, print-ready).
const { Seal } = window.MyAirSpace || {};

function CertificateDocument({
  name = "Eleanor Hargreaves",
  line1 = "14 Rodwell Avenue",
  line2 = "Weymouth, Dorset",
  postcode = "DT4 8QT",
  issued = "18 June 2026",
  time = "14:32 BST",
  id = "MAS-4F2K-8WMT",
  expires = "18 June 2027",
}) {
  return (
    <div style={{
      width: 794, minHeight: 1123, background: "var(--surface-card)", position: "relative",
      boxShadow: "var(--shadow-xl)", padding: "64px 68px", boxSizing: "border-box",
      fontFamily: "var(--font-body)", border: "1px solid var(--border-cream)",
    }}>
      {/* Decorative inner frame */}
      <div style={{ position: "absolute", inset: 24, border: "1px solid var(--doc-rule)", borderRadius: "var(--radius-sm)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 30, border: "1px solid var(--cream)", borderRadius: "var(--radius-xs)", pointerEvents: "none" }} />

      {/* Header */}
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 36 }}>
        <img src="../../assets/logo-wordmark.svg" alt="MyAirSpace" style={{ height: 34 }} />
        <div style={{ textAlign: "right", fontFamily: "var(--font-data)", fontSize: 11, color: "var(--text-muted)", lineHeight: 1.6 }}>
          <div>CERTIFICATE No.</div>
          <div style={{ fontSize: 14, color: "var(--text-primary)", fontWeight: 600 }}>{id}</div>
        </div>
      </div>

      {/* Title block */}
      <div style={{ position: "relative", textAlign: "center", marginBottom: 38 }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Drone Recording</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--text-primary)", marginBottom: 14 }}>Privacy Certificate</h1>
        <div style={{ width: 64, height: 3, background: "var(--seal)", borderRadius: 2, margin: "0 auto" }} />
      </div>

      {/* Declaration */}
      <p style={{ position: "relative", fontSize: 16.5, lineHeight: 1.75, color: "var(--text-secondary)", textAlign: "center", maxWidth: 540, margin: "0 auto 34px" }}>
        This certificate records that on <strong style={{ color: "var(--text-primary)" }}>{issued}</strong> at <strong style={{ color: "var(--text-primary)" }}>{time}</strong>, the resident named below declared that they <strong style={{ color: "var(--text-primary)" }}>do not consent</strong> to drones recording identifiable footage, images, audio or personal data of them, their household, visitors or private residential spaces at the property stated.
      </p>

      {/* Detail grid */}
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--doc-rule)", border: "1px solid var(--doc-rule)", borderRadius: "var(--radius-md)", overflow: "hidden", marginBottom: 34 }}>
        <Detail label="Resident" value={name} />
        <Detail label="Property" value={`${line1}, ${line2}`} />
        <Detail label="Postcode" value={postcode} mono />
        <Detail label="Issued" value={`${issued} · ${time}`} />
        <Detail label="Certificate ID" value={id} mono />
        <Detail label="Record valid until" value={expires} />
      </div>

      {/* Seal + signature row */}
      <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 30 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--text-primary)", borderBottom: "1px solid var(--border-strong)", paddingBottom: 6, width: 220, marginBottom: 8, fontStyle: "italic" }}>{name.split(" ")[0]} {name.split(" ").slice(-1)[0][0]}.</div>
          <div className="eyebrow">Resident signature</div>
        </div>
        <Seal size={128} refText="VERIFIED" />
      </div>

      {/* Disclaimer */}
      <div style={{ position: "relative", background: "var(--surface-cream)", border: "1px solid var(--border-cream)", borderRadius: "var(--radius-md)", padding: "14px 18px" }}>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: 11.5, lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>
          This certificate is a dated record of the resident’s stated privacy preference. It is <strong>not</strong> legally binding, does <strong>not</strong> create a no-fly zone, and does <strong>not</strong> override UK aviation rules. It is not issued by the CAA, ICO, police or any government body. Verify at myairspace.co.uk/verify using the certificate ID above.
        </p>
      </div>
    </div>
  );
}

function Detail({ label, value, mono }) {
  return (
    <div style={{ background: "var(--surface-card)", padding: "14px 18px" }}>
      <div className="eyebrow" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ fontFamily: mono ? "var(--font-data)" : "var(--font-body)", fontSize: mono ? 15 : 16, fontWeight: 600, color: "var(--text-primary)" }}>{value}</div>
    </div>
  );
}
window.CertificateDocument = CertificateDocument;