// eid-detail-page.jsx
// Detail page for a single eID integration.
// Reads the slug from the last path segment of window.location.pathname.
// Depends on: window.ccEidData (eid-data.jsx), Icon (nav.jsx)

// ── Coverage flags ───────────────────────────────────────────────────────────
const CC_NAMES = {
  SE:"Sweden",NO:"Norway",DK:"Denmark",FI:"Finland",IS:"Iceland",EE:"Estonia",
  LV:"Latvia",LT:"Lithuania",DE:"Germany",AT:"Austria",CH:"Switzerland",LI:"Liechtenstein",
  BE:"Belgium",NL:"Netherlands",LU:"Luxembourg",GB:"United Kingdom",IE:"Ireland",
  IT:"Italy",PT:"Portugal",ES:"Spain",GR:"Greece",HR:"Croatia",SI:"Slovenia",
  MT:"Malta",CY:"Cyprus",FR:"France",PL:"Poland",CZ:"Czechia",SK:"Slovakia",
  HU:"Hungary",RO:"Romania",BG:"Bulgaria",UA:"Ukraine",RS:"Serbia",AL:"Albania",
  MK:"North Macedonia",BA:"Bosnia & Herzegovina",ME:"Montenegro",MD:"Moldova",
  US:"United States",CA:"Canada",BR:"Brazil",MX:"Mexico",AU:"Australia",NZ:"New Zealand",
  IN:"India",JP:"Japan",KR:"South Korea",SG:"Singapore",CN:"China",MY:"Malaysia",
  ID:"Indonesia",IL:"Israel",AE:"UAE",SA:"Saudi Arabia",QA:"Qatar",TR:"Turkey",
  ZA:"South Africa",KE:"Kenya",GL:"Greenland",AX:"Åland",GG:"Guernsey",
  IM:"Isle of Man",JE:"Jersey",SM:"San Marino",VA:"Vatican",AD:"Andorra",MC:"Monaco",
};

function ccToFlag(cc) {
  if (cc === "WORLD") return "🌐";
  return cc.toUpperCase().replace(/./g, c => String.fromCodePoint(c.charCodeAt(0) - 65 + 0x1F1E6));
}

