// Email template gallery (viewer page accessible from /admin)

function EmailsGallery({ setPage, fmt }) {
  const [which, setWhich] = useState("purchase");
  const items = [
    { id: "purchase",  label: "Order delivery",        subj: "Your library is ready · FBO-4291-2026" },
    { id: "refresh",   label: "Quarterly refresh",     subj: "The Goldman bank just refreshed" },
    { id: "match",     label: "Coach matched",         subj: "Your case-mock coach for Friday" },
    { id: "refund",    label: "Refund confirmation",   subj: "Your refund · FBO-4291-2026" },
    { id: "welcome",   label: "Welcome / signup",      subj: "Welcome to For Best Offer" },
  ];
  return (
    <div style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "260px 1fr", background: "var(--bg)" }} data-mobile="stack">
      <aside style={{ borderRight: "1px solid var(--border)", padding: "32px 24px", display: "flex", flexDirection: "column", gap: 16, background: "var(--bg-soft)" }}>
        <div>
          <Logo size={20} />
          <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.12em", marginTop: 8 }}>EMAIL TEMPLATES</div>
        </div>
        <nav style={{ display: "flex", flexDirection: "column", gap: 2, marginTop: 12 }}>
          {items.map(it => (
            <button key={it.id} onClick={() => setWhich(it.id)} style={{
              textAlign: "left", padding: "10px 12px", borderRadius: 6,
              background: which === it.id ? "var(--surface)" : "transparent",
              border: "1px solid", borderColor: which === it.id ? "var(--border)" : "transparent",
              display: "flex", flexDirection: "column", gap: 4,
            }}>
              <span style={{ fontSize: 13.5, color: which === it.id ? "var(--text)" : "var(--text-2)" }}>{it.label}</span>
              <span style={{ fontSize: 11, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>SUBJ: {it.subj.slice(0, 36)}…</span>
            </button>
          ))}
        </nav>
        <div style={{ marginTop: "auto", paddingTop: 18, borderTop: "1px solid var(--border)" }}>
          <button className="btn btn-dark btn-sm" style={{ width: "100%", justifyContent: "center" }} onClick={() => setPage("admin")}>← Back to admin</button>
        </div>
      </aside>
      <main style={{ padding: "32px 40px", overflowY: "auto" }}>
        <div style={{ marginBottom: 24, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            <div className="eyebrow">PREVIEW · {items.find(x => x.id === which).label.toUpperCase()}</div>
            <div className="serif-italic" style={{ fontSize: 28, marginTop: 6 }}>{items.find(x => x.id === which).subj}</div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="btn btn-dark btn-sm">Send test</button>
            <button className="btn btn-primary btn-sm">Edit copy</button>
          </div>
        </div>

        {/* Email preview frame */}
        <div style={{ background: "var(--bg-soft)", border: "1px solid var(--border)", borderRadius: 12, padding: 40, display: "flex", justifyContent: "center" }}>
          <div style={{ width: "100%", maxWidth: 560, background: "#fdfaf2", color: "#1a1812", border: "1px solid #d2c9b1", borderRadius: 8, overflow: "hidden", fontFamily: "var(--sans)" }}>
            <EmailHeader />
            {which === "purchase"   && <EmailPurchase fmt={fmt} />}
            {which === "refresh"    && <EmailRefresh />}
            {which === "match"      && <EmailMatch />}
            {which === "refund"     && <EmailRefund fmt={fmt} />}
            {which === "welcome"    && <EmailWelcome />}
            <EmailFooter />
          </div>
        </div>
      </main>
    </div>
  );
}

const e = {
  body: { padding: "32px 36px", fontSize: 14.5, lineHeight: 1.6, color: "#1a1812" },
  h1:   { fontFamily: "'Instrument Serif', serif", fontSize: 30, fontStyle: "italic", letterSpacing: "-0.02em", margin: "0 0 16px", color: "#1a1812", lineHeight: 1.15 },
  h2:   { fontFamily: "'Instrument Serif', serif", fontSize: 18, fontStyle: "italic", margin: "20px 0 8px", color: "#1a1812" },
  p:    { margin: "0 0 14px" },
  cta:  { display: "inline-block", padding: "12px 22px", background: "#d4a04a", color: "#1a1812", borderRadius: 999, fontSize: 13.5, fontWeight: 500, textDecoration: "none", marginTop: 8 },
  meta: { fontSize: 12, color: "#857a5e", fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.05em" },
  box:  { background: "#f3eee2", border: "1px solid #d2c9b1", borderRadius: 6, padding: 16, fontSize: 13.5, color: "#56503f", marginTop: 16, marginBottom: 8 },
};

function EmailHeader() {
  return (
    <div style={{ padding: "20px 36px", background: "#1a1812", color: "#f3eee2", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.14em" }}>
      <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ padding: "3px 7px", border: "1px solid #f3eee2", borderRadius: 3, fontSize: 9, letterSpacing: "0.12em" }}>FBO</span>
        FOR BEST OFFER
      </span>
      <span style={{ opacity: 0.6 }}>VOL. IV · ISSUE 02</span>
    </div>
  );
}
function EmailFooter() {
  return (
    <div style={{ padding: "24px 36px", borderTop: "1px solid #d2c9b1", fontSize: 11.5, color: "#857a5e", fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.05em", lineHeight: 1.6 }}>
      <div>FOR BEST OFFER LTD · COMPANY NO. 14782301</div>
      <div style={{ marginTop: 6 }}>71-75 SHELTON STREET · COVENT GARDEN · LONDON WC2H 9JQ</div>
      <div style={{ marginTop: 14, color: "#56503f" }}>
        <a style={{ color: "#856828", textDecoration: "underline" }}>Manage notifications</a> · <a style={{ color: "#856828", textDecoration: "underline" }}>Unsubscribe</a> · <a style={{ color: "#856828", textDecoration: "underline" }}>Privacy</a>
      </div>
    </div>
  );
}

function EmailPurchase({ fmt }) {
  return (
    <div style={e.body}>
      <div style={e.meta}>ORDER · FBO-4291-2026 · 14 MAY 2026</div>
      <h1 style={e.h1}>Your library is ready.</h1>
      <p style={e.p}>Thanks for your order, Sophia. Everything you bought has been added to your library and is ready to download.</p>

      <h2 style={e.h2}>What you bought</h2>
      <div style={e.box}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <span><strong>Goldman Sachs</strong> · Full Pack</span>
          <span>£30.00</span>
        </div>
        <div style={{ fontSize: 12, color: "#857a5e", marginTop: 4 }}>IBD Summer Analyst · OT + VI + Assessment Centre</div>
      </div>
      <div style={{ paddingTop: 14, marginTop: 6, borderTop: "1px solid #d2c9b1", display: "flex", justifyContent: "space-between", fontSize: 13.5 }}>
        <strong>Total · GBP</strong><strong>£30.00</strong>
      </div>

      <h2 style={e.h2}>Open your library</h2>
      <p style={e.p}>The bank is also accessible offline through our web reader. You'll get a quarterly refresh automatically — no action needed on your end.</p>
      <a style={e.cta}>Open library →</a>

      <p style={{ ...e.p, marginTop: 24, fontSize: 12, color: "#857a5e" }}>
        Receipt available in your <a style={{ color: "#856828" }}>Order History</a>. Refunds available within 48 hours on undownloaded items — just reply to this email.
      </p>
    </div>
  );
}
function EmailRefresh() {
  return (
    <div style={e.body}>
      <div style={e.meta}>BANK REFRESH · Q2 2026 CYCLE</div>
      <h1 style={e.h1}>The Goldman bank just refreshed.</h1>
      <p style={e.p}>We added 14 new questions, retired 6 that no longer appeared in this cycle, and updated the assessment-centre prompts based on April candidate reports.</p>

      <h2 style={e.h2}>What's new this refresh</h2>
      <div style={e.box}>
        <div>+ 8 numerical reasoning items (new SHL format)</div>
        <div style={{ marginTop: 4 }}>+ 4 video-interview prompts</div>
        <div style={{ marginTop: 4 }}>+ 2 partner-round case prompts</div>
        <div style={{ marginTop: 4, color: "#857a5e" }}>− 6 retired items archived for reference</div>
      </div>

      <p style={e.p}>The refresh has already been added to your library. The previous version is preserved in your archive if you want to compare.</p>
      <a style={e.cta}>Open the refreshed bank →</a>

      <p style={{ ...e.p, marginTop: 24, fontSize: 12, color: "#857a5e" }}>
        Refresh notifications can be turned off in <a style={{ color: "#856828" }}>Settings · Notifications</a>.
      </p>
    </div>
  );
}
function EmailMatch() {
  return (
    <div style={e.body}>
      <div style={e.meta}>COACH MATCH · 12 HOURS</div>
      <h1 style={e.h1}>Your case-mock coach for Friday.</h1>
      <p style={e.p}>Matched to <strong>M.</strong>, ex-Engagement Manager at McKinsey, 6 years on the desk. 4.9 / 5 across 98 mock sessions.</p>

      <div style={e.box}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <strong>M. · Ex-McKinsey EM</strong>
          <span style={{ color: "#857a5e", fontSize: 12 }}>EN · ZH · FR</span>
        </div>
        <div style={{ fontSize: 13, marginTop: 8, color: "#56503f" }}>Focus: Case · Partner round · Math drill · Pivot recovery</div>
        <div style={{ fontSize: 13, marginTop: 8 }}>📅 <strong>Friday, 16 May 2026 · 18:00 BST</strong></div>
        <div style={{ fontSize: 13, marginTop: 4 }}>⏱ 90 minutes · Zoom link inside the calendar invite</div>
      </div>

      <p style={e.p}>If the match doesn't feel right, just reply to this email — we'll re-match within 24 hours, no charge.</p>
      <a style={e.cta}>View session details →</a>
    </div>
  );
}
function EmailRefund({ fmt }) {
  return (
    <div style={e.body}>
      <div style={e.meta}>REFUND CONFIRMED · FBO-4058-2026</div>
      <h1 style={e.h1}>Your refund is on the way.</h1>
      <p style={e.p}>We've refunded <strong>£18.00</strong> for your Optiver VI Module to the Visa ending 4242. It typically appears in 5–10 business days, depending on your card issuer.</p>

      <div style={e.box}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <span>Optiver · VI Module</span><span>£18.00</span>
        </div>
        <div style={{ fontSize: 12, color: "#857a5e", marginTop: 4 }}>Refund reference: REF-4058-2026</div>
      </div>

      <p style={e.p}>The item has been removed from your library. If this was raised in error, just reply and we'll restore access.</p>
    </div>
  );
}
function EmailWelcome() {
  return (
    <div style={e.body}>
      <div style={e.meta}>WELCOME · MAY 2026</div>
      <h1 style={e.h1}>Welcome to For Best Offer.</h1>
      <p style={e.p}>You've got an account. That's the easy part. The next step is picking the firm.</p>

      <h2 style={e.h2}>How to get started</h2>
      <p style={e.p}><strong>1.</strong> Browse the catalogue — 83 firms, 240+ roles.</p>
      <p style={e.p}><strong>2.</strong> Choose the stage — OT, VI, or the Full Pack with assessment centre.</p>
      <p style={e.p}><strong>3.</strong> Pair with a 1:1 coach the week before your AC if you want the highest hit rate.</p>

      <a style={e.cta}>Browse 83 firms →</a>

      <p style={{ ...e.p, marginTop: 24, fontSize: 12, color: "#857a5e" }}>
        Free sample inside: <a style={{ color: "#856828" }}>HireVue tells — the seven micro-signals scorers pick up</a>.
      </p>
    </div>
  );
}

Object.assign(window, { EmailsGallery });