/* ===============================================================
   Shared chrome — top nav, footer, masthead band.
   Multi-page: real hrefs, no SPA routing.
   =============================================================== */

const { useState } = React;

/* Map page id → href. Each page lives at its own folder/index.html. */
const PAGE_HREF = {
  home:       "../index.html",
  issue:      "../senaste-numret/index.html",
  archive:    "../arkiv/index.html",
  portfolio:  "../portfolj/index.html",
  subscribe:  "../prenumeration/index.html",
  about:      "../om-jan/index.html",
};
/* When loaded from the project root (index.html), strip the leading "../" */
const ROOT_HREF = Object.fromEntries(Object.entries(PAGE_HREF).map(([k, v]) => [k, v.replace(/^\.\.\//, "")]));
/* Detect document depth.
   - depth 0: project root (index.html)
   - depth 1: /<page>/ subfolder
   - depth 2: /aktiebrev/<nr>/ — per-issue pages */
const PATH = window.location.pathname;
const DEPTH = (PATH.match(/\/aktiebrev\/[^/]+\//) ? 2 :
               PATH.match(/\/(senaste-numret|arkiv|portfolj|prenumeration|om-jan|aktiebrev)\//) ? 1 : 0);
const IS_ROOT = DEPTH === 0;
const UP = DEPTH === 0 ? "" : DEPTH === 1 ? "../" : "../../";
const HREF = Object.fromEntries(Object.entries(PAGE_HREF).map(([k, v]) => [k, UP + v.replace(/^\.\.\//, "")]));

/* Asset path helper — resolves "assets/foo.jpg" correctly from any page depth. */
const ASSET = (path) => UP + path;

/* Per-issue page href.  aktiebrev/<nr>/index.html */
const ISSUE_HREF = (nr) => UP + "aktiebrev/" + nr + "/index.html";

/* For backwards compatibility with components that call go(id) — turn it
   into a real navigation. */
const navigate = (id) => {
  if (HREF[id]) window.location.href = HREF[id];
};

const TopNav = ({ page }) => {
  const [open, setOpen] = useState(false);
  const link = (id, label) => (
    <a href={HREF[id]} className={page === id ? "active" : ""}
       onClick={() => setOpen(false)}>
      {label}
    </a>
  );
  return (
    <header className="topnav">
      <div className="container">
        <div className="topnav-inner">
          <a className="brand" href={HREF.home} style={{ textDecoration: "none" }}>
            <span className="ar">AktieREA</span>
            <span className="sep">·</span>
            <span className="ab">Aktiebrevet</span>
          </a>
          <button className="mobile-toggle" onClick={() => setOpen(!open)}>
            {open ? "Stäng" : "Meny"}
          </button>
          <nav className={open ? "open" : ""}>
            {link("home",       "Hem")}
            {link("issue",      "Senaste numret")}
            {link("archive",    "Arkiv")}
            {link("portfolio",  "Min portfölj")}
            {link("about",      "Om Jan")}
          </nav>
          <a className="cta" href={HREF.subscribe} style={{ textDecoration: "none" }}>
            Prenumerera · 200 kr/år
          </a>
        </div>
      </div>
    </header>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="columns">
        <div>
          <div className="wordmark" style={{ fontSize: 22, color: "var(--gold)", marginBottom: 10 }}>
            Aktiebrevet
          </div>
          <p style={{ fontSize: 14, opacity: 0.85, fontStyle: "italic", maxWidth: "32ch" }}>
            Ett månatligt brev av Jan Öberg.<br/>
            Sedan januari 2014.
          </p>
          <div style={{ marginTop: 18, display: "flex", alignItems: "center", gap: 10, opacity: 0.5 }}>
            <Ornament color="var(--gold)" size={14}/>
          </div>
        </div>
        <div>
          <h4>Läs</h4>
          <ul>
            <li><a href={HREF.issue}>Senaste numret</a></li>
            <li><a href={HREF.archive}>Hela arkivet</a></li>
            <li><a href={HREF.portfolio}>Bolag jag följer</a></li>
          </ul>
        </div>
        <div>
          <h4>Kontakt</h4>
          <ul>
            <li><a href="mailto:jan@aktierea.se">jan@aktierea.se</a></li>
            <li>Swish · <a href="tel:+46706010671" className="tabular">0706010671</a></li>
            <li>Bankgiro · <span className="tabular">5701–2957</span></li>
          </ul>
        </div>
        <div>
          <h4>Om</h4>
          <ul>
            <li><a href={HREF.about}>Om Jan</a></li>
            <li><a href={HREF.subscribe}>Prenumerera</a></li>
            <li>ObergCapital · Falun</li>
          </ul>
        </div>
      </div>
      <p className="disclaimer">
        Texten i Aktiebrevet ska inte ses som ekonomisk rådgivning. © 2014–2026 ObergCapital · Falun.
      </p>
    </div>
  </footer>
);

/* Disclaimer block — gold-on-teal, the literal Jan-style end-block */
const DisclaimerBlock = () => (
  <div style={{
    background: "var(--teal)",
    color: "var(--gold-soft)",
    border: "3px double var(--gold)",
    padding: "28px 32px",
    margin: "48px 0 0",
    textAlign: "center",
  }}>
    <div className="label-tiny on-teal" style={{ marginBottom: 10 }}>Disclaimer</div>
    <p style={{
      fontFamily: "var(--serif-display)",
      fontStyle: "italic",
      fontSize: 19,
      margin: 0,
      lineHeight: 1.5,
      color: "var(--gold-soft)",
    }}>
      Texten i Aktiebrevet ska inte ses som ekonomisk rådgivning.
      <br/>Du investerar på eget ansvar. Gör alltid din egen analys.
    </p>
  </div>
);

/* Subscription CTA block — Swish + Bankgiro side by side */
const SubscribeBlock = ({ compact = false }) => (
  <section style={{
    background: "var(--teal)",
    color: "var(--parchment)",
    padding: compact ? "40px 32px" : "64px 48px",
    border: "1px solid var(--gold-deep)",
    marginTop: compact ? 32 : 64,
  }}>
    <div style={{ display: "flex", flexWrap: "wrap", gap: 48, alignItems: "center", justifyContent: "space-between" }}>
      <div style={{ flex: "1 1 320px", maxWidth: 460 }}>
        <div className="label-tiny on-teal">Prenumeration</div>
        <h2 style={{
          fontFamily: "var(--serif-display)",
          fontSize: compact ? 32 : 44,
          fontStyle: "italic",
          color: "var(--gold-soft)",
          margin: "10px 0 18px",
          lineHeight: 1.1,
        }}>
          Ett brev i månaden.<br/>Tvåhundra kronor om året.
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--parchment)", marginBottom: 22 }}>
          Swisha 200 kr till <a href="tel:+46706010671" className="tabular" style={{ color: "var(--gold-soft)", fontWeight: 600, borderBottom: "1px solid var(--gold-deep)" }}>0706010671</a>.
          Skriv ditt namn och din mejladress i meddelandefältet —
          så får du nästa nummer av Aktiebrevet i mejlen, samma dag det skickas.
        </p>
        <div style={{ fontSize: 14, color: "var(--gold-soft)", fontStyle: "italic", borderTop: "1px solid var(--gold-deep)", paddingTop: 14 }}>
          Föredrar du Bankgiro? <span className="tabular" style={{ fontWeight: 600 }}>5701–2957</span> · samma belopp, samma mejlfält.
        </div>
      </div>
      <div style={{ flex: "0 0 auto" }}>
        <SwishQR size={compact ? 160 : 200}/>
      </div>
    </div>
  </section>
);

Object.assign(window, { TopNav, Footer, DisclaimerBlock, SubscribeBlock, HREF, ASSET, ISSUE_HREF, navigate });