function EidCoverageFlags({ coverage }) {
  const [hovered, setHovered] = React.useState(null);
  const multi = coverage.length > 1;
  return (
    <div style={{ display: "flex", gap: 4, alignItems: "center", flexWrap: "wrap" }}>
      {coverage.map((cc) => (
        <div
          key={cc}
          style={{ position: "relative", display: "inline-flex" }}
          onMouseEnter={() => setHovered(cc)}
          onMouseLeave={() => setHovered(null)}
        >
          <span
            style={{
              fontSize: 22,
              lineHeight: 1,
              cursor: "default",
              opacity: multi && hovered !== null && hovered !== cc ? 0.25 : 1,
              transform: hovered === cc ? "scale(1.25)" : "scale(1)",
              transition: "opacity 150ms ease, transform 150ms ease",
              display: "inline-block",
            }}
          >
            {ccToFlag(cc)}
          </span>
          {hovered === cc && (
            <div style={{
              position: "absolute",
              bottom: "calc(100% + 6px)",
              left: "50%",
              transform: "translateX(-50%)",
              background: "var(--ink-1)",
              color: "#fff",
              fontSize: 11.5,
              fontWeight: 500,
              whiteSpace: "nowrap",
              padding: "4px 8px",
              borderRadius: 6,
              pointerEvents: "none",
              zIndex: 10,
            }}>
              {CC_NAMES[cc] || cc}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ── About section ────────────────────────────────────────────────────────────
function EidAboutSection({ eid }) {
  const isGlobal = eid.coverage.length === 1 && eid.coverage[0] === "WORLD";
  const coverageText = isGlobal
    ? "globally"
    : eid.coverage.length === 1
    ? `in ${eid.coverage[0]}`
    : `across ${eid.coverage.length} countries including ${eid.coverage.slice(0, 3).join(", ")}`;

  const flowParagraph =
    eid.method === "redirect"
      ? `When you send a contract via ContractControl, the signer receives a secure link by email or SMS. They open the document, are briefly redirected to ${eid.name} to authenticate with their existing credentials, and are returned with a binding signature applied, all in a matter of seconds. No new accounts, no app downloads for the signer.`
      : `${eid.name} is integrated directly into ContractControl's signing interface. The signer opens the contract through a secure link and completes authentication without leaving the page. Their identity is verified in real time and the signature is applied cryptographically within the same browser session, providing a seamless, uninterrupted experience.`;

  const assuranceNote =
    eid.assurance === "QES"
      ? `${eid.name} produces Qualified Electronic Signatures (QES), the highest level of electronic signature defined by the eIDAS Regulation, carrying the same legal weight as a handwritten signature across all EU member states.`
      : eid.assurance === "AES"
      ? `${eid.name} produces Advanced Electronic Signatures (AES) that are uniquely linked to the signatory, capable of identifying the signer, and able to detect any subsequent alteration to the signed data, meeting high legal standards across supported jurisdictions.`
      : `${eid.name} provides a documented record of signer consent and identity, supporting legally valid electronic signing for a broad range of commercial contracts.`;

  const specs = [
    { label: "Signature type",     value: eid.assurance === "QES" ? "Qualified (QES)" : eid.assurance === "AES" ? "Advanced (AES)" : "Simple (SES)" },
    { label: "Region",             value: eid.region },
    { label: "Coverage",           value: isGlobal ? "Global" : `${eid.coverage.length} ${eid.coverage.length === 1 ? "country" : "countries"}` },
    { label: "eIDAS compliance",   value: eid.assurance === "QES" ? "QES, Art. 26 eIDAS" : eid.assurance === "AES" ? "AES, Art. 26 eIDAS" : "National equivalent" },
    { label: "Audit trail",        value: "Full (ContractControl)" },
  ];

  return (
    <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "48px 64px", alignItems: "start" }}>
          <div>
            <span className="eyebrow">About {eid.name}</span>
            <h2 className="h-section" style={{ marginTop: 12, fontSize: "clamp(24px,2.6vw,32px)", marginBottom: 20 }}>
              What is {eid.name}?
            </h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.72, color: "var(--ink-2)", marginBottom: 18 }}>
              {eid.description} {eid.name} is available {coverageText} and accepted as a legally valid identity method for electronic contract signing.
            </p>
            <p style={{ fontSize: 15.5, lineHeight: 1.72, color: "var(--ink-2)", marginBottom: 18 }}>
              {flowParagraph}
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink-3)", margin: 0 }}>
              {assuranceNote}
            </p>
          </div>

          <div style={{
            background: "var(--bg-soft)",
            borderRadius: "var(--r-xl)",
            border: "1px solid var(--line)",
            overflow: "hidden",
          }}>
            {specs.map((row, i) => (
              <div key={i} style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                padding: "13px 20px",
                borderBottom: i < specs.length - 1 ? "1px solid var(--line)" : "none",
                fontSize: 13.5,
                gap: 12,
              }}>
                <span style={{ color: "var(--ink-4)" }}>{row.label}</span>
                <span style={{ color: "var(--ink-1)", fontWeight: 500, textAlign: "right" }}>{row.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Legal validity section ────────────────────────────────────────────────────
function EidLegalSection({ eid }) {
  const isQES = eid.assurance === "QES";
  const isAES = eid.assurance === "AES";
  const isGlobal = eid.coverage.length === 1 && eid.coverage[0] === "WORLD";
  const euCountries = ["AT","BE","BG","CY","CZ","DE","DK","EE","ES","FI","FR","GR","HR","HU","IE","IT","LT","LU","LV","MT","NL","PL","PT","RO","SE","SI","SK"];
  const coverageHasEU = isGlobal || eid.coverage.some(c => euCountries.includes(c));

  const tiers = [
    { tier: "SES", label: "Simple",    active: true, highlight: !isQES && !isAES },
    { tier: "AES", label: "Advanced",  active: true, highlight: isAES },
    { tier: "QES", label: "Qualified", active: true, highlight: isQES },
  ];

  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ maxWidth: 760 }}>
          <span className="eyebrow">Legal validity</span>
          <h2 className="h-section" style={{ marginTop: 12, fontSize: "clamp(22px,2.4vw,30px)", marginBottom: 28 }}>
            {isQES
              ? "Qualified Electronic Signature, legally equivalent to handwritten"
              : isAES
              ? "Advanced Electronic Signature, legally binding"
              : "Simple Electronic Signature, documented consent"}
          </h2>

          {/* eIDAS tier indicator */}
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 28 }}>
            {tiers.map((t, i) => (
              <React.Fragment key={t.tier}>
                <span style={{
                  display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 2,
                  padding: "7px 16px",
                  borderRadius: "var(--r-md)",
                  background: t.highlight ? "var(--accent)" : "var(--bg-elevated)",
                  border: "1px solid " + (t.highlight ? "transparent" : "var(--line)"),
                }}>
                  <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", color: t.highlight ? "white" : "var(--ink-4)" }}>{t.tier}</span>
                  <span style={{ fontSize: 10.5, color: t.highlight ? "rgba(255,255,255,0.7)" : "var(--ink-5)" }}>{t.label}</span>
                </span>
                {i < tiers.length - 1 && (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="2">
                    <polyline points="9 18 15 12 9 6"/>
                  </svg>
                )}
              </React.Fragment>
            ))}
          </div>

          <p style={{ fontSize: 15, lineHeight: 1.72, color: "var(--ink-2)", marginBottom: 18 }}>
            {isQES
              ? `A Qualified Electronic Signature (QES) is the highest level of electronic signature under eIDAS Regulation 910/2014. It requires a qualified certificate issued by a qualified trust service provider (QTSP) and is created using a qualified signature creation device (QSCD). In all EU member states, a QES has the same legal effect as a handwritten signature, meaning contracts signed with ${eid.name} are fully enforceable without any additional verification.`
              : isAES
              ? `An Advanced Electronic Signature (AES) is defined under Article 26 of the eIDAS Regulation as being uniquely linked to the signatory, capable of identifying them, created using data under the signatory's sole control, and capable of detecting any subsequent change to the signed data. Contracts signed with ${eid.name} via ContractControl meet this standard and are legally binding across supported jurisdictions.`
              : `${eid.name} provides electronic signatures with a documented record of signer identity and consent. While classified as a Simple Electronic Signature (SES), these signatures are legally valid and admissible as evidence for the vast majority of commercial agreements in supported countries.`}
          </p>

          {coverageHasEU && (
            <p style={{ fontSize: 15, lineHeight: 1.72, color: "var(--ink-3)", marginBottom: 0 }}>
              Under eIDAS Article 25, electronic signatures cannot be denied legal effect or admissibility as evidence in legal proceedings solely on the grounds that they are in electronic form. Every signature collected through ContractControl includes a tamper-evident seal, qualified timestamp, and full audit log, providing comprehensive legal evidence regardless of the eID method used.
            </p>
          )}
        </div>
      </div>
    </section>
  );
}

// ── Benefits section ──────────────────────────────────────────────────────────
function EidBenefitsSection({ eid }) {
  const isRedirect = eid.method === "redirect";
  const isQES = eid.assurance === "QES";
  const isGlobal = eid.coverage.length === 1 && eid.coverage[0] === "WORLD";
  const coverageDisplay = isGlobal
    ? "worldwide"
    : eid.coverage.length === 1
    ? `in ${eid.coverage[0]}`
    : `in ${eid.coverage.slice(0,2).join(", ")}${eid.coverage.length > 2 ? ` +${eid.coverage.length - 2}` : ""}`;

  const benefits = [
    {
      title: isRedirect ? "No friction for the signer" : "Sign without leaving the page",
      body: isRedirect
        ? `The signer uses their existing ${eid.name} credentials, no new account, no app download. They tap through the redirect in seconds and return to the signed document automatically.`
        : `Authentication and signing happen inside ContractControl with no redirect or page change. The signer completes the entire flow within the same browser window.`,
    },
    {
      title: isQES ? "Qualified identity assurance" : "Verified signer identity",
      body: isQES
        ? `${eid.name} verifies the signer's identity to a qualified level before any signature is applied. Every signed document is cryptographically bound to a government-verified identity.`
        : `${eid.name} verifies the signer's identity before applying the signature, providing strong evidence of who signed, on which device, and at what time.`,
    },
    {
      title: "Tamper-evident audit trail",
      body: `ContractControl records every action from signature request to final archive. The audit log, including identity verification outcome, IP address, and timestamp, is permanently attached to the signed document.`,
    },
    {
      title: `Works for counterparties ${coverageDisplay}`,
      body: isGlobal
        ? `Any counterparty, anywhere in the world, can sign using this method, no geographic restrictions, no need to set up a new account.`
        : `Counterparties who already have ${eid.name} can sign immediately. You send the request from ContractControl; they use the identity method they already trust.`,
    },
    {
      title: "Signed copy auto-archived",
      body: `Once all parties have signed, ContractControl applies a qualified timestamp and archives the document in the Repository. It is fully searchable, version-controlled, and available for audit at any time.`,
    },
    {
      title: "One platform, 60+ eIDs",
      body: `${eid.name} is one of 60+ eID integrations built into ContractControl. Send a contract and let each counterparty sign with the method available in their country, no configuration required per deal.`,
    },
  ];

  return (
    <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <span className="eyebrow">Why {eid.name} with ContractControl</span>
        <h2 className="h-section" style={{ marginTop: 12, fontSize: "clamp(22px,2.4vw,30px)", marginBottom: 36 }}>
          Everything you need for a binding signature
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px,1fr))", gap: 16 }}>
          {benefits.map((b, i) => (
            <div key={i} className="card" style={{ padding: "22px 22px 26px" }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: "var(--ink-1)", marginBottom: 10, lineHeight: 1.35 }}>{b.title}</div>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.65 }}>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Related eIDs section ──────────────────────────────────────────────────────
function EidRelatedSection({ eid }) {
  const all = window.ccEidData || [];
  const related = all.filter(e => e.region === eid.region && e.slug !== eid.slug).slice(0, 6);
  const totalInRegion = all.filter(e => e.region === eid.region && e.slug !== eid.slug).length;

  if (related.length === 0) return null;

  return (
    <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 28, flexWrap: "wrap", gap: 12 }}>
          <div>
            <span className="eyebrow">Also available</span>
            <h2 className="h-section" style={{ marginTop: 10, fontSize: "clamp(20px,2.2vw,28px)" }}>
              More eIDs in {eid.region}
            </h2>
          </div>
          <a href="/esignature/eID-integrations/" style={{ fontSize: 13.5, color: "var(--accent)", textDecoration: "none", fontWeight: 500 }}>
            View all {totalInRegion + 1} {eid.region} eIDs →
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px,1fr))", gap: 12 }}>
          {related.map((r) => {
            const rGlobal = r.coverage.length === 1 && r.coverage[0] === "WORLD";
            return (
              <a
                key={r.slug}
                href={`/esignature/eID-integrations/${r.slug}`}
                style={{
                  display: "flex", flexDirection: "column", gap: 6,
                  padding: "16px 18px",
                  background: "var(--bg-elevated)",
                  border: "1px solid var(--line)",
                  borderRadius: "var(--r-lg)",
                  textDecoration: "none",
                  transition: "border-color 140ms, box-shadow 140ms",
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.boxShadow = "0 4px 16px -4px rgba(110,86,207,0.14)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.boxShadow = "none"; }}
              >
                <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink-1)" }}>{r.name}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-4)", display: "flex", gap: 6, flexWrap: "wrap" }}>
                  <span style={{
                    background: r.assurance === "QES" ? "rgba(110,86,207,0.08)" : "var(--bg-soft)",
                    color: r.assurance === "QES" ? "var(--accent)" : "var(--ink-4)",
                    padding: "1px 7px", borderRadius: 99, fontSize: 10.5, fontWeight: 500,
                  }}>{r.assurance}</span>
                  <span>{rGlobal ? "Global" : r.coverage.slice(0,2).join(", ")}</span>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── FAQ section ───────────────────────────────────────────────────────────────
function EidFaqSection({ eid }) {
  const [open, setOpen] = React.useState(null);
  const isRedirect = eid.method === "redirect";
  const isQES = eid.assurance === "QES";
  const isAES = eid.assurance === "AES";
  const isGlobal = eid.coverage.length === 1 && eid.coverage[0] === "WORLD";

  const faqs = [
    {
      q: `Is ${eid.name} legally valid for electronic contract signatures?`,
      a: isQES
        ? `${eid.name} produces Qualified Electronic Signatures (QES) under eIDAS Regulation 910/2014, which are legally equivalent to handwritten signatures in all EU member states. Contracts signed using ${eid.name} carry the same legal force as paper-signed originals and are enforceable without any additional documentation.`
        : isAES
        ? `${eid.name} produces Advanced Electronic Signatures (AES) that are legally binding across supported jurisdictions. AES signatures under eIDAS are uniquely linked to the signer, capable of detecting tampering, and admissible as evidence in court. They are widely accepted for commercial contracts, NDAs, employment agreements, and similar documents.`
        : `${eid.name} provides electronic signatures with a documented record of signer identity and consent. While classified as a Simple Electronic Signature (SES), these signatures are legally valid and admissible as evidence for the vast majority of commercial agreements in supported countries.`,
    },
    {
      q: `How do I use ${eid.name} within the ContractControl platform?`,
      a: isRedirect
        ? `ContractControl routes signers to ${eid.name} briefly to authenticate using their existing credentials, then returns them automatically with a binding signature applied. Once verified, the signed document is sealed with a tamper-evident certificate and stored in the Repository with a full audit log.`
        : `ContractControl embeds the ${eid.name} signing flow directly inside the interface so signers can authenticate in-context without page redirects. The platform applies a cryptographic signature and archives the document with a tamper-evident seal and audit trail instantly.`,
    },
    {
      q: `Does an external signer need a ContractControl account to sign with ${eid.name}?`,
      a: isRedirect
        ? `No, signers do not need to register for a ContractControl account or install any custom software. They simply use their existing ${eid.name} credentials (typically a mobile app or bank login) to verify their identity and sign.`
        : `No ContractControl account is required, but signers must use their existing ${eid.name} setup, which may include a mobile app, smart card, or authenticator depending on the method. No additional software is installed on the signer's device.`,
    },
    {
      q: `Which geographic regions and countries support signing with ${eid.name}?`,
      a: isGlobal
        ? `${eid.name} is available for counterparties in any country globally. You can send a contract to a counterparty anywhere in the world and they can sign using this method, with no geographic restrictions.`
        : eid.coverage.length === 1
        ? `${eid.name} is available for counterparties located in ${eid.coverage[0]}. Signers must be registered users of ${eid.name} in that country, though you can use any of ContractControl's sixty other eID methods for signers elsewhere.`
        : `${eid.name} is available for counterparties in ${eid.coverage.length} countries: ${eid.coverage.join(", ")}. Signers must hold valid credentials in one of these countries, and you can access other integrated methods if your signers are located elsewhere.`,
    },
    {
      q: `What compliance evidence does the platform generate for an ${eid.name} signature?`,
      a: `ContractControl compiles a comprehensive audit log containing the signer's verified identity, IP address, device details, and cryptographic timestamps. This certificate is embedded directly into the signed PDF file, providing complete legal proof of execution that is stored securely in your Repository.`,
    },
    {
      q: `Can different signers use different identity methods on the same agreement?`,
      a: `Yes, ContractControl supports multi-method signing where each counterparty signs using their local preferred eID or standard signature. The system combines all verifications into a single contract file, maintaining a unified audit trail across all signing events.`,
    },
  ];

  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": faqs.map(f => ({
      "@type": "Question",
      "name": f.q,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": f.a
      }
    }))
  };

  return (
    <section className="section" style={{ borderBottom: "1px solid var(--line)" }}>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0,1fr) minmax(0,2fr)",
          gap: "32px 64px",
          alignItems: "start",
        }}>
          <div style={{ position: "sticky", top: 80 }}>
            <span className="eyebrow">FAQ</span>
            <h2 className="h-section" style={{ marginTop: 12, fontSize: "clamp(20px,2.2vw,28px)", marginBottom: 16 }}>
              Common questions
            </h2>
            <p style={{ fontSize: 14, color: "var(--ink-4)", lineHeight: 1.6, margin: 0 }}>
              Questions about using {eid.name} for eSignatures through ContractControl.
            </p>
          </div>

          <div>
            {faqs.map((faq, i) => (
              <div key={i} style={{ borderBottom: "1px solid var(--line)", padding: "20px 0" }}>
                <button
                  onClick={() => setOpen(open === i ? null : i)}
                  style={{
                    width: "100%", textAlign: "left", background: "none", border: "none",
                    cursor: "pointer", padding: 0,
                    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
                  }}
                >
                  <span style={{ fontSize: 15, fontWeight: 500, color: "var(--ink-1)", lineHeight: 1.4 }}>{faq.q}</span>
                  <span style={{
                    width: 24, height: 24, borderRadius: "50%", flexShrink: 0,
                    background: open === i ? "var(--accent)" : "var(--bg-soft)",
                    border: "1px solid " + (open === i ? "transparent" : "var(--line)"),
                    display: "grid", placeItems: "center",
                    color: open === i ? "white" : "var(--ink-3)",
                    transition: "background 200ms, color 200ms",
                  }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      {open === i
                        ? <line x1="5" y1="12" x2="19" y2="12" />
                        : <><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></>
                      }
                    </svg>
                  </span>
                </button>
                {open === i && (
                  <p style={{ margin: "14px 0 0", fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.72 }}>
                    {faq.a}
                  </p>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Main detail page ──────────────────────────────────────────────────────────
function EidDetailPage() {
  const [viewAllHover, setViewAllHover] = React.useState(false);
  const slug = window.location.pathname.replace(/\/$/, "").split("/").pop();
  const eid = (window.ccEidData || []).find((d) => d.slug === slug);

  if (!eid) {
    return (
      <div>
        <section className="section">
          <div className="container" style={{ textAlign: "center", padding: "120px 32px" }}>
            <span className="eyebrow">404</span>
            <h1 className="h-section" style={{ marginTop: 16, marginBottom: 20 }}>eID not found</h1>
            <p className="lede" style={{ marginBottom: 32 }}>
              We couldn't find an eID integration for "<strong>{slug}</strong>".
            </p>
            <a href="/esignature/eID-integrations/" className="btn btn-primary">
              Back to all eIDs <Icon name="arrow" size={14} />
            </a>
          </div>
        </section>
      </div>
    );
  }

  const isGlobal = eid.coverage.length === 1 && eid.coverage[0] === "WORLD";

  const assuranceColor =
    eid.assurance === "QES"
      ? { bg: "rgba(31,138,76,0.08)", color: "var(--success)", border: "rgba(31,138,76,0.22)" }
      : eid.assurance === "AES"
      ? { bg: "var(--accent-soft)", color: "var(--accent)", border: "rgba(110,86,207,0.20)" }
      : { bg: "var(--bg-soft)", color: "var(--ink-4)", border: "var(--line)" };

  const redirectSteps = [
    {
      number: "01",
      title: "Signature request delivered",
      desc: `The signer receives a secure link via email or SMS. ContractControl sends the request directly, no third-party portal required.`,
    },
    {
      number: "02",
      title: `Redirected to ${eid.name}`,
      desc: `The signer is redirected to ${eid.name} to authenticate using their existing credentials. Identity is verified by the eID provider before the signature is authorized.`,
    },
    {
      number: "03",
      title: "Signed, sealed & filed",
      desc: "After successful authentication, the signed document is returned to ContractControl, sealed with a tamper-evident certificate, and automatically filed in the Repository.",
    },
  ];

  const inContextSteps = [
    {
      number: "01",
      title: "Signature request delivered",
      desc: `The signer receives a secure link by email or SMS. Clicking it opens the contract directly in ContractControl, no separate portal, no new account.`,
    },
    {
      number: "02",
      title: `Identity verified with ${eid.name}`,
      desc: `${eid.name} authentication is embedded in the ContractControl interface. The signer confirms their identity without leaving the page, no redirect required.`,
    },
    {
      number: "03",
      title: "Signed, sealed & filed",
      desc: "The signature is applied cryptographically, a tamper-evident seal is attached, and the completed document is immediately archived in ContractControl's Repository.",
    },
  ];

  const steps = eid.method === "redirect" ? redirectSteps : inContextSteps;

  return (
    <div>

      {/* ── Breadcrumbs ── */}
      <div style={{ background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", padding: "14px 0" }}>
        <div className="container">
          <nav aria-label="Breadcrumb" style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--ink-4)" }}>
            <a href="/esignature" style={{ color: "var(--ink-3)", textDecoration: "none" }}
              onMouseEnter={e => e.target.style.color = "var(--ink-1)"}
              onMouseLeave={e => e.target.style.color = "var(--ink-3)"}
            >eSignature</a>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ color: "var(--ink-5)", flexShrink: 0 }}><polyline points="9 18 15 12 9 6" /></svg>
            <a href="/esignature/eID-integrations/" style={{ color: "var(--ink-3)", textDecoration: "none" }}
              onMouseEnter={e => e.target.style.color = "var(--ink-1)"}
              onMouseLeave={e => e.target.style.color = "var(--ink-3)"}
            >eID Integrations</a>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ color: "var(--ink-5)", flexShrink: 0 }}><polyline points="9 18 15 12 9 6" /></svg>
            <span className="tag tag-purple" style={{ margin: 0, padding: "2px 10px", fontSize: 12.5 }}>{eid.name}</span>
          </nav>
        </div>
      </div>

      {/* ── Hero ── */}
      <section className="section" style={{ background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", paddingTop: 48, paddingBottom: 56 }}>
        <div className="container">
          <div style={{ maxWidth: 720 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
              <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-4)", background: "var(--bg-elevated)", border: "1px solid var(--line-strong)", borderRadius: 999, padding: "3px 12px" }}>
                {eid.region}
              </span>
              <span style={{ fontSize: 11.5, fontWeight: 500, padding: "3px 12px", borderRadius: 999, background: assuranceColor.bg, color: assuranceColor.color, border: `1px solid ${assuranceColor.border}` }}>
                {eid.assurance}
              </span>
            </div>

            <h1 className="h-section" style={{ fontSize: "clamp(36px, 4vw, 56px)", marginBottom: 20, letterSpacing: "-0.030em" }}>
              {eid.name}
            </h1>

            <p className="lede" style={{ marginBottom: 32, maxWidth: "60ch" }}>
              {eid.description}
            </p>

            <div style={{ display: "inline-flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: "var(--r-md)", background: "var(--bg-elevated)", border: "1px solid var(--line-strong)", fontSize: 13.5, color: "var(--ink-2)" }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.8">
                  <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                </svg>
                <span>{isGlobal ? "Available globally" : `Available in ${eid.coverage.length} ${eid.coverage.length === 1 ? "country" : "countries"}`}</span>
              </div>
              {!isGlobal && <EidCoverageFlags coverage={eid.coverage} />}
            </div>
          </div>
        </div>
      </section>

      {/* ── Coverage ── (flags shown inline in hero, no separate section needed) */}

      {isGlobal && (
        <section className="section" style={{ paddingBottom: 48, borderBottom: "1px solid var(--line)" }}>
          <div className="container">
            <div style={{ background: "var(--accent-soft)", border: "1px solid rgba(110,86,207,0.18)", borderRadius: "var(--r-xl)", padding: "28px 32px", display: "flex", alignItems: "flex-start", gap: 16, maxWidth: 640 }}>
              <span style={{ width: 36, height: 36, borderRadius: "var(--r-md)", background: "var(--accent)", display: "grid", placeItems: "center", color: "white", flexShrink: 0 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                </svg>
              </span>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500, color: "var(--accent-ink)", marginBottom: 6 }}>Globally available</div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--accent-ink)", opacity: 0.75, lineHeight: 1.55 }}>
                  {eid.name} can be used to collect signatures from counterparties in any country where ContractControl operates.
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* ── About ── */}
      <EidAboutSection eid={eid} />

      {/* ── How it works ── */}
      <section className="section" style={{ background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ maxWidth: 640, marginBottom: 40 }}>
            <span className="eyebrow">How it works</span>
            <h2 className="h-section" style={{ marginTop: 12, fontSize: "clamp(22px,2.4vw,30px)" }}>
              Signing process
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px,1fr))", gap: 20 }}>
            {steps.map((step, i) => (
              <div key={i} className="card" style={{ padding: "24px 24px 28px", display: "flex", flexDirection: "column", gap: 14 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, letterSpacing: "0.12em", color: "var(--accent)", opacity: 0.8 }}>{step.number}</span>
                <div>
                  <div style={{ fontSize: 15.5, fontWeight: 500, color: "var(--ink-1)", marginBottom: 8, lineHeight: 1.35 }}>{step.title}</div>
                  <p style={{ margin: 0, fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.6 }}>{step.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Benefits ── */}
      <EidBenefitsSection eid={eid} />

      {/* ── Related eIDs ── */}
      <EidRelatedSection eid={eid} />

      {/* ── FAQ ── */}
      <EidFaqSection eid={eid} />

      {/* ── CTA ── */}
      <section className="section">
        <div className="container">
          <div style={{ background: "var(--ink-1)", borderRadius: "var(--r-2xl)", padding: "clamp(32px,4vw,56px) clamp(28px,5vw,64px)", display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 40 }}>
            <div>
              <span className="eyebrow no-dot" style={{ color: "rgba(255,255,255,0.45)" }}>Use with ContractControl</span>
              <h2 className="h-section" style={{ marginTop: 14, color: "white", fontSize: "clamp(24px,3vw,40px)" }}>
                Let your counterparty sign <em style={{ color: "rgba(255,255,255,0.75)" }}>their way</em>.
              </h2>
              <p style={{ marginTop: 16, fontSize: 16, color: "rgba(255,255,255,0.55)", lineHeight: 1.6, maxWidth: "52ch" }}>
                {eid.name} is one of 60+ eID integrations built into ContractControl. Send a contract and your counterparty signs with the identity they already trust, no new apps, no friction.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, flexShrink: 0 }}>
              <a href="/book-demo" className="btn btn-accent btn-lg">
                Book demo <Icon name="arrow" size={14} />
              </a>
              <a
                href="/esignature/eID-integrations/"
                className="btn btn-ghost btn-lg"
                style={{
                  borderColor: "rgba(255,255,255,0.18)",
                  color: viewAllHover ? "var(--ink-1)" : "rgba(255,255,255,0.7)"
                }}
                onMouseEnter={() => setViewAllHover(true)}
                onMouseLeave={() => setViewAllHover(false)}
              >
                View all eIDs
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ── Back link ── */}
      <div style={{ borderTop: "1px solid var(--line)", padding: "24px 0", background: "var(--bg-soft)" }}>
        <div className="container">
          <a href="/esignature/eID-integrations/" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13.5, color: "var(--ink-3)", textDecoration: "none", transition: "color 140ms ease" }}
            onMouseEnter={e => e.currentTarget.style.color = "var(--ink-1)"}
            onMouseLeave={e => e.currentTarget.style.color = "var(--ink-3)"}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
            </svg>
            Back to all eID integrations
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EidDetailPage });