/* global React, ReactDOM, PAGES, HCSymbol, Logo, LogoStack, Icon */
const { useState, useEffect } = React;

const HOME = "../index.html";

/* ─── extra styles for sub-pages ─── */
const css = `
.subpage{ min-height:100vh; display:flex; flex-direction:column; }
.subnav{ border-bottom:1px solid var(--line); }
.subnav-inner{ max-width:var(--maxw); margin:0 auto; padding:16px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.subnav .back{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; display:inline-flex; gap:8px; align-items:center; }
.subnav .back:hover{ color:var(--clay); }

/* thank-you */
.ty{ flex:1; }
.ty-hero{ padding:clamp(80px,12vw,150px) 0 clamp(48px,7vw,80px); }
.ty-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start; }
@media (max-width:880px){ .ty-grid{ grid-template-columns:1fr; gap:40px; } }
.ty-check{ width:64px; height:64px; border:1.5px solid var(--clay); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.recap{ background:var(--ivory); border:1px solid var(--line); padding:32px; }
.recap h3{ margin:0 0 18px; font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-muted); font-weight:400; }
.recap .row{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.recap .row:last-child{ border-bottom:none; }
.recap .row .k{ font-size:13px; color:var(--ink-muted); }
.recap .row .v{ font-size:14px; font-weight:500; color:var(--ink); text-align:right; }
.prep{ margin-top:48px; }
.prep h3{ font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-muted); font-weight:400; margin:0 0 18px; }
.prep ol{ margin:0; padding:0; list-style:none; counter-reset:p; display:flex; flex-direction:column; gap:16px; }
.prep li{ counter-increment:p; display:flex; gap:16px; font-size:15px; font-weight:300; color:var(--ink-soft); line-height:1.6; }
.prep li::before{ content:counter(p,decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--clay); letter-spacing:0.1em; flex-shrink:0; padding-top:3px; }
.ty-actions{ margin-top:40px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.ty-reassure{ margin-top:40px; display:flex; gap:12px; align-items:flex-start; font-size:13.5px; font-weight:300; color:var(--ink-soft); }
.ty-reassure .l{ color:var(--clay); flex-shrink:0; }

/* legal */
.legal-hero{ padding:clamp(70px,10vw,120px) 0 clamp(32px,5vw,56px); border-bottom:1px solid var(--line); }
.legal-body{ flex:1; padding:48px 0 clamp(72px,10vw,120px); }
.legal-grid{ display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; }
@media (max-width:880px){ .legal-grid{ grid-template-columns:1fr; gap:32px; } }
.legal-tabs{ position:sticky; top:90px; display:flex; flex-direction:column; gap:2px; }
@media (max-width:880px){ .legal-tabs{ position:static; flex-direction:row; flex-wrap:wrap; gap:8px; } }
.legal-tabs button{ text-align:left; background:none; border:none; cursor:pointer; padding:13px 0; font-family:var(--satoshi); font-weight:500; font-size:15px; color:var(--ink-muted); letter-spacing:-0.01em; border-bottom:1px solid transparent; transition:color .2s; }
.legal-tabs button:hover{ color:var(--ink); }
.legal-tabs button.on{ color:var(--ink); }
@media (max-width:880px){ .legal-tabs button{ border:1px solid var(--line); padding:9px 14px; font-size:13px; } .legal-tabs button.on{ background:var(--ink); color:var(--bone); border-color:var(--ink); } }
.legal-content h2{ font-family:var(--satoshi); font-weight:300; font-size:clamp(26px,3.4vw,38px); letter-spacing:-0.03em; margin:0 0 32px; }
.legal-block{ margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.legal-block:last-child{ border-bottom:none; }
.legal-block h4{ margin:0 0 12px; font-weight:700; font-size:17px; letter-spacing:-0.01em; }
.legal-block p{ margin:0; font-size:15px; font-weight:300; color:var(--ink-soft); line-height:1.75; }
.legal-updated{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); margin-top:40px; }
`;

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle">
      <button className={lang === "fr" ? "on" : ""} onClick={() => setLang("fr")}>FR</button>
      <span>/</span>
      <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
    </div>
  );
}

function SubNav({ lang, setLang, backLabel }) {
  return (
    <nav className="subnav">
      <div className="subnav-inner">
        <Logo href={HOME} />
        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <a className="back" href={HOME}><span style={{ fontFamily: "var(--mono)" }}>←</span> {backLabel}</a>
          <LangToggle lang={lang} setLang={setLang} />
        </div>
      </div>
    </nav>
  );
}

function MiniFooter() {
  return (
    <footer className="foot" style={{ padding: "48px 0 32px" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <LogoStack symbolSize={40} nameSize={20} color="var(--bone)" accent="var(--blush)" />
          <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(245,239,230,0.5)" }}>
            © 2026 Miror Num · Bruxelles · Londres
          </span>
        </div>
      </div>
    </footer>
  );
}

window.HCStyle = function HCStyle() {
  return <style dangerouslySetInnerHTML={{ __html: css }} />;
};
window.HOME = HOME;
window.LangToggle = LangToggle;
window.SubNav = SubNav;
window.MiniFooter = MiniFooter;