// site-dark.jsx — Direction B: Dark Premium
// Near-black background, warm gold accents, high-contrast, editorial display type.
// Denser motion. Geometric vs. Direction A's whitespace.

(function () {
  const { useState, useEffect, useRef } = React;
  const D = window.PANTHERA_DATA;

  // ── Live stock data via Financial Modeling Prep ──────────────
  // If window.PANTHERA_CONFIG.fmpApiKey is set, fetch a live quote and 30-day
  // history for the requested symbol. Caches in sessionStorage for 5 min.
  // FMP symbols: PATRF (US OTC ADR · USD), PAT.L (London · GBX/pence)
  function useFMPStock(symbol) {
    const cfg = window.PANTHERA_CONFIG || {};
    const key = cfg.fmpApiKey;
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const [unsupported, setUnsupported] = useState(false);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      setLoading(true); setError(null); setUnsupported(false);
      let cancelled = false;
      // Cache key includes a version tag — bump it whenever the field
      // mapping changes so stale caches don't show "—%" forever.
      const cacheKey = `pd-fmp-v2-${symbol}`;
      const ttl = 5 * 60 * 1000;
      try {
        const cached = JSON.parse(sessionStorage.getItem(cacheKey) || "null");
        if (cached && Date.now() - cached.t < ttl) {
          setData(cached.d); setLoading(false);
          return;
        }
      } catch {}

      (async () => {
        let q = null;
        let histArr = [];
        let delayedMinutes = 15; // indicative price, delayed ≥ 15 min (see worker)
        let lastErr = "";
        let sawEmpty = false;  // distinguishes "symbol not covered" from "auth/network error"

        // 1) Same-origin proxy (Cloudflare _worker.js) — the FMP key stays
        //    server-side in a Cloudflare secret. On static previews without
        //    the worker this 404s harmlessly and we fall through.
        try {
          const r = await fetch(`/api/quote?symbol=${encodeURIComponent(symbol)}`);
          if (r.ok) {
            const body = await r.json();
            const qCand = body && body.quote && body.quote.symbol ? body.quote : null;
            if (qCand) {
              q = qCand;
              if (Array.isArray(body.history)) histArr = body.history;
              if (typeof body.delayedMinutes === "number") delayedMinutes = body.delayedMinutes;
            } else {
              sawEmpty = true; // proxy reached FMP but symbol isn't covered
            }
          }
        } catch {}

        // 2) Direct FMP fallback — only used when a client-side key is
        //    configured in config.js (visible to visitors; preview use only).
        if (!q && !sawEmpty && key) {
        // Only call FMP's new /stable/ endpoints — the legacy /api/v3/
        // endpoints return HTTP 403 for any subscription started after
        // Aug 31, 2025, so calling them just wastes a request per load.
        const endpoints = [
          {
            quote: `https://financialmodelingprep.com/stable/quote?symbol=${encodeURIComponent(symbol)}&apikey=${key}`,
            hist:  `https://financialmodelingprep.com/stable/historical-price-eod/full?symbol=${encodeURIComponent(symbol)}&apikey=${key}`,
          },
          {
            quote: `https://financialmodelingprep.com/api/stable/quote?symbol=${encodeURIComponent(symbol)}&apikey=${key}`,
            hist:  `https://financialmodelingprep.com/api/stable/historical-price-eod/full?symbol=${encodeURIComponent(symbol)}&apikey=${key}`,
          },
        ];

        for (const ep of endpoints) {
          try {
            const [qRes, hRes] = await Promise.all([fetch(ep.quote), fetch(ep.hist)]);
            if (!qRes.ok) { lastErr = `quote HTTP ${qRes.status} at ${new URL(ep.quote).pathname}`; continue; }
            const qBody = await qRes.json();
            const qCand = Array.isArray(qBody) ? qBody[0] : (qBody && qBody.symbol ? qBody : null);
            if (!qCand) {
              // 200 OK + empty array = key works, symbol just isn't covered.
              sawEmpty = true;
              lastErr = `empty quote at ${new URL(ep.quote).pathname}`;
              continue;
            }
            q = qCand;
            // History is optional — sparkline can fall back.
            if (hRes.ok) {
              const hBody = await hRes.json();
              if (Array.isArray(hBody)) histArr = hBody;
              else if (hBody && Array.isArray(hBody.historical)) histArr = hBody.historical;
            }
            break;
          } catch (e) {
            lastErr = e.message || String(e);
          }
        }
        }

        if (!q) {
          if (!cancelled) {
            if (sawEmpty) setUnsupported(true);
            else setError(lastErr || "no endpoint succeeded");
            setLoading(false);
          }
          return;
        }

        try {
          const hist = histArr.slice(0, 30).reverse();
          const sparkline = hist.map((h) => h.close).filter((x) => typeof x === "number");

          const isLSE = symbol.toUpperCase().endsWith(".L");
          const currency = isLSE ? "GBX" : "USD";
          const prefix = isLSE ? "" : "$";
          const suffix = isLSE ? "p" : "";
          const priceDecimals = isLSE ? 2 : 4;

          const fmt = (n, d = priceDecimals) => (n == null ? "—" : Number(n).toFixed(d));
          const fmtCompact = (n) => {
            if (n == null) return "—";
            const cur = isLSE ? "£" : "$";
            // For LSE, marketCap returned by FMP is in GBP (not pence).
            if (n >= 1e9) return cur + (n / 1e9).toFixed(2) + "B";
            if (n >= 1e6) return cur + (n / 1e6).toFixed(2) + "M";
            if (n >= 1e3) return cur + (n / 1e3).toFixed(1) + "K";
            return cur + Number(n).toFixed(2);
          };
          const fmtVol = (n) => n == null ? "—" : Number(n).toLocaleString();

          const tz = isLSE ? "Europe/London" : "America/New_York";
          const asOf = new Date((q.timestamp || Date.now() / 1000) * 1000).toLocaleString("en-GB", {
            day: "2-digit", month: "short", year: "numeric",
            hour: "2-digit", minute: "2-digit", timeZone: tz,
          }) + " · " + (isLSE ? "LSE" : "OTC");

          // FMP renamed several fields between legacy /api/v3/ and the new
          // /stable/ endpoints — accept either so the card keeps working.
          const pct       = q.changePercentage ?? q.changesPercentage;
          const avgVol    = q.averageVolume   ?? q.avgVolume;
          const sharesOut = q.sharesOutstanding ?? q.weightedSharesOutstanding;

          const out = {
            price: fmt(q.price),
            currency, currencyPrefix: prefix, currencySuffix: suffix,
            change: (q.change >= 0 ? "+" : "") + fmt(q.change),
            changePct: pct == null
              ? "—"
              : (pct >= 0 ? "+" : "") + fmt(pct, 2) + "%",
            up: q.change >= 0,
            high: fmt(q.dayHigh), low: fmt(q.dayLow),
            volume: fmtVol(q.volume),
            prevClose: fmt(q.previousClose),
            marketCap: fmtCompact(q.marketCap),
            asOf,
            delayedMinutes,
            sparkline: sparkline.length ? sparkline : D.stock.sparkline,
            symbol: q.symbol,
            exchange: q.exchange,
            yearHigh: fmt(q.yearHigh), yearLow: fmt(q.yearLow),
            avgVolume: fmtVol(avgVol),
            sharesOutstanding: fmtVol(sharesOut),
            live: true,
            isLSE,
          };
          if (cancelled) return;
          sessionStorage.setItem(cacheKey, JSON.stringify({ t: Date.now(), d: out }));
          setData(out); setLoading(false);
        } catch (e) {
          if (cancelled) return;
          setError(e.message || String(e));
          setLoading(false);
        }
      })();

      return () => { cancelled = true; };
    }, [key, symbol]);

    return { data, loading, error, unsupported, hasKey: !!key };
  }

  // Palette
  const C = {
    bg: "#0b0d0c",
    surface: "#12141300",
    surface2: "#171a19",
    line: "#25282700",
    lineSolid: "#252827",
    gold: "#d4af5c",
    goldBright: "#e9c878",
    fg: "#ecebe5",
    fgMuted: "#9a9890",
    fgDim: "#5c5a54",
    up: "#7dc496",
    down: "#e08878",
  };

  // ── Primitives ────────────────────────────────────────────────
  const Eyebrow = ({ children, color = C.gold }) => (
    <div style={{
      fontSize: 11, letterSpacing: 3.2, textTransform: "uppercase",
      color, fontWeight: 500, fontFamily: "var(--pd-sans)",
    }}>{children}</div>
  );

  const PH = ({ label, h = 240 }) => (
    <div style={{
      width: "100%", height: h,
      background: `
        repeating-linear-gradient(135deg,
          #1c1f1e 0, #1c1f1e 10px,
          #181b1a 10px, #181b1a 20px)`,
      border: `1px solid ${C.lineSolid}`,
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
      fontSize: 11, letterSpacing: 1.4, textTransform: "uppercase",
      color: C.fgDim,
    }}>{label}</div>
  );

  // Crossfades through 1+ images on a timer. Falls back to PH when no images.
  const RotatingImage = ({ images, h = 240, label = "", caption }) => {
    const valid = (images || []).filter(Boolean);
    const [idx, setIdx] = useState(0);
    useEffect(() => {
      if (valid.length < 2) return;
      const mq = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)");
      if (mq && mq.matches) return;
      const t = setInterval(() => setIdx((i) => (i + 1) % valid.length), 4500);
      return () => clearInterval(t);
    }, [valid.length]);
    if (valid.length === 0) return <PH label={label} h={h} />;
    return (
      <div style={{
        position: "relative", width: "100%", height: h, overflow: "hidden",
        border: `1px solid ${C.lineSolid}`, background: "#0a0c0b",
      }}>
        {valid.map((src, i) => (
          <img key={src} src={src} alt={i === 0 ? label : ""} loading="lazy"
            style={{
              position: "absolute", inset: 0, width: "100%", height: "100%",
              objectFit: "cover", opacity: i === idx ? 1 : 0,
              transition: "opacity 1.1s ease",
            }} />
        ))}
        {valid.length > 1 && (
          <div style={{
            position: "absolute", bottom: 10, right: 10, display: "flex", gap: 6, zIndex: 2,
          }}>
            {valid.map((_, i) => (
              <span key={i} style={{
                width: 6, height: 6, borderRadius: "50%",
                background: i === idx ? C.gold : "rgba(255,255,255,.4)",
                transition: "background .4s",
              }} />
            ))}
          </div>
        )}
        {caption && (
          <div style={{
            position: "absolute", left: 0, bottom: 0, right: 0, zIndex: 1,
            padding: "24px 14px 9px",
            background: "linear-gradient(to top, rgba(0,0,0,.6), transparent)",
            fontFamily: "var(--pd-sans)", fontSize: 10.5, letterSpacing: 1.2,
            textTransform: "uppercase", color: "rgba(255,255,255,.82)", fontWeight: 600,
          }}>{caption}</div>
        )}
      </div>
    );
  };

  function useReveal() {
    const ref = useRef(null);
    const [seen, setSeen] = useState(false);
    useEffect(() => {
      if (!ref.current || seen) return;
      const el = ref.current;
      let fired = false;
      const reveal = () => { if (!fired) { fired = true; setSeen(true); } };
      const timer = setTimeout(reveal, 120);
      try {
        const io = new IntersectionObserver(
          ([e]) => { if (e.isIntersecting) { reveal(); io.disconnect(); } },
          { threshold: 0.05 }
        );
        io.observe(el);
        return () => { clearTimeout(timer); io.disconnect(); };
      } catch (err) {
        reveal();
        return () => clearTimeout(timer);
      }
    }, []);
    return [ref, seen];
  }

  const Reveal = ({ children, delay = 0, style }) => {
    const [ref, seen] = useReveal();
    return (
      <div ref={ref} style={{
        opacity: seen ? 1 : 0,
        transform: seen ? "translateY(0) scale(1)" : "translateY(24px) scale(.99)",
        transition: `opacity .8s ease ${delay}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${delay}ms`,
        ...style,
      }}>{children}</div>
    );
  };

  // ── Navigation ────────────────────────────────────────────────
  function Nav({ page, setPage }) {
    const items = [
      { id: "home", label: "Home" },
      { id: "about", label: "About" },
      { id: "projects", label: "Projects" },
      { id: "arbitration", label: "Arbitration" },
      { id: "investors", label: "Investors" },
      { id: "news", label: "News" },
      { id: "contact", label: "Contact" },
    ];
    return (
      <nav style={{
        position: "sticky", top: 0, zIndex: 50,
        background: "rgba(11,13,12,.82)",
        backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)",
        borderBottom: `1px solid ${C.lineSolid}`,
      }}>
        <div style={{
          maxWidth: 1360, margin: "0 auto", padding: "18px 48px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
        }}>
          <button onClick={() => setPage("home")} style={{
            display: "flex", alignItems: "center", gap: 12,
            background: "none", border: 0, cursor: "pointer", padding: 0,
          }}>
            <img src="favicon-192.png" alt="" width="42" height="42" style={{
              display: "block", flexShrink: 0,
            }} />
            <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg,
                letterSpacing: 0.6, fontWeight: 400,
              }}>
                PANTHERA
              </div>
              <div style={{
                fontFamily: "var(--pd-sans)", fontSize: 10, color: C.gold,
                letterSpacing: 3, textTransform: "uppercase", fontWeight: 600,
              }}>
                Resources
              </div>
            </div>
          </button>
          <div style={{ display: "flex", gap: 2, alignItems: "center" }}>
            {items.map((it) => (
              <button key={it.id} onClick={() => setPage(it.id)} style={{
                background: "none", border: 0, padding: "10px 16px",
                fontSize: 12, letterSpacing: 1.6, cursor: "pointer",
                color: page === it.id ? C.gold : C.fgMuted,
                textTransform: "uppercase",
                fontFamily: "var(--pd-sans)", fontWeight: 500,
                transition: "color .15s",
              }}>{it.label}</button>
            ))}
            <div style={{ width: 16 }} />
            <TickerBadge />
          </div>
        </div>
      </nav>
    );
  }

  function Logomark() {
    // Wordmark only (per design direction)
    return null;
  }

  function TickerBadge() {
    // Mirror SharePricePanel's symbol choice; share the cached fetch.
    const cfg = window.PANTHERA_CONFIG || {};
    const [symbol] = useState(() => {
      try {
        const saved = localStorage.getItem("pd-fmp-symbol");
        if (saved === "PATRF") return "PAT.L"; // FMP doesn't carry the OTC ADR
        return saved || "PAT.L";
      }
      catch { return "PAT.L"; }
    });
    const { data: live } = useFMPStock(symbol);
    const s = live || D.stock;
    const prefix = s.currencyPrefix || "£";
    const suffix = s.currencySuffix || "";
    const tickerLabel = live ? (s.isLSE ? "PAT" : "PATRF") : "PAT";
    return (
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: "7px 12px",
        border: `1px solid ${C.lineSolid}`,
        fontFamily: "ui-monospace, monospace", fontSize: 11, color: C.fg,
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: "50%", background: s.up ? C.up : C.down,
          boxShadow: `0 0 8px ${s.up ? C.up : C.down}`,
        }} />
        <span style={{ color: C.fgMuted }}>{tickerLabel}</span>
        <span>{prefix}{s.price}{suffix}</span>
        <span style={{ color: s.up ? C.up : C.down }}>{s.changePct}</span>
      </div>
    );
  }

  // ── HOME ──────────────────────────────────────────────────────
  function Home({ setPage }) {
    return (
      <div>
        <Hero setPage={setPage} />
        <Marquee />
        <ArbitrationFeature />
        <VideoSection />
        <ProjectsMap setPage={setPage} />
        <InvestorHub setPage={setPage} />
        <NewsStrip setPage={setPage} />
        <CTA setPage={setPage} />
        <Footer setPage={setPage} />
      </div>
    );
  }

  function Hero({ setPage }) {
    return (
      <section style={{
        position: "relative", padding: "110px 48px 120px",
        overflow: "hidden",
      }}>
        {/* Topographic background */}
        <svg
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.22 }}
          viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid slice"
        >
          <defs>
            <radialGradient id="topo-g" cx="70%" cy="40%" r="60%">
              <stop offset="0%" stopColor={C.gold} stopOpacity="0.5" />
              <stop offset="100%" stopColor={C.gold} stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect width="1400" height="900" fill="url(#topo-g)" />
          {Array.from({ length: 18 }).map((_, i) => {
            const r = 120 + i * 36;
            return <circle key={i} cx="1050" cy="400" r={r} stroke={C.gold} strokeWidth="0.5" fill="none" opacity={0.28 - i * 0.012} />;
          })}
        </svg>

        <div style={{ position: "relative", maxWidth: 1360, margin: "0 auto" }}>
          <Reveal>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "6px 14px 6px 8px",
              border: `1px solid ${C.gold}`,
              fontSize: 11, letterSpacing: 2.4, textTransform: "uppercase",
              color: C.gold, fontFamily: "var(--pd-sans)",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: C.gold }} />
              Memorial filed · 19 May 2025 · US$1.58B claim
            </div>
          </Reveal>

          <Reveal delay={120}>
            <h1 style={{
              fontFamily: "var(--pd-display)",
              fontSize: 88, lineHeight: 1.0, letterSpacing: -2.4,
              margin: "32px 0 28px", color: C.fg, fontWeight: 300,
              maxWidth: 1240,
            }}>
              Expropriation of one of the largest undeveloped gold projects in the world — trading at <span style={{ color: C.gold, fontStyle: "italic", fontWeight: 300 }}>less than 5%</span> of the arbitration claim.
            </h1>
          </Reveal>

          <Reveal delay={220}>
            <p style={{
              fontSize: 19, lineHeight: 1.55, color: C.fgMuted,
              maxWidth: 720, fontFamily: "var(--pd-sans)", fontWeight: 300,
            }}>
              Panthera Resources is pursuing a <strong style={{ color: C.fg, fontWeight: 500 }}>US$1.58 billion treaty
              claim against India</strong> over the expropriation of the Bhukia Gold Project —
              funded non-recourse by LCM, the AIM-listed institutional litigation financier.
              An active gold exploration portfolio across Mali and Burkina Faso runs alongside.
            </p>
          </Reveal>

          <Reveal delay={300}>
            <div style={{ display: "flex", gap: 14, marginTop: 40 }}>
              <button onClick={() => setPage("investors")} style={btnPrimary}>
                View Investor Hub
              </button>
              <button onClick={() => setPage("about")} style={btnGhost}>
                The Arbitration Case →
              </button>
              <button onClick={() => setPage("projects")} style={btnGhost}>
                West African Portfolio →
              </button>
            </div>
          </Reveal>

          <Reveal delay={400} style={{ marginTop: 100 }}>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
              border: `1px solid ${C.lineSolid}`,
            }}>
              {[
                ["1.58", "B", "Claim value (USD)"],
                ["75", "M", "Market cap (USD)"],
                ["1.74", "Moz", "Bhukia JORC resource"],
                ["13.6", "M", "LCM funding (non-recourse)"],
              ].map(([n, u, l], i) => (
                <div key={i} style={{
                  padding: "32px 28px",
                  borderRight: i < 3 ? `1px solid ${C.lineSolid}` : "none",
                }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                    <div style={{
                      fontFamily: "var(--pd-display)", fontSize: 56, lineHeight: 1,
                      color: C.fg, letterSpacing: -1.5, fontWeight: 300,
                    }}>{n}</div>
                    <div style={{
                      fontFamily: "var(--pd-display)", fontSize: 22,
                      color: C.gold, fontWeight: 300,
                    }}>{u}</div>
                  </div>
                  <div style={{
                    marginTop: 12, fontSize: 11, color: C.fgMuted,
                    letterSpacing: 1.6, textTransform: "uppercase",
                    fontFamily: "var(--pd-sans)",
                  }}>{l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    );
  }

  function Marquee() {
    const items = [
      "LSE: PAT", "OTC: PATRF",
      "US$1.58B CLAIM", "1.74 MOZ JORC", "LCM-FUNDED",
      "BHUKIA · INDIA", "BASSALA · MALI", "KALAKA · MALI", "BIDO · BURKINA FASO",
      "AUSTRALIA–INDIA BIT (1999)",
    ];
    return (
      <div style={{
        borderTop: `1px solid ${C.lineSolid}`, borderBottom: `1px solid ${C.lineSolid}`,
        background: "#0d100f", overflow: "hidden", padding: "20px 0",
      }}>
        <div style={{
          display: "flex", gap: 48, whiteSpace: "nowrap",
          animation: "pd-marquee 40s linear infinite",
        }}>
          {[...items, ...items, ...items].map((t, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 48,
              fontFamily: "var(--pd-display)", fontSize: 22, color: C.fgMuted,
              letterSpacing: 0.4, fontWeight: 300,
            }}>
              {t}
              <span style={{ color: C.gold, fontSize: 10 }}>◆</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function ArbitrationFeature() {
    return (
      <section style={{ padding: "120px 48px" }}>
        <div style={{ maxWidth: 1360, margin: "0 auto" }}>
          <Reveal>
            <Eyebrow>The Thesis</Eyebrow>
            <h2 style={{
              fontFamily: "var(--pd-display)", fontSize: 80, lineHeight: 1,
              margin: "24px 0 0", color: C.fg, fontWeight: 300, letterSpacing: -2,
              maxWidth: 1100,
            }}>
              A position in <span style={{ color: C.gold, fontStyle: "italic" }}>international law</span>
              {" "}as much as a mining story.
            </h2>
          </Reveal>

          <div style={{
            marginTop: 72, display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80,
          }}>
            <div>
              <Reveal>
                <p style={{
                  fontSize: 17, lineHeight: 1.6, color: C.fgMuted,
                  fontFamily: "var(--pd-sans)", fontWeight: 300,
                }}>
                  India retroactively changed its mining laws, effectively expropriating
                  Panthera's 1.74 Moz Bhukia Gold Project. The same ground was then
                  auctioned for a reported $60M upfront plus $60M in guarantees and 65%
                  royalties.
                </p>
                <p style={{
                  marginTop: 20, fontSize: 17, lineHeight: 1.6, color: C.fgMuted,
                  fontFamily: "var(--pd-sans)", fontWeight: 300,
                }}>
                  The claim operates under bilateral investment treaty protection —
                  binding international law enforceable through the New York Convention.
                </p>
                <p style={{
                  marginTop: 20, fontSize: 17, lineHeight: 1.6, color: C.fgMuted,
                  fontFamily: "var(--pd-sans)", fontWeight: 300,
                }}>
                  The company has four gold projects in West Africa, two of which have
                  reported JORC resources.
                </p>
              </Reveal>

              <Reveal delay={200} style={{ marginTop: 40 }}>
                <Eyebrow>Funded by LCM</Eyebrow>
                <div style={{
                  marginTop: 20, padding: 24,
                  border: `1px solid ${C.gold}`, background: "#151814",
                }}>
                  <div style={{
                    fontFamily: "var(--pd-display)", fontSize: 32, lineHeight: 1.05,
                    color: C.fg, fontWeight: 300, letterSpacing: -0.6, marginBottom: 16,
                  }}>
                    {D.arbitration.funderCommitment}
                  </div>
                  <p style={{
                    fontSize: 13, lineHeight: 1.6, color: C.fgMuted,
                    fontFamily: "var(--pd-sans)", marginBottom: 18,
                  }}>
                    Funding committed by <strong style={{ color: C.fg }}>{D.arbitration.funder}</strong> — a
                    subsidiary of AIM-listed Litigation Capital Management, one of the
                    world's leading institutional financiers of international arbitration.
                  </p>
                  <div style={{ display: "grid", gap: 10 }}>
                    {[
                      ["Facility", "US$13.6M, non-recourse"],
                      ["Treaty", "1999 Australia–India BIT"],
                      ["Rules", "UNCITRAL"],
                      ["Seat", "England & Wales"],
                    ].map(([k, v], i) => (
                      <div key={i} style={{
                        display: "flex", justifyContent: "space-between", gap: 16,
                        fontSize: 12, fontFamily: "var(--pd-sans)",
                      }}>
                        <span style={{ color: C.fgMuted, letterSpacing: 1.4, textTransform: "uppercase", fontSize: 10 }}>{k}</span>
                        <span style={{ color: C.fg, textAlign: "right" }}>{v}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>

              <Reveal delay={260} style={{ marginTop: 24 }}>
                <Eyebrow>Cascades Project</Eyebrow>
                <div style={{
                  marginTop: 20, padding: 24,
                  border: `1px solid ${C.gold}`, background: "#151814",
                }}>
                  <div style={{
                    fontFamily: "var(--pd-display)", fontSize: 32, lineHeight: 1.05,
                    color: C.fg, fontWeight: 300, letterSpacing: -0.6, marginBottom: 16,
                  }}>
                    635,000 oz Au
                  </div>
                  <p style={{
                    fontSize: 13, lineHeight: 1.6, color: C.fgMuted,
                    fontFamily: "var(--pd-sans)", marginBottom: 18,
                  }}>
                    Mineral Resource Estimate (NI 43-101) — maiden MRE announced
                    25 Oct 2021, amended 20 Apr 2022.
                  </p>
                  <div style={{ display: "grid", gap: 0, fontFamily: "var(--pd-sans)" }}>
                    <div style={{
                      display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1.2fr", gap: 12,
                      padding: "8px 0", borderBottom: `1px solid ${C.lineSolid}`,
                      fontSize: 10, color: C.fgMuted, letterSpacing: 1.4, textTransform: "uppercase",
                    }}>
                      <span>Category</span>
                      <span style={{ textAlign: "right" }}>Tonnes</span>
                      <span style={{ textAlign: "right" }}>Au g/t</span>
                      <span style={{ textAlign: "right" }}>Contained oz</span>
                    </div>
                    {[
                      ["Indicated", "5.41 Mt", "1.52", "264,000"],
                      ["Inferred", "6.93 Mt", "1.67", "371,000"],
                      ["Total", "12.34 Mt", "1.60", "635,000"],
                    ].map(([cat, t, g, oz], i) => (
                      <div key={i} style={{
                        display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1.2fr", gap: 12,
                        padding: "9px 0",
                        borderBottom: i < 2 ? `1px solid ${C.lineSolid}` : "none",
                        fontSize: 12,
                        color: i === 2 ? C.gold : C.fg,
                        fontWeight: i === 2 ? 600 : 400,
                      }}>
                        <span>{cat}</span>
                        <span style={{ textAlign: "right" }}>{t}</span>
                        <span style={{ textAlign: "right" }}>{g}</span>
                        <span style={{ textAlign: "right" }}>{oz}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>

              <Reveal delay={320} style={{ marginTop: 24 }}>
                <Eyebrow>Kalaka Project</Eyebrow>
                <div style={{
                  marginTop: 20, padding: 24,
                  border: `1px solid ${C.gold}`, background: "#151814",
                }}>
                  <div style={{
                    fontFamily: "var(--pd-display)", fontSize: 32, lineHeight: 1.05,
                    color: C.fg, fontWeight: 300, letterSpacing: -0.6, marginBottom: 16,
                  }}>
                    803,000 oz Au
                  </div>
                  <p style={{
                    fontSize: 13, lineHeight: 1.6, color: C.fgMuted,
                    fontFamily: "var(--pd-sans)", marginBottom: 18,
                  }}>
                    Mineral Resource Estimate (JORC 2012) — published 4 February 2025.
                  </p>
                  <div style={{ display: "grid", gap: 0, fontFamily: "var(--pd-sans)" }}>
                    <div style={{
                      display: "grid", gridTemplateColumns: "1fr 1.6fr 0.9fr 0.9fr 1.1fr", gap: 12,
                      padding: "8px 0", borderBottom: `1px solid ${C.lineSolid}`,
                      fontSize: 10, color: C.fgMuted, letterSpacing: 1.4, textTransform: "uppercase",
                    }}>
                      <span>Category</span>
                      <span>Domain</span>
                      <span style={{ textAlign: "right" }}>Tonnes</span>
                      <span style={{ textAlign: "right" }}>Au g/t</span>
                      <span style={{ textAlign: "right" }}>Gold (oz)</span>
                    </div>
                    {[
                      ["Inferred", "Oxide & transitional", "6.8 Mt", "0.50", "109,000"],
                      ["Inferred", "Sulphide", "43.1 Mt", "0.50", "693,000"],
                      ["Total Inferred", "", "49.9 Mt", "0.50", "803,000"],
                    ].map(([cat, dom, t, g, oz], i) => (
                      <div key={i} style={{
                        display: "grid", gridTemplateColumns: "1fr 1.6fr 0.9fr 0.9fr 1.1fr", gap: 12,
                        padding: "9px 0",
                        borderBottom: i < 2 ? `1px solid ${C.lineSolid}` : "none",
                        fontSize: 12,
                        color: i === 2 ? C.gold : C.fg,
                        fontWeight: i === 2 ? 600 : 400,
                      }}>
                        <span>{cat}</span>
                        <span style={{ color: i === 2 ? C.gold : C.fgMuted }}>{dom}</span>
                        <span style={{ textAlign: "right" }}>{t}</span>
                        <span style={{ textAlign: "right" }}>{g}</span>
                        <span style={{ textAlign: "right" }}>{oz}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
            </div>

            <div>
              <Reveal>
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 32, color: C.gold,
                  fontWeight: 300, letterSpacing: -0.6, marginBottom: 16,
                }}>
                  Key Bhukia Dates
                </div>
              </Reveal>
              {D.arbitration.milestones.map((m, i) => {
                const isHearing = m.status === "hearing";
                const isComplete = m.status === "complete";
                const isHighlight = m.highlight;
                const isConditional = m.conditional;
                const dotColor = isHighlight ? C.gold : isComplete ? C.fg : C.fgDim;
                return (
                  <Reveal key={i} delay={i * 60}>
                    <div style={{
                      display: "grid", gridTemplateColumns: "180px 32px 1fr",
                      gap: 20, padding: "22px 0",
                      borderBottom: `1px solid ${C.lineSolid}`,
                      alignItems: "start",
                      opacity: !isComplete && !isHighlight ? 0.78 : 1,
                    }}>
                      <div style={{
                        fontFamily: "ui-monospace, monospace",
                        fontSize: 12, color: isComplete ? C.gold : C.fgMuted,
                        paddingTop: 6, letterSpacing: 0.6,
                      }}>{m.date}</div>
                      <div style={{ position: "relative", paddingTop: 10 }}>
                        <div style={{
                          width: 12, height: 12,
                          background: isHighlight ? C.gold : isComplete ? C.fg : "transparent",
                          border: !isComplete && !isHighlight ? `1px solid ${C.fgDim}` : "none",
                          transform: "rotate(45deg)",
                          boxShadow: isHighlight ? `0 0 16px ${C.gold}` : "none",
                        }} />
                        {i < D.arbitration.milestones.length - 1 && (
                          <div style={{
                            position: "absolute", left: 5.5, top: 28, bottom: -22,
                            width: 1, background: C.lineSolid,
                          }} />
                        )}
                      </div>
                      <div>
                        <div style={{
                          display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap",
                          marginBottom: 4,
                        }}>
                          <div style={{
                            fontFamily: "var(--pd-display)", fontSize: 24,
                            color: isHighlight ? C.gold : C.fg, fontWeight: 400,
                            letterSpacing: -0.3,
                          }}>{m.label}</div>
                          {isConditional && (
                            <span style={{
                              fontSize: 9, letterSpacing: 1.8, textTransform: "uppercase",
                              padding: "3px 7px", border: `1px solid ${C.gold}`,
                              color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 700,
                            }}>If successful</span>
                          )}
                        </div>
                        <p style={{
                          fontSize: 13, color: C.fgMuted, lineHeight: 1.55,
                          fontFamily: "var(--pd-sans)",
                        }}>{m.detail}</p>
                      </div>
                    </div>
                  </Reveal>
                );
              })}
              <Reveal delay={D.arbitration.milestones.length * 60}>
                <p style={{
                  marginTop: 24, padding: "16px 18px",
                  background: "rgba(212,175,92,0.06)",
                  border: `1px solid ${C.lineSolid}`, borderLeft: `2px solid ${C.gold}`,
                  fontSize: 12, color: C.fgMuted, lineHeight: 1.6,
                  fontFamily: "var(--pd-sans)",
                }}>
                  <strong style={{ color: C.fg, fontWeight: 600 }}>No guaranteed outcome.</strong>{" "}
                  Arbitration is uncertain by nature. The tribunal may rule in part, in full,
                  or not in Panthera's favour. Dates beyond filings to date are indicative.
                  {" "}Awards are enforceable internationally under the New York Convention.
                  There is no guaranteed outcome.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function VideoSection() {
    const [activeIdx, setActiveIdx] = useState(0);
    const [playing, setPlaying] = useState(false);
    const video = D.videos[activeIdx];
    const src = `https://www.youtube.com/embed/${video.id}?autoplay=1${video.start ? `&start=${video.start}` : ""}`;
    const poster = video.poster || `https://img.youtube.com/vi/${video.id}/maxresdefault.jpg`;
    const isExternal = !!video.external;

    return (
      <section style={{
        padding: "120px 48px", borderTop: `1px solid ${C.lineSolid}`,
        background: "#0d100f",
      }}>
        <div style={{ maxWidth: 1360, margin: "0 auto" }}>
          <Reveal>
            <Eyebrow>Watch</Eyebrow>
            <h2 style={{
              fontFamily: "var(--pd-display)", fontSize: 72, lineHeight: 1,
              margin: "24px 0 48px", color: C.fg, fontWeight: 300, letterSpacing: -1.8,
            }}>
              Hear the story from management.
            </h2>
          </Reveal>
          <Reveal delay={100}>
            <div style={{ display: "grid", gridTemplateColumns: "2.2fr 1fr", gap: 24, alignItems: "start" }}>
              <div
                key={video.id}
                style={{
                  position: "relative", width: "100%", paddingBottom: "56.25%",
                  background: "#000", overflow: "hidden", cursor: playing ? "default" : "pointer",
                  border: `1px solid ${C.lineSolid}`,
                }}
                onClick={() => {
                  if (isExternal) { window.open(video.external, "_blank", "noopener"); return; }
                  if (!playing) setPlaying(true);
                }}
              >
                {!playing || isExternal ? (
                  <div style={{ position: "absolute", inset: 0 }}>
                    <img src={poster} alt="" style={{
                      width: "100%", height: "100%", objectFit: "cover", opacity: 0.55,
                    }} />
                    <div style={{
                      position: "absolute", inset: 0,
                      background: "radial-gradient(circle at 70% 40%, rgba(212,175,92,.18) 0%, rgba(11,13,12,.6) 55%), linear-gradient(180deg, rgba(11,13,12,.1) 0%, rgba(11,13,12,.85) 100%)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                    }}>
                      <div style={{ textAlign: "center", color: C.fg, padding: "0 40px" }}>
                        <div style={{
                          width: 104, height: 104, borderRadius: "50%",
                          border: `1px solid ${C.gold}`,
                          display: "flex", alignItems: "center", justifyContent: "center",
                          margin: "0 auto 24px",
                          background: "rgba(212,175,92,.12)",
                          boxShadow: `0 0 60px rgba(212,175,92,.22)`,
                        }}>
                          <svg width="28" height="32" viewBox="0 0 24 28" fill={C.gold} style={{ marginLeft: 5 }}>
                            <path d="M0 0 L24 14 L0 28 Z" />
                          </svg>
                        </div>
                        <div style={{ fontFamily: "var(--pd-display)", fontSize: 28, fontWeight: 400, letterSpacing: -0.4, lineHeight: 1.15 }}>
                          {video.title}
                        </div>
                        <div style={{
                          fontFamily: "ui-monospace, monospace", fontSize: 11,
                          letterSpacing: 2.4, color: C.gold, marginTop: 14, textTransform: "uppercase",
                        }}>
                          {video.duration}{isExternal ? "" : " · YouTube"}
                        </div>
                        {isExternal && (
                          <div style={{
                            fontFamily: "var(--pd-sans)", fontSize: 12,
                            color: C.fgMuted, marginTop: 18, letterSpacing: 0.3,
                          }}>
                            {video.host} · opens in new tab ↗
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                ) : (
                  <iframe
                    src={src}
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
                    allow="autoplay; encrypted-media; picture-in-picture"
                    allowFullScreen
                    title={video.title}
                  />
                )}
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <Eyebrow>Playlist</Eyebrow>
                {D.videos.map((v, i) => {
                  const thumb = v.poster || `https://img.youtube.com/vi/${v.id}/mqdefault.jpg`;
                  const isActive = i === activeIdx;
                  const vExternal = !!v.external;
                  return (
                    <button
                      key={v.id}
                      onClick={() => { setActiveIdx(i); setPlaying(false); }}
                      style={{
                        display: "grid", gridTemplateColumns: "120px 1fr", gap: 14,
                        padding: 10, background: isActive ? "#151814" : "transparent",
                        border: `1px solid ${isActive ? C.gold : C.lineSolid}`,
                        cursor: "pointer", textAlign: "left", alignItems: "center",
                        transition: "all .15s",
                      }}
                    >
                      <div style={{
                        width: "100%", aspectRatio: "16/9",
                        background: `url(${thumb}) center/cover, #000`,
                        position: "relative",
                      }}>
                        <div style={{
                          position: "absolute", inset: 0,
                          background: "linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 100%)",
                          display: "flex", alignItems: "center", justifyContent: "center",
                        }}>
                          {vExternal ? (
                            <div style={{
                              fontFamily: "ui-monospace, monospace", fontSize: 10,
                              color: isActive ? C.gold : "#fff", letterSpacing: 1.2,
                              padding: "3px 8px", border: `1px solid ${isActive ? C.gold : "#fff"}`,
                            }}>↗</div>
                          ) : (
                            <svg width="18" height="20" viewBox="0 0 24 28" fill={isActive ? C.gold : "#fff"}>
                              <path d="M0 0 L24 14 L0 28 Z" />
                            </svg>
                          )}
                        </div>
                      </div>
                      <div>
                        <div style={{
                          fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase",
                          color: isActive ? C.gold : C.fgMuted, marginBottom: 6,
                          fontFamily: "var(--pd-sans)", fontWeight: 600,
                        }}>{v.duration}</div>
                        <div style={{
                          fontFamily: "var(--pd-sans)", fontSize: 14, color: C.fg,
                          lineHeight: 1.35,
                        }}>{v.title}</div>
                      </div>
                    </button>
                  );
                })}
                <a href="https://www.youtube.com/@PantheraResources" target="_blank" rel="noreferrer" style={{
                  marginTop: 8, padding: "12px 14px", border: `1px solid ${C.lineSolid}`,
                  color: C.fgMuted, textDecoration: "none", fontSize: 11,
                  letterSpacing: 1.8, textTransform: "uppercase", fontFamily: "var(--pd-sans)",
                  textAlign: "center",
                }}>More on YouTube ↗</a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    );
  }

  function ProjectsMap({ setPage }) {
    const [active, setActive] = useState("bhukia");
    const project = D.projects.find((p) => p.id === active);
    return (
      <section style={{ padding: "120px 48px" }}>
        <div style={{ maxWidth: 1360, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 56 }}>
            <div>
              <Eyebrow>Portfolio</Eyebrow>
              <h2 style={{
                fontFamily: "var(--pd-display)", fontSize: 72, lineHeight: 1,
                margin: "20px 0 0", color: C.fg, fontWeight: 300, letterSpacing: -1.8,
              }}>One flagship claim. Four exploration projects.</h2>
            </div>
            <button onClick={() => setPage("projects")} style={btnGhost}>View all →</button>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 40, alignItems: "stretch" }}>
            <MapSVG active={active} onSelect={setActive} />
            <div style={{
              border: `1px solid ${C.lineSolid}`, padding: 32, background: "#0d100f",
              display: "flex", flexDirection: "column",
            }}>
              <Eyebrow>Selected</Eyebrow>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 44, lineHeight: 1.02,
                color: C.fg, margin: "16px 0 6px", fontWeight: 300, letterSpacing: -1,
              }}>{project.name}</div>
              <div style={{ fontSize: 12, color: C.fgMuted, fontFamily: "var(--pd-sans)", letterSpacing: 1.6, textTransform: "uppercase" }}>
                {project.region} · {project.country}
              </div>
              <div style={{ height: 1, background: C.lineSolid, margin: "24px 0" }} />
              <div style={{ display: "grid", gap: 16 }}>
                <KV k="Status" v={project.status} />
                <KV k="Resource" v={project.resource} />
                <KV k="Commodity" v={project.type} />
              </div>
              <p style={{
                marginTop: 28, fontSize: 14, lineHeight: 1.55, color: C.fgMuted,
                fontFamily: "var(--pd-sans)", flex: 1,
              }}>{project.note}</p>
              <div style={{ marginTop: 24, display: "flex", gap: 8, flexWrap: "wrap" }}>
                {D.projects.map((p) => (
                  <button key={p.id} onClick={() => setActive(p.id)} style={{
                    padding: "6px 12px", fontSize: 11, letterSpacing: 1.2,
                    fontFamily: "var(--pd-sans)", cursor: "pointer", textTransform: "uppercase",
                    border: `1px solid ${active === p.id ? C.gold : C.lineSolid}`,
                    background: active === p.id ? C.gold : "transparent",
                    color: active === p.id ? C.bg : C.fgMuted,
                    transition: "all .15s",
                  }}>{p.name}</button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function KV({ k, v }) {
    return (
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
        <div style={{
          fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
          color: C.fgMuted, fontFamily: "var(--pd-sans)",
        }}>{k}</div>
        <div style={{ fontSize: 14, color: C.fg, fontFamily: "var(--pd-sans)", textAlign: "right" }}>{v}</div>
      </div>
    );
  }

  function MapSVG({ active, onSelect }) {
    const activeProject = D.projects.find((p) => p.id === active);
    return (
      <div style={{
        background: "#0d100f", border: `1px solid ${C.lineSolid}`,
        padding: 28, position: "relative", minHeight: 500,
      }}>
        <div style={{
          position: "absolute", top: 22, left: 28, right: 28,
          display: "flex", justifyContent: "space-between",
          fontSize: 10, letterSpacing: 2, color: C.fgDim,
          fontFamily: "ui-monospace, monospace", textTransform: "uppercase",
        }}>
          <span>FIG · Portfolio geography</span>
          <span style={{ color: C.gold }}>◆ Active · {activeProject ? activeProject.name : ""}</span>
        </div>
        <svg viewBox="0 0 100 60" style={{ width: "100%", height: "100%", minHeight: 440 }}>
          <g fill="#181b1a" stroke={C.lineSolid} strokeWidth="0.15">
            <path d="M42 14 L58 14 L60 24 L58 36 L54 46 L46 50 L42 44 L40 34 L40 22 Z" />
            <path d="M40 4 L64 4 L64 14 L42 14 L40 10 Z" />
            <path d="M64 4 L96 4 L96 20 L90 28 L78 28 L74 22 L70 18 L64 14 Z" />
            <path d="M20 30 L32 30 L32 52 L24 56 L20 50 Z" />
            <path d="M4 6 L32 6 L32 22 L24 26 L10 22 L6 14 Z" />
            <path d="M82 40 L96 40 L96 50 L86 52 L82 46 Z" />
          </g>
          {[15, 30, 45].map((y) => (
            <line key={y} x1="2" y1={y} x2="98" y2={y} stroke={C.lineSolid} strokeWidth="0.08" strokeDasharray="0.5 0.8" />
          ))}
          {D.projects.map((p) => {
            const isActive = p.id === active;
            return (
              <g key={p.id} style={{ cursor: "pointer" }} onClick={() => onSelect(p.id)}>
                {isActive && (
                  <circle cx={p.lon} cy={p.lat} r="3" fill={C.gold} opacity="0.2">
                    <animate attributeName="r" values="2.8;5;2.8" dur="2.2s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.35;0;0.35" dur="2.2s" repeatCount="indefinite" />
                  </circle>
                )}
                <circle cx={p.lon} cy={p.lat} r={isActive ? 1.3 : 0.9}
                  fill={isActive ? C.gold : C.fgMuted}
                  stroke="#0b0d0c" strokeWidth="0.4" />
                <text x={p.lon + 2} y={p.lat + 0.6}
                  fontSize="1.8" fontFamily="ui-monospace, monospace"
                  fill={isActive ? C.gold : C.fgMuted}
                  fontWeight={isActive ? 600 : 400}>
                  {p.name}
                </text>
              </g>
            );
          })}
        </svg>
      </div>
    );
  }

  function InvestorHub({ setPage }) {
    const [tab, setTab] = useState("price");
    const tabs = [
      { id: "price", label: "Share Price" },
      { id: "calendar", label: "Calendar" },
      { id: "presentations", label: "Presentations" },
    ];
    return (
      <section style={{
        padding: "120px 48px", borderTop: `1px solid ${C.lineSolid}`,
        background: "#0d100f",
      }}>
        <div style={{ maxWidth: 1360, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48 }}>
            <div>
              <Eyebrow>Investor hub</Eyebrow>
              <h2 style={{
                fontFamily: "var(--pd-display)", fontSize: 72, lineHeight: 1,
                margin: "20px 0 0", color: C.fg, fontWeight: 300, letterSpacing: -1.8,
              }}>Investor Resources.</h2>
            </div>
            <button onClick={() => setPage("investors")} style={btnGhost}>Full hub →</button>
          </div>

          <div style={{
            display: "flex", gap: 0, borderBottom: `1px solid ${C.lineSolid}`, marginBottom: 40,
          }}>
            {tabs.map((t) => (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                background: "none", border: 0, padding: "16px 24px",
                fontSize: 12, letterSpacing: 2, textTransform: "uppercase",
                color: tab === t.id ? C.gold : C.fgMuted,
                fontWeight: tab === t.id ? 600 : 500, cursor: "pointer",
                fontFamily: "var(--pd-sans)",
                borderBottom: tab === t.id ? `2px solid ${C.gold}` : "2px solid transparent",
                marginBottom: -1,
              }}>{t.label}</button>
            ))}
          </div>

          {tab === "price" && <SharePricePanel />}
          {tab === "calendar" && <CalendarPanel />}
          {tab === "presentations" && <PresentationsPanel />}
        </div>
      </section>
    );
  }

  function SharePricePanel() {
    const cfg = window.PANTHERA_CONFIG || {};
    const [symbol, setSymbol] = useState(() => {
      try {
        const saved = localStorage.getItem("pd-fmp-symbol");
        // FMP doesn't carry PATRF — always default LSE for a live quote.
        if (saved === "PATRF") return "PAT.L";
        return saved || "PAT.L";
      } catch {
        return "PAT.L";
      }
    });
    const pickSymbol = (sym) => {
      setSymbol(sym);
      try { localStorage.setItem("pd-fmp-symbol", sym); } catch {}
    };
    const { data: live, loading, error, unsupported, hasKey } = useFMPStock(symbol);
    const s = live || D.stock;
    const prefix = s.currencyPrefix || "";
    const suffix = s.currencySuffix || "";
    const currency = s.currency || "GBp";
    const min = Math.min(...s.sparkline);
    const max = Math.max(...s.sparkline);
    const range = max - min || 1;
    const pts = s.sparkline.map((v, i) => {
      const x = (i / (s.sparkline.length - 1)) * 100;
      const y = 100 - ((v - min) / range) * 100;
      return `${x},${y}`;
    }).join(" ");
    const lineColor = s.up ? C.up : C.down;
    const fillStop = s.up ? "rgba(125,196,150,0.35)" : "rgba(224,136,120,0.35)";

    return (
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 2fr", gap: 32, alignItems: "stretch" }}>
        <div style={{ border: `1px solid ${C.lineSolid}`, padding: 32, background: C.bg }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 8,
            fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
            color: C.fgMuted, fontFamily: "var(--pd-sans)",
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: "50%",
              background: live ? C.up : C.gold,
              boxShadow: `0 0 8px ${live ? C.up : C.gold}`,
            }} />
            {live
              ? `${s.isLSE ? "LSE: PAT.L" : "OTC: PATRF"} · Live (FMP)`
              : loading
                ? "Loading live quote…"
                : hasKey && unsupported
                  ? `${symbol} not available via data provider — showing reference`
                  : hasKey && error
                    ? `FMP error: ${error}`
                    : "LSE: PAT · Reference data"}
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, margin: "12px 0 8px" }}>
            {prefix && <div style={{
              fontFamily: "var(--pd-display)", fontSize: 48, lineHeight: 1.2,
              color: C.fgMuted, fontWeight: 300,
            }}>{prefix}</div>}
            <div style={{
              fontFamily: "var(--pd-display)", fontSize: 96, lineHeight: 1,
              color: C.fg, letterSpacing: -3, fontWeight: 300,
            }}>{s.price}{suffix && <span style={{ fontSize: 48, color: C.fgMuted, marginLeft: 4 }}>{suffix}</span>}</div>
            <div style={{
              fontFamily: "var(--pd-sans)", fontSize: 18, color: C.fgMuted, fontWeight: 400,
            }}>{currency}</div>
          </div>

          {hasKey && (
            <div style={{
              display: "inline-flex", marginTop: 4,
              border: `1px solid ${C.lineSolid}`,
            }}>
              {[
                { id: "PATRF", label: "OTC · PATRF" },
                { id: "PAT.L", label: "LSE · PAT" },
              ].map((opt) => {
                const isActive = symbol === opt.id;
                return (
                  <button key={opt.id} onClick={() => pickSymbol(opt.id)} style={{
                    padding: "8px 14px", fontSize: 10, letterSpacing: 1.6,
                    textTransform: "uppercase", fontWeight: 600,
                    background: isActive ? C.gold : "transparent",
                    color: isActive ? C.bg : C.fgMuted,
                    border: 0, cursor: "pointer", fontFamily: "var(--pd-sans)",
                    transition: "all .15s",
                  }}>{opt.label}</button>
                );
              })}
            </div>
          )}
          <div style={{
            display: "inline-block", padding: "4px 10px",
            background: s.up ? "rgba(125,196,150,.15)" : "rgba(224,136,120,.15)",
            color: lineColor,
            fontSize: 13, fontFamily: "ui-monospace, monospace",
          }}>{s.change} ({s.changePct})</div>
          <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            {[
              ["Day high", `${prefix}${s.high}`],
              ["Day low", `${prefix}${s.low}`],
              ["Volume", s.volume],
              ["Prev close", `${prefix}${s.prevClose}`],
              ["Market cap", s.marketCap],
              [live ? "Exchange" : "US ADR (OTC)", live ? (s.exchange || "OTC") : "PATRF"],
            ].map(([k, v], i) => (
              <div key={i}>
                <div style={{ fontSize: 10, color: C.fgMuted, letterSpacing: 1.6, textTransform: "uppercase", fontFamily: "var(--pd-sans)" }}>{k}</div>
                <div style={{ fontSize: 15, color: C.fg, fontFamily: "ui-monospace, monospace", marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{
            marginTop: 28, fontSize: 10, color: C.fgDim,
            fontFamily: "ui-monospace, monospace", letterSpacing: 0.3,
          }}>As of {s.asOf || "latest available"}</div>
          <div style={{
            marginTop: 6, fontSize: 10, color: C.fgDim,
            fontFamily: "var(--pd-sans)", letterSpacing: 0.2, lineHeight: 1.5, maxWidth: 360,
          }}>Indicative price, delayed by at least {s.delayedMinutes || 15} minutes.</div>
          <div style={{ display: "flex", gap: 8, marginTop: 18, flexWrap: "wrap" }}>
            <a href={D.tradingview.chartUrl} target="_blank" rel="noreferrer" style={{
              padding: "9px 14px", border: `1px solid ${C.gold}`, color: C.gold,
              textDecoration: "none", fontSize: 10, letterSpacing: 1.8,
              textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--pd-sans)",
            }}>Chart ↗</a>
            <a href={D.tradingview.lseUrl} target="_blank" rel="noreferrer" style={{
              padding: "9px 14px", border: `1px solid ${C.lineSolid}`, color: C.fgMuted,
              textDecoration: "none", fontSize: 10, letterSpacing: 1.8,
              textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--pd-sans)",
            }}>LSE ↗</a>
            <a href={D.tradingview.otcChartUrl} target="_blank" rel="noreferrer" style={{
              padding: "9px 14px", border: `1px solid ${C.lineSolid}`, color: C.fgMuted,
              textDecoration: "none", fontSize: 10, letterSpacing: 1.8,
              textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--pd-sans)",
            }}>US OTC: PATRF ↗</a>
          </div>
        </div>

        <div style={{
          border: `1px solid ${C.lineSolid}`, padding: 32,
          background: `linear-gradient(180deg, ${C.bg} 0%, #0d100f 100%)`,
          position: "relative", display: "flex", flexDirection: "column",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
            <div style={{
              fontSize: 10, color: C.fgMuted, letterSpacing: 2,
              textTransform: "uppercase", fontFamily: "var(--pd-sans)",
            }}>{live ? "30-day trend · daily close" : "Intraday · 1-min bars"}</div>
            <div style={{ display: "flex", gap: 16 }}>
              {["1D", "5D", "1M", "6M", "1Y", "5Y"].map((p) => (
                <div key={p} style={{
                  fontSize: 11, color: p === "1D" ? C.gold : C.fgMuted,
                  fontFamily: "ui-monospace, monospace",
                  borderBottom: p === "1D" ? `1px solid ${C.gold}` : "none",
                  paddingBottom: 2, cursor: "default",
                }}>{p}</div>
              ))}
            </div>
          </div>
          <div style={{ position: "relative", flex: 1, minHeight: 340 }}>
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
              width: "100%", height: "100%", display: "block",
            }}>
              <defs>
                <linearGradient id="sp-dark-fill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor={lineColor} stopOpacity="0.35" />
                  <stop offset="100%" stopColor={lineColor} stopOpacity="0" />
                </linearGradient>
              </defs>
              {[0, 25, 50, 75, 100].map((y) => (
                <line key={y} x1="0" y1={y} x2="100" y2={y}
                  stroke={C.lineSolid} strokeWidth="0.2" />
              ))}
              <polygon points={`0,100 ${pts} 100,100`} fill="url(#sp-dark-fill)" />
              <polyline points={pts} fill="none" stroke={lineColor}
                strokeWidth="1.1" vectorEffect="non-scaling-stroke"
                strokeLinejoin="round" strokeLinecap="round" />
            </svg>
            {/* Y-axis labels */}
            <div style={{
              position: "absolute", right: 0, top: 0, bottom: 0,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              fontSize: 10, color: C.fgDim, fontFamily: "ui-monospace, monospace",
              paddingLeft: 8,
            }}>
              <div>{max.toFixed(2)}</div>
              <div>{((max + min) / 2).toFixed(2)}</div>
              <div>{min.toFixed(2)}</div>
            </div>
            {/* Last-price marker */}
            <div style={{
              position: "absolute",
              right: 32,
              top: `${100 - ((s.sparkline[s.sparkline.length - 1] - min) / range) * 100}%`,
              transform: "translate(0, -50%)",
              background: lineColor, color: C.bg,
              fontSize: 10, fontFamily: "ui-monospace, monospace",
              padding: "2px 6px", fontWeight: 700, letterSpacing: 0.3,
            }}>{prefix}{s.price}{suffix}</div>
          </div>
          <div style={{
            marginTop: 18, display: "flex", justifyContent: "space-between",
            fontSize: 10, color: C.fgDim, fontFamily: "ui-monospace, monospace",
          }}>
            {live
              ? <React.Fragment><span>30d ago</span><span>22d</span><span>15d</span><span>7d</span><span>Today</span></React.Fragment>
              : <React.Fragment><span>09:00</span><span>11:00</span><span>13:00</span><span>15:00</span><span>16:30</span></React.Fragment>}
          </div>
        </div>
      </div>
    );
  }

  function CalendarPanel() {
    return (
      <div style={{ display: "grid", gap: 1, background: C.lineSolid }}>
        {D.calendar.map((e, i) => (
          <div key={i} style={{
            background: C.bg, padding: "22px 28px",
            display: "grid", gridTemplateColumns: "200px 110px 1fr 80px",
            gap: 24, alignItems: "center",
          }}>
            <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 13, color: C.gold, letterSpacing: 0.6 }}>{e.date}</div>
            <div style={{
              fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
              padding: "4px 10px",
              background: e.type === "Legal" ? C.gold : "transparent",
              border: e.type === "Legal" ? `1px solid ${C.gold}` : `1px solid ${C.lineSolid}`,
              color: e.type === "Legal" ? C.bg : C.fgMuted,
              fontFamily: "var(--pd-sans)", justifySelf: "start", fontWeight: 700,
            }}>{e.type}</div>
            <div style={{ fontSize: 16, color: C.fg, fontFamily: "var(--pd-sans)" }}>{e.label}</div>
            <div style={{ fontSize: 11, color: C.fgMuted, fontFamily: "var(--pd-sans)", justifySelf: "end", letterSpacing: 1, textTransform: "uppercase" }}>
              Add to cal →
            </div>
          </div>
        ))}
      </div>
    );
  }

  function PresentationsPanel() {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        {D.presentations.map((p, i) => (
          <a key={i} href={p.url || "#"} target={p.url && p.url !== "#" ? "_blank" : undefined} rel="noreferrer"
            onClick={(e) => { if (!p.url || p.url === "#") e.preventDefault(); }}
            style={{
              display: "grid", gridTemplateColumns: "56px 1fr auto", gap: 20, alignItems: "center",
              padding: "24px 28px",
              background: p.featured ? "#151814" : C.bg,
              border: `1px solid ${p.featured ? C.gold : C.lineSolid}`,
              textDecoration: "none", transition: "border-color .15s",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = C.gold; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = p.featured ? C.gold : C.lineSolid; }}
          >
            <div style={{
              width: 56, height: 70,
              background: `linear-gradient(180deg, #1a1b16, #0d100f)`,
              border: `1px solid ${C.gold}`, color: C.gold,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 10, fontFamily: "ui-monospace, monospace", letterSpacing: 1.5,
            }}>PDF</div>
            <div>
              <div style={{ fontSize: 11, color: C.fgMuted, fontFamily: "ui-monospace, monospace", marginBottom: 6, letterSpacing: 0.4, display: "flex", gap: 10 }}>
                <span>{p.date}</span>
                {p.featured && <span style={{ color: C.gold, fontWeight: 700 }}>· FEATURED</span>}
              </div>
              <div style={{ fontSize: 16, color: C.fg, fontFamily: "var(--pd-sans)" }}>{p.title}</div>
            </div>
            <div style={{ fontSize: 11, color: C.gold, fontFamily: "var(--pd-sans)", letterSpacing: 1.4, textTransform: "uppercase" }}>
              {p.size} ↓
            </div>
          </a>
        ))}
      </div>
    );
  }

  function NewsStrip({ setPage }) {
    const { items } = useRnsArchive();
    const top = items.slice(0, 4);
    return (
      <section style={{ padding: "120px 48px" }}>
        <div style={{ maxWidth: 1360, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48 }}>
            <div>
              <Eyebrow>Latest</Eyebrow>
              <h2 style={{
                fontFamily: "var(--pd-display)", fontSize: 72, lineHeight: 1,
                margin: "20px 0 0", color: C.fg, fontWeight: 300, letterSpacing: -1.8,
              }}>Announcements.</h2>
            </div>
            <button onClick={() => setPage("news")} style={btnGhost}>All news →</button>
          </div>
          <div style={{ display: "grid", gap: 1, background: C.lineSolid }}>
            {top.map((n, i) => {
              const href = n.url || "https://www.investegate.co.uk/company/PAT";
              return (
                <a key={i} href={href} target="_blank" rel="noreferrer" style={{
                  background: C.bg, padding: "28px 32px",
                  display: "grid", gridTemplateColumns: "150px 110px 1fr 100px",
                  gap: 24, alignItems: "center",
                  textDecoration: "none", color: "inherit", transition: "background .12s",
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = "#101312"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = C.bg; }}
                >
                  <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 12, color: C.fgMuted, letterSpacing: 0.4 }}>{formatRnsDate(n.date)}</div>
                  <div style={{
                    fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                    padding: "3px 8px", border: `1px solid ${C.gold}`,
                    color: C.gold, justifySelf: "start", fontFamily: "var(--pd-sans)", fontWeight: 600,
                  }}>{n.tag}</div>
                  <div>
                    <div style={{ fontSize: 19, color: C.fg, fontFamily: "var(--pd-display)", fontWeight: 400, marginBottom: n.excerpt ? 6 : 0, letterSpacing: -0.3 }}>
                      {n.title}
                    </div>
                    {n.excerpt && (
                      <div style={{ fontSize: 13, color: C.fgMuted, fontFamily: "var(--pd-sans)", lineHeight: 1.5 }}>
                        {n.excerpt}
                      </div>
                    )}
                  </div>
                  <div style={{ fontSize: 11, color: C.gold, fontFamily: "var(--pd-sans)", justifySelf: "end", letterSpacing: 1.4, textTransform: "uppercase" }}>
                    {n.source === "OTC" ? "OTC ↗" : "RNS ↗"}
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  // ── Mailchimp subscribe ─────────────────────────────────────
  // Preferred path: POST to /api/subscribe — a same-origin endpoint in
  // _worker.js that holds the Mailchimp API key as a Cloudflare secret,
  // so no Mailchimp credentials ever reach the browser.
  // Fallback (local preview, where the worker isn't running): Mailchimp's
  // public JSONP form endpoint, if the u=/id= form params are configured.
  async function subscribeToMailchimp(email) {
    // 1) Server-side proxy — secrets stay on Cloudflare.
    try {
      const r = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      // 503 = worker reachable but secrets not configured; 404/405 = no
      // worker (local preview). Anything else is a real answer — use it.
      if (r.status !== 404 && r.status !== 405 && r.status !== 503) {
        return await r.json();
      }
    } catch {
      // Network-level failure — fall through to JSONP.
    }
    return subscribeViaJsonp(email);
  }

  function subscribeViaJsonp(email) {
    return new Promise((resolve) => {
      const cfg = window.PANTHERA_CONFIG || {};
      const u = cfg.mailchimpFormU;
      const id = cfg.mailchimpFormId;
      const dc = cfg.mailchimpDatacenter || "us17";
      if (!u || !id) {
        console.warn(
          "[mailchimp] mailchimpFormU / mailchimpFormId not set in config.js — " +
          "treating signup as a no-op success. Email:", email
        );
        setTimeout(() => resolve({ result: "success", msg: "ok-stub" }), 600);
        return;
      }
      const cb = `mc_cb_${Date.now()}_${Math.floor(Math.random() * 1e6)}`;
      let done = false;
      const cleanup = () => {
        if (s.parentNode) s.parentNode.removeChild(s);
        try { delete window[cb]; } catch { window[cb] = undefined; }
      };
      window[cb] = (resp) => {
        if (done) return;
        done = true;
        cleanup();
        resolve(resp || { result: "error", msg: "Empty response" });
      };
      const s = document.createElement("script");
      s.src =
        `https://${dc}.list-manage.com/subscribe/post-json` +
        `?u=${encodeURIComponent(u)}&id=${encodeURIComponent(id)}` +
        `&EMAIL=${encodeURIComponent(email)}&c=${cb}`;
      s.onerror = () => {
        if (done) return;
        done = true;
        cleanup();
        resolve({ result: "error", msg: "Network error reaching Mailchimp" });
      };
      document.body.appendChild(s);
      // Hard timeout — JSONP has no native one.
      setTimeout(() => {
        if (done) return;
        done = true;
        cleanup();
        resolve({ result: "error", msg: "Subscription timed out" });
      }, 12000);
    });
  }

  function SubscribeForm({ variant = "stacked" }) {
    // variant: "stacked" (CTA-style, centered) | "inline" (compact)
    const [email, setEmail] = useState("");
    const [status, setStatus] = useState("idle"); // idle | pending | success | error
    const [message, setMessage] = useState("");

    const submit = async (e) => {
      e.preventDefault();
      if (status === "pending") return;
      const value = email.trim();
      if (!/^\S+@\S+\.\S+$/.test(value)) {
        setStatus("error");
        setMessage("Please enter a valid email address.");
        return;
      }
      setStatus("pending");
      setMessage("");
      const resp = await subscribeToMailchimp(value);
      if (resp && resp.result === "success") {
        setStatus("success");
        setMessage("You're on the list. Watch your inbox for confirmation.");
        setEmail("");
      } else {
        setStatus("error");
        // Mailchimp returns HTML-formatted messages sometimes — strip tags.
        const raw = (resp && resp.msg) || "Something went wrong. Please try again.";
        setMessage(String(raw).replace(/<[^>]+>/g, "").trim());
      }
    };

    const isInline = variant === "inline";
    const maxW = isInline ? "100%" : 500;
    const align = isInline ? "left" : "center";

    return (
      <form onSubmit={submit} noValidate style={{ width: "100%" }}>
        <div style={{
          display: "flex", gap: 0, maxWidth: maxW,
          margin: isInline ? "0" : "0 auto",
        }}>
          <input
            type="email"
            required
            autoComplete="email"
            placeholder="your@email.com"
            value={email}
            onChange={(e) => { setEmail(e.target.value); if (status === "error") setStatus("idle"); }}
            disabled={status === "pending" || status === "success"}
            aria-label="Email address"
            style={{
              flex: 1, background: C.bg, border: `1px solid ${C.lineSolid}`,
              borderRight: 0, color: C.fg, padding: "16px 20px", fontSize: 14,
              fontFamily: "var(--pd-sans)", outline: "none", minWidth: 0,
            }}
          />
          <button
            type="submit"
            disabled={status === "pending" || status === "success"}
            style={{
              background: status === "success" ? "transparent" : C.gold,
              color: status === "success" ? C.gold : C.bg,
              border: `1px solid ${C.gold}`,
              padding: "16px 28px", fontSize: 12, letterSpacing: 2, textTransform: "uppercase",
              fontWeight: 700, fontFamily: "var(--pd-sans)",
              cursor: (status === "pending" || status === "success") ? "default" : "pointer",
              minWidth: 132, whiteSpace: "nowrap",
            }}
          >
            {status === "pending" ? "Sending…" : status === "success" ? "Subscribed ✓" : "Subscribe"}
          </button>
        </div>
        <div style={{
          marginTop: 14, minHeight: 18,
          fontFamily: "var(--pd-sans)", fontSize: 12, lineHeight: 1.5,
          textAlign: align, maxWidth: maxW, margin: isInline ? "14px 0 0" : "14px auto 0",
        }}>
          {status === "success" && (
            <span style={{ color: C.gold, letterSpacing: 0.3 }}>{message}</span>
          )}
          {status === "error" && (
            <span style={{ color: "#e89393", letterSpacing: 0.3 }}>{message}</span>
          )}
          {(status === "idle" || status === "pending") && (
            <span style={{
              color: C.fgDim, letterSpacing: 1.6, textTransform: "uppercase", fontSize: 10,
            }}>
              Unsubscribe at any time
            </span>
          )}
        </div>
      </form>
    );
  }

  function CTA({ setPage }) {
    return (
      <section style={{
        padding: "120px 48px", borderTop: `1px solid ${C.lineSolid}`,
        background: `linear-gradient(180deg, #0d100f 0%, #151814 100%)`,
        position: "relative", overflow: "hidden",
      }}>
        <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.18 }}
          viewBox="0 0 1400 500" preserveAspectRatio="xMidYMid slice">
          {Array.from({ length: 14 }).map((_, i) => (
            <circle key={i} cx="700" cy="250" r={60 + i * 40}
              stroke={C.gold} strokeWidth="0.5" fill="none" opacity={0.3 - i * 0.02} />
          ))}
        </svg>
        <div style={{ position: "relative", maxWidth: 1000, margin: "0 auto", textAlign: "center" }}>
          <Eyebrow>Stay informed</Eyebrow>
          <h2 style={{
            fontFamily: "var(--pd-display)", fontSize: 68, lineHeight: 1,
            margin: "24px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -1.8,
          }}>
            Follow the Journey!
          </h2>
          <p style={{
            fontSize: 17, color: C.fgMuted, fontFamily: "var(--pd-sans)",
            fontWeight: 300, maxWidth: 620, margin: "0 auto 40px", lineHeight: 1.55,
          }}>
            Receive updates on key milestones, hearing dates, and legal developments
            as this case progresses toward its December 2026 hearing.
          </p>
          <SubscribeForm variant="stacked" />
        </div>
      </section>
    );
  }

  function Footer({ setPage }) {
    return (
      <footer style={{
        background: "#06080700",
        padding: "72px 48px 36px", borderTop: `1px solid ${C.lineSolid}`,
        background: "#08090800",
      }}>
        <div style={{ background: "#06080700" }}>
          <div style={{ maxWidth: 1360, margin: "0 auto", background: "transparent" }}>
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 56, marginBottom: 56 }}>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <img src="favicon-192.png" alt="" width="47" height="47" style={{
                    display: "block", flexShrink: 0,
                  }} />
                  <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                    <div style={{ fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg, letterSpacing: 0.6, fontWeight: 400 }}>PANTHERA</div>
                    <div style={{ fontFamily: "var(--pd-sans)", fontSize: 10, color: C.gold, letterSpacing: 3, textTransform: "uppercase", fontWeight: 600 }}>Resources</div>
                  </div>
                </div>
                <p style={{ fontSize: 13, color: C.fgMuted, lineHeight: 1.55, fontFamily: "var(--pd-sans)", maxWidth: 360, marginTop: 20 }}>
                  Gold exploration and development across West Africa and India. Listed on
                  the London Stock Exchange (PAT) and traded in the US OTC market (PATRF).
                </p>
              </div>
              {[
                { h: "Company", items: [["About", "about"], ["Projects", "projects"], ["Arbitration", "arbitration"]] },
                { h: "Investors", items: [["Share price", "investors"], ["News", "news"], ["Presentations", "investors"], ["AIM Rule 26", "aim26"]] },
                { h: "Contact", items: [["London", "contact"], ["IR enquiries", "contact"]] },
              ].map((col, i) => (
                <div key={i}>
                  <Eyebrow>{col.h}</Eyebrow>
                  <div style={{ marginTop: 18, display: "grid", gap: 10 }}>
                    {col.items.map(([label, p], j) => (
                      <button key={j} onClick={() => setPage(p)} style={{
                        background: "none", border: 0, padding: 0, textAlign: "left",
                        fontSize: 13, color: C.fg, cursor: "pointer", fontFamily: "var(--pd-sans)",
                      }}>{label}</button>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ height: 1, background: C.lineSolid }} />
            <div style={{
              display: "flex", justifyContent: "space-between", marginTop: 24,
              fontSize: 11, color: C.fgDim, fontFamily: "var(--pd-sans)",
              letterSpacing: 1.2, textTransform: "uppercase",
            }}>
              <div>© 2026 Panthera Resources</div>
              <div>LSE: PAT · OTC: PATRF</div>
            </div>
          </div>
        </div>
      </footer>
    );
  }

  // ── Sub pages ────────────────────────────────────────────────
  function PersonCard({ person, accent }) {
    return (
      <div style={{
        background: accent ? "#151814" : C.bg,
        border: `1px solid ${accent ? C.gold : C.lineSolid}`,
        padding: 28, display: "flex", flexDirection: "column", width: "100%",
      }}>
        {person.photo ? (
          <div style={{
            width: "100%", aspectRatio: "1 / 1", overflow: "hidden", marginBottom: 22,
          }}>
            <img
              src={person.photo}
              alt={person.name}
              style={{
                width: "100%", height: "100%", objectFit: "cover",
                objectPosition: person.photoPos || "center top",
                display: "block", filter: "grayscale(8%)",
                ...(person.photoStyle || {}),
              }}
            />
          </div>
        ) : (
          <div style={{
            width: "100%", aspectRatio: "1 / 1",
            background: `repeating-linear-gradient(135deg, #1c1f1e, #1c1f1e 10px, #181b1a 10px, #181b1a 20px)`,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--pd-display)", fontSize: 56, color: accent ? C.goldBright : C.gold,
            marginBottom: 22, fontWeight: 300, letterSpacing: -1,
          }}>{person.init}</div>
        )}
        <div style={{ fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg, fontWeight: 400, letterSpacing: -0.3 }}>
          {person.name}
        </div>
        <div style={{
          fontSize: 11, color: accent ? C.gold : C.fgMuted,
          fontFamily: "var(--pd-sans)", marginTop: 6, letterSpacing: 1.6, textTransform: "uppercase", fontWeight: 600,
        }}>
          {person.role}
        </div>
        {person.credentials && (
          <div style={{
            fontSize: 11, color: C.fgDim, fontFamily: "ui-monospace, monospace",
            marginTop: 6, letterSpacing: 0.3,
          }}>{person.credentials}</div>
        )}
        {person.bio && (
          <p style={{
            marginTop: 16, fontSize: 13, lineHeight: 1.55,
            color: C.fgMuted, fontFamily: "var(--pd-sans)",
          }}>{person.bio}</p>
        )}
      </div>
    );
  }

  function AboutPage({ setPage }) {
    return (
      <div>
        <section style={{ padding: "100px 48px 40px", maxWidth: 1360, margin: "0 auto" }}>
          <Eyebrow>About</Eyebrow>
          <h1 style={{
            fontFamily: "var(--pd-display)", fontSize: 100, lineHeight: 0.95,
            margin: "28px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -2.6,
            maxWidth: 1200,
          }}>
            A gold explorer with an <span style={{ color: C.gold, fontStyle: "italic" }}>asymmetric</span> legal position.
          </h1>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: C.fgMuted,
            maxWidth: 820, fontFamily: "var(--pd-sans)", fontWeight: 300,
          }}>
            Panthera Resources PLC was incorporated in England and Wales on
            8 September 2017 as the holding company for Indo Gold Pty Ltd — an
            Australian-registered subsidiary whose principal asset is the Bhukia Gold
            Project in Rajasthan, India. In May 2025 IGPL filed its Memorial seeking
            <strong style={{ color: C.fg, fontWeight: 500 }}> US$1.58 billion</strong> in damages from the Republic of India
            under the 1999 Australia–India Bilateral Investment Treaty. An active gold
            exploration portfolio across Mali and Burkina Faso runs alongside the case.
          </p>
        </section>
        <section style={{ padding: "40px 48px 100px", maxWidth: 1360, margin: "0 auto" }}>
          <PH label="Aerial image — operations team on site" h={480} />
        </section>
        <section style={{ background: "#0d100f", padding: "100px 48px", borderTop: `1px solid ${C.lineSolid}` }}>
          <div style={{ maxWidth: 1360, margin: "0 auto" }}>
            <Eyebrow>Leadership</Eyebrow>
            <h2 style={{ fontFamily: "var(--pd-display)", fontSize: 56, margin: "20px 0 12px", color: C.fg, fontWeight: 300, letterSpacing: -1.4 }}>
              Board of Directors.
            </h2>
            <p style={{ fontSize: 14, color: C.fgMuted, fontFamily: "var(--pd-sans)", maxWidth: 720, marginBottom: 40 }}>
              Decades of combined experience across resource exploration, project finance,
              and complex emerging-market legal matters.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
              {D.board.map((p, i) => (
                <div key={p.name} style={{ flex: "0 1 calc((100% - 40px) / 3)", maxWidth: "calc((100% - 40px) / 3)", display: "flex" }}>
                  <PersonCard person={p} accent={i === 1} />
                </div>
              ))}
            </div>

            <Eyebrow>Senior management</Eyebrow>
            <h2 style={{ fontFamily: "var(--pd-display)", fontSize: 40, margin: "20px 0 32px", color: C.fg, fontWeight: 300, letterSpacing: -0.8 }}>
              The people running the company day-to-day.
            </h2>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
              {D.management.map((p) => (
                <div key={p.name} style={{ flex: "0 1 calc((100% - 40px) / 3)", maxWidth: "calc((100% - 40px) / 3)", display: "flex" }}>
                  <PersonCard person={p} />
                </div>
              ))}
            </div>
          </div>
        </section>
        <Footer setPage={setPage} />
      </div>
    );
  }

  function ProjectsPage({ setPage }) {
    return (
      <div>
        <section style={{ padding: "100px 48px 40px", maxWidth: 1360, margin: "0 auto" }}>
          <Eyebrow>Portfolio</Eyebrow>
          <h1 style={{
            fontFamily: "var(--pd-display)", fontSize: 100, lineHeight: 0.95,
            margin: "28px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -2.6,
          }}>One flagship claim. Four exploration projects.</h1>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: C.fgMuted,
            maxWidth: 780, fontFamily: "var(--pd-sans)", fontWeight: 300,
          }}>
            Bhukia in India is the subject of the US$1.58B treaty claim. Bassala, Kalaka,
            Bido, and Cascades in West Africa are active exploration assets with maiden
            resources and high-grade drill intercepts.
          </p>
        </section>
        <section style={{ padding: "20px 48px 120px", maxWidth: 1360, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
            {D.projects.filter((p) => p.id !== "bhukia").map((p) => {
              const isBhukia = p.id === "bhukia";
              const clickable = !!p.detail || isBhukia;
              const targetPage = isBhukia ? "arbitration" : (p.detail ? `project-${p.id}` : null);
              return (
              <div key={p.id}
                onClick={clickable ? () => setPage(targetPage) : undefined}
                style={{
                  border: `1px solid ${p.id === "bhukia" ? C.gold : C.lineSolid}`,
                  background: p.id === "bhukia" ? "#151814" : "#0d100f",
                  padding: 36, display: "flex", flexDirection: "column", gap: 18,
                  cursor: clickable ? "pointer" : "default",
                  transition: "background .2s, border-color .2s, transform .2s",
                }}
                onMouseEnter={clickable ? (e) => {
                  e.currentTarget.style.background = isBhukia ? "#1a1d18" : "#141716";
                  e.currentTarget.style.borderColor = C.gold;
                } : undefined}
                onMouseLeave={clickable ? (e) => {
                  e.currentTarget.style.background = p.id === "bhukia" ? "#151814" : "#0d100f";
                  e.currentTarget.style.borderColor = p.id === "bhukia" ? C.gold : C.lineSolid;
                } : undefined}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <div>
                    <Eyebrow>{p.country} · {p.region}</Eyebrow>
                    <div style={{
                      fontFamily: "var(--pd-display)", fontSize: 48, color: C.fg,
                      margin: "12px 0 0", fontWeight: 300, letterSpacing: -1,
                    }}>{p.name}</div>
                  </div>
                  <div style={{
                    fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                    padding: "4px 10px", border: `1px solid ${C.gold}`, color: C.gold,
                    fontFamily: "var(--pd-sans)", fontWeight: 600,
                  }}>{p.status}</div>
                </div>
                <RotatingImage images={p.images} label={`site imagery · ${p.name}`} h={180} />
                <div style={{ display: "grid", gap: 12, marginTop: 4 }}>
                  <KV k="Resource" v={p.resource} />
                  <KV k="Commodity" v={p.type} />
                </div>
                <p style={{ fontSize: 13, color: C.fgMuted, lineHeight: 1.55, fontFamily: "var(--pd-sans)" }}>{p.note}</p>
                {p.highlights && (
                  <div style={{
                    display: "grid", gap: 6, paddingTop: 12,
                    borderTop: `1px solid ${C.lineSolid}`,
                  }}>
                    <div style={{
                      fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase",
                      color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
                    }}>Highlights</div>
                    {p.highlights.map((h, i) => (
                      <div key={i} style={{
                        display: "grid", gridTemplateColumns: "16px 1fr", gap: 8,
                        fontSize: 12, color: C.fg, lineHeight: 1.5,
                        fontFamily: "var(--pd-sans)",
                      }}>
                        <span style={{ color: C.gold, fontSize: 10, marginTop: 3 }}>◆</span>
                        <span>{h}</span>
                      </div>
                    ))}
                  </div>
                )}
                {clickable && (
                  <div style={{
                    marginTop: "auto", paddingTop: 16, display: "flex",
                    justifyContent: "space-between", alignItems: "center",
                    borderTop: `1px solid ${C.lineSolid}`,
                    fontSize: 11, letterSpacing: 2, textTransform: "uppercase",
                    fontFamily: "var(--pd-sans)", fontWeight: 600, color: C.gold,
                  }}>
                    <span>{isBhukia ? "View arbitration claim" : "View project"}</span>
                    <span style={{ fontFamily: "var(--pd-display)", fontSize: 22, fontWeight: 300 }}>→</span>
                  </div>
                )}
              </div>
            );})}
          </div>
        </section>
        <Footer setPage={setPage} />
      </div>
    );
  }

  function ProjectDetailPage({ setPage, projectId }) {
    const p = D.projects.find((x) => x.id === projectId);
    if (!p || !p.detail) {
      return (
        <div>
          <section style={{ padding: "140px 48px", maxWidth: 1080, margin: "0 auto" }}>
            <Eyebrow>Project not found</Eyebrow>
            <h1 style={{
              fontFamily: "var(--pd-display)", fontSize: 72, lineHeight: 1,
              margin: "20px 0 24px", color: C.fg, fontWeight: 300, letterSpacing: -1.8,
            }}>That project doesn't have a detail page yet.</h1>
            <button onClick={() => setPage("projects")} style={btnGhost}>
              ← Back to projects
            </button>
          </section>
          <Footer setPage={setPage} />
        </div>
      );
    }
    const d = p.detail;
    const sectionStyle = { padding: "60px 48px", maxWidth: 1200, margin: "0 auto" };
    const bodyText = {
      fontSize: 15, lineHeight: 1.7, color: C.fgMuted,
      fontFamily: "var(--pd-sans)", fontWeight: 300,
    };
    const otherProjects = D.projects.filter((x) => x.id !== p.id && x.detail);

    return (
      <div>
        {/* ── Breadcrumb / back ───────────────────────────────── */}
        <section style={{ padding: "32px 48px 0", maxWidth: 1200, margin: "0 auto" }}>
          <button onClick={() => setPage("projects")} style={{
            background: "transparent", border: "none", color: C.fgMuted, cursor: "pointer",
            fontSize: 11, letterSpacing: 2, textTransform: "uppercase",
            fontFamily: "var(--pd-sans)", fontWeight: 500, padding: 0,
          }}
            onMouseEnter={(e) => { e.currentTarget.style.color = C.gold; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = C.fgMuted; }}
          >
            ← Projects / {p.name}
          </button>
        </section>

        {/* ── Hero ─────────────────────────────────────────────── */}
        <section style={{ padding: "48px 48px 32px", maxWidth: 1200, margin: "0 auto" }}>
          <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 24 }}>
            <Eyebrow>{p.country} · {p.region}</Eyebrow>
            <div style={{
              fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
              padding: "4px 10px", border: `1px solid ${C.gold}`, color: C.gold,
              fontFamily: "var(--pd-sans)", fontWeight: 600,
            }}>{p.status}</div>
          </div>
          <h1 style={{
            fontFamily: "var(--pd-display)", fontSize: 128, lineHeight: 0.95,
            margin: "0 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -3.2,
          }}>{p.name}</h1>
          <p style={{
            fontSize: 22, lineHeight: 1.45, color: C.fg, maxWidth: 880,
            fontFamily: "var(--pd-sans)", fontWeight: 300, margin: 0,
          }}>{d.tagline}</p>
        </section>

        {/* ── Hero stat strip ──────────────────────────────────── */}
        <section style={{ padding: "20px 48px 0", maxWidth: 1200, margin: "0 auto" }}>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
            border: `1px solid ${C.lineSolid}`, background: "#0d100f",
          }}>
            {[
              ["Commodity", p.type],
              ["Resource", p.resource],
              ["Location", `${p.country}`],
              ["Stage", p.status],
            ].map(([k, v], i) => (
              <div key={i} style={{
                padding: "24px 28px",
                borderRight: i < 3 ? `1px solid ${C.lineSolid}` : "none",
              }}>
                <div style={{
                  fontSize: 10, letterSpacing: 1.8, textTransform: "uppercase",
                  color: C.fgMuted, fontFamily: "var(--pd-sans)", fontWeight: 500,
                  marginBottom: 8,
                }}>{k}</div>
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg,
                  fontWeight: 300, letterSpacing: -0.4, lineHeight: 1.15,
                }}>{v}</div>
              </div>
            ))}
          </div>
        </section>

        {/* ── Imagery placeholder ──────────────────────────────── */}
        <section style={{ padding: "32px 48px", maxWidth: 1200, margin: "0 auto" }}>
          <RotatingImage images={p.images} label={`hero imagery · ${p.name} · ${p.region}`} h={360} />
        </section>

        {/* ── Snapshot ─────────────────────────────────────────── */}
        <section style={sectionStyle}>
          <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 64 }}>
            <div>
              <Eyebrow>Project snapshot</Eyebrow>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 36, lineHeight: 1.05,
                color: C.fg, margin: "20px 0 0", fontWeight: 300, letterSpacing: -0.8,
              }}>Investor summary</div>
            </div>
            <div>
              <p style={{ ...bodyText, fontSize: 17, color: C.fg, marginTop: 0 }}>
                {d.snapshot}
              </p>
              <div style={{
                marginTop: 32, display: "grid", gap: 12,
                borderTop: `1px solid ${C.lineSolid}`, paddingTop: 24,
              }}>
                {d.snapshotBullets.map((b, i) => (
                  <div key={i} style={{
                    display: "grid", gridTemplateColumns: "20px 1fr", gap: 12,
                    fontSize: 15, color: C.fg, lineHeight: 1.55,
                    fontFamily: "var(--pd-sans)", fontWeight: 400,
                  }}>
                    <span style={{ color: C.gold, fontSize: 12, marginTop: 4 }}>◆</span>
                    <span>{b}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* ── Current status ──────────────────────────────────── */}
        <section style={sectionStyle}>
          <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 64 }}>
            <div>
              <Eyebrow>Current status</Eyebrow>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 36, lineHeight: 1.05,
                color: C.fg, margin: "20px 0 0", fontWeight: 300, letterSpacing: -0.8,
              }}>Where we are</div>
            </div>
            <p style={{ ...bodyText, marginTop: 0 }}>{d.currentStatus}</p>
          </div>
        </section>

        {/* ── Key facts table ──────────────────────────────────── */}
        <section style={sectionStyle}>
          <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 64 }}>
            <div>
              <Eyebrow>Key facts</Eyebrow>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 36, lineHeight: 1.05,
                color: C.fg, margin: "20px 0 0", fontWeight: 300, letterSpacing: -0.8,
              }}>At a glance</div>
            </div>
            <div style={{ border: `1px solid ${C.lineSolid}` }}>
              {d.keyFacts.map(([k, v], i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "200px 1fr", gap: 32,
                  padding: "20px 28px",
                  borderTop: i === 0 ? "none" : `1px solid ${C.lineSolid}`,
                  background: i % 2 === 0 ? "#0d100f" : "transparent",
                }}>
                  <div style={{
                    fontSize: 11, letterSpacing: 1.8, textTransform: "uppercase",
                    color: C.fgMuted, fontFamily: "var(--pd-sans)", fontWeight: 600,
                    paddingTop: 3,
                  }}>{k}</div>
                  <div style={{
                    fontSize: 15, color: C.fg, fontFamily: "var(--pd-sans)",
                    lineHeight: 1.5, fontWeight: 400,
                  }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── Catalysts ────────────────────────────────────────── */}
        <section style={sectionStyle}>
          <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 64 }}>
            <div>
              <Eyebrow>Near-term catalysts</Eyebrow>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 36, lineHeight: 1.05,
                color: C.fg, margin: "20px 0 0", fontWeight: 300, letterSpacing: -0.8,
              }}>What to watch</div>
            </div>
            <div style={{ display: "grid", gap: 0 }}>
              {d.catalysts.map((c, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "60px 1fr", gap: 24,
                  padding: "20px 0",
                  borderTop: `1px solid ${C.lineSolid}`,
                  borderBottom: i === d.catalysts.length - 1 ? `1px solid ${C.lineSolid}` : "none",
                }}>
                  <div style={{
                    fontFamily: "var(--pd-display)", fontSize: 26, color: C.gold,
                    fontWeight: 300, letterSpacing: -0.4,
                  }}>{String(i + 1).padStart(2, "0")}</div>
                  <div style={{
                    fontSize: 16, color: C.fg, fontFamily: "var(--pd-sans)",
                    lineHeight: 1.5, fontWeight: 400, alignSelf: "center",
                  }}>{c}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── Technical divider ────────────────────────────────── */}
        <section style={{ padding: "80px 48px 32px", maxWidth: 1200, margin: "0 auto" }}>
          <div style={{
            display: "flex", alignItems: "baseline", gap: 24,
            borderBottom: `1px solid ${C.gold}`, paddingBottom: 24,
          }}>
            <Eyebrow>Technical detail</Eyebrow>
            <div style={{
              fontFamily: "var(--pd-display)", fontSize: 48, color: C.fg,
              fontWeight: 300, letterSpacing: -1.2, lineHeight: 1,
            }}>For mining investors</div>
          </div>
        </section>

        {/* ── Technical sections ───────────────────────────────── */}
        <section style={{ padding: "0 48px 60px", maxWidth: 1200, margin: "0 auto" }}>
          <div style={{ display: "grid", gap: 48 }}>
            {d.sections.map((s, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "320px 1fr", gap: 64,
              }}>
                <div>
                  <div style={{
                    fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                    color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
                    marginBottom: 12,
                  }}>{String(i + 1).padStart(2, "0")} / {String(d.sections.length).padStart(2, "0")}</div>
                  <div style={{
                    fontFamily: "var(--pd-display)", fontSize: 28, lineHeight: 1.1,
                    color: C.fg, fontWeight: 300, letterSpacing: -0.6,
                  }}>{s.heading}</div>
                </div>
                <p style={{ ...bodyText, marginTop: 0 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </section>

        {/* ── Qualified person ─────────────────────────────────── */}
        <section style={{ padding: "60px 48px", maxWidth: 1200, margin: "0 auto" }}>
          <div style={{
            background: "#0d100f", border: `1px solid ${C.lineSolid}`,
            padding: 36,
          }}>
            <Eyebrow>Qualified person statement</Eyebrow>
            <p style={{
              fontSize: 13, lineHeight: 1.65, color: C.fgMuted,
              fontFamily: "var(--pd-sans)", fontWeight: 300,
              margin: "16px 0 0", maxWidth: 900,
            }}>{d.qualifiedPerson}</p>
          </div>
        </section>

        {/* ── Other projects ───────────────────────────────────── */}
        {otherProjects.length > 0 && (
          <section style={{ padding: "60px 48px 80px", maxWidth: 1200, margin: "0 auto" }}>
            <div style={{
              display: "flex", justifyContent: "space-between",
              alignItems: "end", marginBottom: 32,
            }}>
              <div>
                <Eyebrow>Continue exploring</Eyebrow>
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 44, color: C.fg,
                  margin: "16px 0 0", fontWeight: 300, letterSpacing: -1,
                }}>Other projects</div>
              </div>
              <button onClick={() => setPage("projects")} style={btnGhost}>
                All projects →
              </button>
            </div>
            <div style={{
              display: "grid", gridTemplateColumns: `repeat(${otherProjects.length}, 1fr)`, gap: 20,
            }}>
              {otherProjects.map((o) => (
                <div key={o.id}
                  onClick={() => setPage(`project-${o.id}`)}
                  style={{
                    border: `1px solid ${C.lineSolid}`, background: "#0d100f",
                    padding: 28, cursor: "pointer",
                    transition: "background .2s, border-color .2s",
                    display: "flex", flexDirection: "column", gap: 16,
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = "#141716";
                    e.currentTarget.style.borderColor = C.gold;
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = "#0d100f";
                    e.currentTarget.style.borderColor = C.lineSolid;
                  }}
                >
                  <Eyebrow>{o.country}</Eyebrow>
                  <div style={{
                    fontFamily: "var(--pd-display)", fontSize: 36, color: C.fg,
                    fontWeight: 300, letterSpacing: -0.8, lineHeight: 1,
                  }}>{o.name}</div>
                  <div style={{
                    fontSize: 13, color: C.fgMuted, fontFamily: "var(--pd-sans)",
                    lineHeight: 1.5,
                  }}>{o.resource}</div>
                  <div style={{
                    marginTop: "auto", paddingTop: 16,
                    borderTop: `1px solid ${C.lineSolid}`,
                    fontSize: 11, letterSpacing: 2, textTransform: "uppercase",
                    fontFamily: "var(--pd-sans)", fontWeight: 600, color: C.gold,
                    display: "flex", justifyContent: "space-between",
                  }}>
                    <span>View →</span>
                    <span>{o.status}</span>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        <Footer setPage={setPage} />
      </div>
    );
  }

  function InvestorsPage({ setPage }) {
    return (
      <div>
        <section style={{ padding: "100px 48px 40px", maxWidth: 1360, margin: "0 auto" }}>
          <Eyebrow>Investor relations</Eyebrow>
          <h1 style={{
            fontFamily: "var(--pd-display)", fontSize: 100, lineHeight: 0.95,
            margin: "28px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -2.6,
          }}>Investor Resources.</h1>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: C.fgMuted,
            maxWidth: 780, fontFamily: "var(--pd-sans)", fontWeight: 300,
          }}>
            Live share price, financial calendar, corporate presentations, and the
            shareholder-services you need.
          </p>
        </section>
        <InvestorHub setPage={setPage} />
        <VideoSection />
        <section style={{ padding: "60px 48px 20px", maxWidth: 1360, margin: "0 auto" }}>
          <button onClick={() => setPage("aim26")} style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            width: "100%", padding: "28px 36px", gap: 24,
            background: "#151814",
            border: `1px solid ${C.gold}`,
            cursor: "pointer", textAlign: "left", fontFamily: "inherit",
            transition: "background .15s",
          }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#1a1d18"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "#151814"; }}
          >
            <div>
              <div style={{
                fontSize: 10, letterSpacing: 2.4, textTransform: "uppercase",
                color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
              }}>AIM Rule 26 disclosures</div>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 32, lineHeight: 1.1,
                color: C.fg, fontWeight: 300, letterSpacing: -0.6, marginTop: 8,
              }}>
                Full AIM Rule 26 information & stock disclosures
              </div>
              <div style={{
                fontSize: 13, color: C.fgMuted, fontFamily: "var(--pd-sans)",
                marginTop: 8, lineHeight: 1.5,
              }}>
                Corporate governance · advisers · registered offices · share capital · significant shareholders
              </div>
            </div>
            <div style={{
              fontFamily: "var(--pd-display)", fontSize: 36, color: C.gold,
              fontWeight: 300, lineHeight: 1,
            }}>→</div>
          </button>
        </section>
        <section style={{ padding: "20px 48px 120px", maxWidth: 1360, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
            <div style={{ border: `1px solid ${C.lineSolid}`, padding: 36 }}>
              <Eyebrow>Shareholder services</Eyebrow>
              <h3 style={{ fontFamily: "var(--pd-display)", fontSize: 32, margin: "16px 0 20px", color: C.fg, fontWeight: 300, letterSpacing: -0.6 }}>
                {D.registrar.name}
              </h3>
              <div style={{ fontSize: 14, color: C.fgMuted, lineHeight: 1.7, fontFamily: "var(--pd-sans)" }}>
                {D.registrar.lines.map((l, i) => <div key={i}>{l}</div>)}
                <div style={{ marginTop: 14 }}>
                  <span style={{ color: C.fgDim, letterSpacing: 1.4, textTransform: "uppercase", fontSize: 10, marginRight: 8 }}>Tel</span>
                  {D.registrar.phone}
                </div>
                <div style={{ marginTop: 6 }}>
                  <a href={D.registrar.website} target="_blank" rel="noreferrer" style={{ color: C.gold, textDecoration: "none" }}>
                    {D.registrar.website.replace(/^https?:\/\//, "")} ↗
                  </a>
                </div>
              </div>
              <p style={{ marginTop: 20, fontSize: 12, color: C.fgDim, fontFamily: "var(--pd-sans)", lineHeight: 1.55 }}>
                {D.registrar.notes}
              </p>
            </div>
            <div style={{ border: `1px solid ${C.lineSolid}`, padding: 36 }}>
              <Eyebrow>Share capital</Eyebrow>
              <h3 style={{ fontFamily: "var(--pd-display)", fontSize: 32, margin: "16px 0 20px", color: C.fg, fontWeight: 300, letterSpacing: -0.6 }}>
                {D.shareCapital.sharesInIssue} shares in issue
              </h3>
              <div style={{ display: "grid", gap: 10, fontSize: 13, color: C.fgMuted, fontFamily: "var(--pd-sans)" }}>
                <KV k="Par value" v={D.shareCapital.parValue} />
                <KV k="Not in public hands" v={D.shareCapital.notInPublicHands} />
                <KV k="Significant holder" v={`${D.shareCapital.significantHolders[0].name} · ${D.shareCapital.significantHolders[0].pct}`} />
                <KV k="Unlisted options" v={`${D.shareCapital.options.length} tranches`} />
                <KV k="Outstanding warrants" v={D.shareCapital.warrants.length ? `${D.shareCapital.warrants[0].count} @ ${D.shareCapital.warrants[0].strike}` : "None outstanding"} />
              </div>
              <p style={{ marginTop: 20, fontSize: 11, color: C.fgDim, fontFamily: "ui-monospace, monospace", letterSpacing: 0.3 }}>
                As at {D.shareCapital.asOf} ·{" "}
                <button onClick={() => setPage("aim26")} style={{
                  background: "none", border: 0, padding: 0, color: C.gold,
                  fontFamily: "inherit", fontSize: "inherit", cursor: "pointer", letterSpacing: "inherit",
                }}>see AIM Rule 26 →</button>
              </p>
            </div>
          </div>
        </section>
        <CTA setPage={setPage} />
        <Footer setPage={setPage} />
      </div>
    );
  }

  // ── News data helpers ──────────────────────────────────────
  // Merges the live RNS feed (when the Cloudflare worker is deployed)
  // with the baked archive in news-archive.js. The archive is the
  // offline-safe canon; live entries override matches by URL or
  // (date+title).
  function useRnsArchive() {
    const baked = (window.PANTHERA_ARCHIVE && window.PANTHERA_ARCHIVE.rns) || [];
    const highlights = (window.PANTHERA_ARCHIVE && window.PANTHERA_ARCHIVE.rnsHighlights) || [];
    const [live, setLive] = useState(null);
    const [liveStatus, setLiveStatus] = useState("idle"); // idle | loading | live | offline

    useEffect(() => {
      let cancelled = false;
      setLiveStatus("loading");
      const ctl = new AbortController();
      const timeout = setTimeout(() => ctl.abort(), 8000);
      // Live feed: the Cloudflare worker (_worker.js) pulls Panthera's
      // RNS announcements from Investegate (UK) and returns them already
      // normalised to our news shape. On static previews without the
      // worker this 404s harmlessly, and if Investegate is unreachable
      // it returns an empty list — either way we silently fall back to
      // the curated RNS archive below.
      fetch("/api/news?symbol=PAT", { signal: ctl.signal })
        .then((r) => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)))
        .then((data) => {
          if (cancelled) return;
          const items = Array.isArray(data) ? data : (data && data.items) || [];
          if (items.length) {
            setLive(items);
            setLiveStatus("live");
          } else {
            setLiveStatus("offline");
          }
        })
        .catch(() => { if (!cancelled) setLiveStatus("offline"); })
        .finally(() => clearTimeout(timeout));
      return () => { cancelled = true; ctl.abort(); };
    }, []);

    // Merge: live entries take precedence, then add any baked entries
    // whose (date+title) aren't already in the live set.
    const merged = (() => {
      const out = [];
      const seen = new Set();
      const keyOf = (n) => (n.url || `${n.date}|${n.title}`).toLowerCase();
      const push = (n) => {
        const k = keyOf(n);
        if (seen.has(k)) return;
        seen.add(k);
        out.push(n);
      };
      (live || []).forEach(push);
      baked.forEach(push);
      highlights.forEach(push);
      return out.sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0));
    })();

    return { items: merged, liveStatus };
  }

  function formatRnsDate(iso) {
    if (!iso) return "";
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return iso;
    return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
  }

  function NewsPage({ setPage }) {
    const { items: allItems, liveStatus } = useRnsArchive();
    const [tag, setTag] = useState("All");
    const [year, setYear] = useState("All");
    const [query, setQuery] = useState("");
    const [showCount, setShowCount] = useState(25);

    const tagFilters = ["All", "Arbitration", "Operations", "Financial", "Regulatory", "Shareholders"];
    const years = ["All", ...Array.from(new Set(allItems.map((n) => (n.date || "").slice(0, 4)).filter(Boolean))).sort().reverse()];

    const filtered = allItems.filter((n) => {
      if (tag !== "All" && n.tag !== tag) return false;
      if (year !== "All" && !(n.date || "").startsWith(year)) return false;
      if (query) {
        const q = query.toLowerCase();
        const hay = `${n.title || ""} ${n.excerpt || ""}`.toLowerCase();
        if (!hay.includes(q)) return false;
      }
      return true;
    });

    const visible = filtered.slice(0, showCount);
    const hasMore = filtered.length > showCount;

    // Tag → coloured pill
    const tagColor = (t) => ({
      Arbitration:  C.gold,
      Operations:   "#7dc496",
      Financial:    "#e9c878",
      Regulatory:   "#9bb9d9",
      Shareholders: "#c89e6e",
      Media:        "#c4a0c8",
    }[t] || C.fgMuted);

    // Group visible items by year for section headers
    const yearGroups = [];
    let currentYear = null;
    visible.forEach((n) => {
      const y = (n.date || "").slice(0, 4);
      if (y !== currentYear) {
        currentYear = y;
        yearGroups.push({ year: y, items: [] });
      }
      yearGroups[yearGroups.length - 1].items.push(n);
    });

    return (
      <div>
        <section style={{ padding: "100px 48px 20px", maxWidth: 1360, margin: "0 auto" }}>
          <Eyebrow>Newsroom</Eyebrow>
          <h1 style={{
            fontFamily: "var(--pd-display)", fontSize: 100, lineHeight: 0.95,
            margin: "28px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -2.6,
          }}>Announcements.</h1>
          <p style={{
            fontSize: 17, lineHeight: 1.55, color: C.fgMuted,
            maxWidth: 720, fontFamily: "var(--pd-sans)", fontWeight: 300, marginBottom: 32,
          }}>
            Regulatory News Service announcements filed by Panthera Resources Plc (AIM: PAT).
            {" "}
            {liveStatus === "live" && (
              <span style={{ color: C.up, fontWeight: 500 }}>
                · Live RNS feed connected
              </span>
            )}
            {liveStatus === "offline" && (
              <span style={{ color: C.fgDim }}>
                · Showing curated RNS archive
              </span>
            )}
          </p>

          {/* Tag filter */}
          <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
            {tagFilters.map((f) => {
              const active = tag === f;
              return (
                <button key={f} onClick={() => { setTag(f); setShowCount(25); }} style={{
                  padding: "8px 16px", fontSize: 11, letterSpacing: 1.8, textTransform: "uppercase",
                  border: `1px solid ${active ? C.gold : C.lineSolid}`,
                  background: active ? C.gold : "transparent",
                  color: active ? C.bg : C.fgMuted,
                  cursor: "pointer", fontFamily: "var(--pd-sans)", fontWeight: 600,
                }}>{f}</button>
              );
            })}
          </div>

          {/* Year + search */}
          <div style={{ display: "flex", gap: 8, marginBottom: 28, flexWrap: "wrap", alignItems: "center" }}>
            <div style={{
              fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
              color: C.fgDim, marginRight: 4, fontFamily: "var(--pd-sans)", fontWeight: 600,
            }}>Year</div>
            {years.map((y) => {
              const active = year === y;
              return (
                <button key={y} onClick={() => { setYear(y); setShowCount(25); }} style={{
                  padding: "6px 12px", fontSize: 11, letterSpacing: 0.4,
                  border: `1px solid ${active ? C.gold : C.lineSolid}`,
                  background: active ? "rgba(212,175,92,0.12)" : "transparent",
                  color: active ? C.gold : C.fgMuted,
                  cursor: "pointer", fontFamily: "ui-monospace, monospace",
                }}>{y}</button>
              );
            })}
            <input
              type="search"
              placeholder="Search headlines…"
              value={query}
              onChange={(e) => { setQuery(e.target.value); setShowCount(25); }}
              style={{
                marginLeft: "auto", padding: "8px 14px",
                background: C.bg, border: `1px solid ${C.lineSolid}`,
                color: C.fg, fontSize: 13, fontFamily: "var(--pd-sans)",
                outline: "none", minWidth: 220,
              }}
            />
          </div>
          <div style={{
            fontSize: 11, letterSpacing: 1.6, textTransform: "uppercase",
            color: C.fgDim, fontFamily: "var(--pd-sans)", fontWeight: 500,
          }}>
            {filtered.length} announcement{filtered.length === 1 ? "" : "s"}
            {tag !== "All" ? ` · ${tag}` : ""}
            {year !== "All" ? ` · ${year}` : ""}
            {query ? ` · matching "${query}"` : ""}
          </div>
        </section>

        <section style={{ padding: "20px 48px 60px", maxWidth: 1360, margin: "0 auto" }}>
          {filtered.length === 0 && (
            <div style={{
              padding: "60px 32px", textAlign: "center", color: C.fgMuted,
              border: `1px solid ${C.lineSolid}`, fontFamily: "var(--pd-sans)",
            }}>
              No announcements match those filters.
            </div>
          )}

          {yearGroups.map((g) => (
            <div key={g.year} style={{ marginBottom: 32 }}>
              <div style={{
                display: "flex", alignItems: "baseline", gap: 14,
                margin: "0 0 12px", paddingBottom: 6,
                borderBottom: `1px solid ${C.lineSolid}`,
              }}>
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 36, color: C.fg,
                  fontWeight: 300, letterSpacing: -0.8,
                }}>{g.year}</div>
                <div style={{
                  fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                  color: C.fgDim, fontFamily: "var(--pd-sans)", fontWeight: 600,
                }}>{g.items.length} item{g.items.length === 1 ? "" : "s"}</div>
              </div>
              <div style={{ display: "grid", gap: 1, background: C.lineSolid }}>
                {g.items.map((n, i) => {
                  const href = n.url || "https://www.investegate.co.uk/company/PAT";
                  const tc = tagColor(n.tag);
                  return (
                    <a key={`${g.year}-${i}`} href={href} target="_blank" rel="noreferrer" style={{
                      background: C.bg, padding: "24px 28px",
                      display: "grid", gridTemplateColumns: "130px 130px 1fr 80px",
                      gap: 24, alignItems: "center",
                      textDecoration: "none", color: "inherit",
                      transition: "background .12s",
                    }}
                      onMouseEnter={(e) => { e.currentTarget.style.background = "#101312"; }}
                      onMouseLeave={(e) => { e.currentTarget.style.background = C.bg; }}
                    >
                      <div style={{
                        fontFamily: "ui-monospace, monospace", fontSize: 12,
                        color: C.fgMuted, letterSpacing: 0.4,
                      }}>{formatRnsDate(n.date)}</div>
                      <div style={{
                        fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                        padding: "3px 8px", border: `1px solid ${tc}`,
                        color: tc, justifySelf: "start",
                        fontFamily: "var(--pd-sans)", fontWeight: 600,
                      }}>{n.tag || "RNS"}</div>
                      <div>
                        <div style={{
                          fontSize: 19, color: C.fg, fontFamily: "var(--pd-display)",
                          fontWeight: 400, marginBottom: n.excerpt ? 6 : 0, letterSpacing: -0.3,
                        }}>{n.title}</div>
                        {n.excerpt && (
                          <div style={{
                            fontSize: 13, color: C.fgMuted,
                            fontFamily: "var(--pd-sans)", lineHeight: 1.5,
                          }}>{n.excerpt}</div>
                        )}
                      </div>
                      <div style={{
                        fontSize: 10, color: C.gold, fontFamily: "var(--pd-sans)",
                        justifySelf: "end", letterSpacing: 1.4, textTransform: "uppercase",
                        fontWeight: 600,
                      }}>{n.source === "OTC" ? "OTC ↗" : "RNS ↗"}</div>
                    </a>
                  );
                })}
              </div>
            </div>
          ))}

          {hasMore && (
            <div style={{ marginTop: 28, textAlign: "center" }}>
              <button onClick={() => setShowCount((c) => c + 25)} style={{
                padding: "14px 28px", fontSize: 12, letterSpacing: 2, textTransform: "uppercase",
                fontWeight: 600, background: "transparent", color: C.gold,
                border: `1px solid ${C.gold}`, cursor: "pointer",
                fontFamily: "var(--pd-sans)",
              }}>
                Load {Math.min(25, filtered.length - showCount)} more
              </button>
              <div style={{
                marginTop: 12, fontSize: 11, color: C.fgDim,
                fontFamily: "var(--pd-sans)", letterSpacing: 1.2, textTransform: "uppercase",
              }}>{showCount} of {filtered.length} shown</div>
            </div>
          )}

          {/* Footer link to RNS source */}
          <div style={{
            marginTop: 60, padding: "24px 28px",
            border: `1px solid ${C.lineSolid}`,
            background: "rgba(212,175,92,0.04)",
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
          }}>
            <div>
              <div style={{
                fontSize: 10, letterSpacing: 2.4, textTransform: "uppercase",
                color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600, marginBottom: 6,
              }}>Source</div>
              <div style={{
                fontFamily: "var(--pd-sans)", fontSize: 14, color: C.fg, lineHeight: 1.5, maxWidth: 720,
              }}>
                Announcements sourced from the London Stock Exchange's Regulatory News Service (RNS),
                via Investegate. The Company's RNS feed is the authoritative public record.
              </div>
            </div>
            <a href="https://www.investegate.co.uk/company/PAT" target="_blank" rel="noreferrer" style={{
              padding: "10px 18px", border: `1px solid ${C.gold}`, color: C.gold,
              textDecoration: "none", fontSize: 11, letterSpacing: 1.8,
              textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--pd-sans)",
              whiteSpace: "nowrap",
            }}>Full RNS history ↗</a>
          </div>
        </section>
        <Footer setPage={setPage} />
      </div>
    );
  }

  function AIMRule26Page({ setPage }) {
    const a = D.aimRule26;
    const sectionStyle = { padding: "80px 48px", maxWidth: 1080, margin: "0 auto" };
    const bodyText = {
      fontSize: 15, lineHeight: 1.65, color: C.fgMuted,
      fontFamily: "var(--pd-sans)", fontWeight: 300,
    };
    const h2Style = {
      fontFamily: "var(--pd-display)", fontSize: 36, lineHeight: 1.1,
      color: C.fg, fontWeight: 300, letterSpacing: -0.8,
      margin: "0 0 20px",
    };
    const linkBtn = {
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "10px 16px", border: `1px solid ${C.lineSolid}`,
      color: C.fg, textDecoration: "none",
      fontSize: 12, letterSpacing: 1.4, textTransform: "uppercase",
      fontWeight: 600, fontFamily: "var(--pd-sans)",
      transition: "border-color .15s, color .15s",
      background: "transparent", cursor: "pointer",
    };
    return (
      <div>
        <section style={{ padding: "100px 48px 40px", maxWidth: 1080, margin: "0 auto" }}>
          <Eyebrow>Investors</Eyebrow>
          <h1 style={{
            fontFamily: "var(--pd-display)", fontSize: 84, lineHeight: 0.98,
            margin: "28px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -2.2,
          }}>AIM Rule 26.</h1>
          <p style={{ ...bodyText, fontSize: 17, maxWidth: 760 }}>
            Information provided in accordance with AIM Rule 26, last updated{" "}
            <strong style={{ color: C.fg, fontWeight: 500 }}>{a.updated}</strong>.
          </p>
          <div style={{
            marginTop: 28, padding: "20px 24px",
            background: "rgba(212,175,92,0.05)",
            border: `1px solid ${C.lineSolid}`, borderLeft: `2px solid ${C.gold}`,
            fontSize: 13, color: C.fgMuted, lineHeight: 1.6,
            fontFamily: "var(--pd-sans)",
          }}>
            Panthera was incorporated in England and Wales on{" "}
            <strong style={{ color: C.fg, fontWeight: 500 }}>8 September 2017</strong>.
            The group operates principally in India (Rajasthan), with active exploration
            assets in Burkina Faso and Mali.
          </div>
        </section>

        {/* About the company */}
        <section style={sectionStyle}>
          <h2 style={h2Style}>About the Company</h2>
          <div style={{ display: "grid", gap: 14 }}>
            <p style={bodyText}>
              Panthera Resources PLC (<em>"Panthera"</em> or <em>"the Company"</em>) is
              a UK-registered company, established to act as a holding company for
              Indo Gold Pty Ltd, an unlisted Australian-registered company. The
              Company aims to explore and develop gold assets in India and West Africa.
            </p>
            <p style={bodyText}>
              In India, the Company's principal focus is seeking redress over the
              failure of the governments of India and Rajasthan to grant a Prospecting
              Licence over the advanced-stage Bhukia gold exploration project, while
              continuing to add value to its West African gold portfolio.
            </p>
            <p style={bodyText}>
              The Company believes the actions taken by these governments and the
              High Court of Rajasthan resulted in an act of expropriation, with the
              Government of India breaching its obligations under the 1999
              Australia–India Bilateral Investment Treaty — including a failure to
              accord fair and equitable treatment.
            </p>
            <p style={bodyText}>
              On 2 January 2024 the Company announced that IGPL had submitted a
              Notice of Dispute with the Government of India, followed by a Notice
              of Arbitration on 26 July 2024. The Memorial including Statement of
              Claim was filed on 19 May 2025 in the amount of{" "}
              <strong style={{ color: C.fg, fontWeight: 500 }}>US$1.58 billion</strong>, net of Indian taxes.
            </p>
            <p style={bodyText}>
              In West Africa, the Group holds four gold exploration projects in
              Mali and Burkina Faso. The Company continues to advance the potential
              restructuring of its interest in these West African gold assets.
            </p>
          </div>

          {/* Quick links to other pages */}
          <div style={{
            marginTop: 36, display: "flex", gap: 10, flexWrap: "wrap",
          }}>
            {[
              ["Corporate overview", () => setPage("about")],
              ["Board of Directors", () => setPage("about")],
              ["Financial reports", () => setPage("investors")],
              ["RNS announcements", () => setPage("news")],
              ["Projects", () => setPage("projects")],
            ].map(([label, onClick], i) => (
              <button key={i} onClick={onClick} style={linkBtn}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = C.gold; e.currentTarget.style.color = C.gold; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = C.lineSolid; e.currentTarget.style.color = C.fg; }}>
                {label} →
              </button>
            ))}
          </div>
        </section>

        {/* Admission / trading details */}
        <section style={{ ...sectionStyle, borderTop: `1px solid ${C.lineSolid}` }}>
          <h2 style={h2Style}>AIM Listing</h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0,
            border: `1px solid ${C.lineSolid}`,
          }}>
            {[
              ["Trading symbol", a.tradingSymbol],
              ["Admitted to AIM", a.admittedDate],
              ["Other exchanges", "No application has been made to trade on any other exchange platform."],
              ["Share transfers", a.transferRestrictions],
            ].map(([k, v], i) => (
              <div key={i} style={{
                padding: 24,
                borderRight: i % 2 === 0 ? `1px solid ${C.lineSolid}` : "none",
                borderBottom: i < 2 ? `1px solid ${C.lineSolid}` : "none",
              }}>
                <div style={{
                  fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                  color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600, marginBottom: 8,
                }}>{k}</div>
                <div style={{ fontSize: 14, color: C.fg, fontFamily: "var(--pd-sans)", lineHeight: 1.5 }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 24, fontSize: 13, color: C.fgMuted, fontFamily: "var(--pd-sans)", lineHeight: 1.6 }}>
            For the latest AIM securities in issue and the percentage of AIM
            securities not held in public hands, see the{" "}
            <button onClick={() => setPage("investors")} style={{
              background: "none", border: 0, padding: 0, color: C.gold,
              fontFamily: "inherit", fontSize: "inherit", cursor: "pointer",
              textDecoration: "underline",
            }}>Investors page</button>.
          </div>
        </section>

        {/* Corporate governance */}
        <section style={{
          padding: "80px 48px", background: "#0d100f",
          borderTop: `1px solid ${C.lineSolid}`,
        }}>
          <div style={{ maxWidth: 1080, margin: "0 auto" }}>
            <Eyebrow>Chairman's Statement</Eyebrow>
            <h2 style={{ ...h2Style, marginTop: 20 }}>Corporate Governance</h2>
            <div style={{ display: "grid", gap: 14 }}>
              <p style={bodyText}>
                Panthera Resources plc is required to apply a recognised corporate
                governance code, demonstrating how the Company complies with such
                code and where it departs from it. The Directors have formally taken
                the decision to apply the{" "}
                <strong style={{ color: C.fg, fontWeight: 500 }}>{a.governanceCode}</strong>{" "}
                (the "QCA Code"). The Company provides annual updates on its compliance
                in its Annual Report.
              </p>
              <p style={bodyText}>
                The Company is committed to industry best-practice standards of
                corporate governance to enhance and protect shareholder value. As an
                AIM-listed company, Panthera is not required to adopt the UK Corporate
                Governance Code 2016, although the Company strives where possible to
                work towards the Code's best practice.
              </p>
              <p style={bodyText}>
                Good governance provides a framework that allows the right decisions
                to be taken by the right people at the right time. The Board meets
                regularly throughout the year and all necessary information is
                supplied to the Directors on a timely basis to enable them to
                discharge their duties effectively.
              </p>
              <p style={bodyText}>
                The Board is responsible for formulating, reviewing and approving the
                Company's strategy, financial activities and operating performance.
                Day-to-day management is devolved to the CEO and members of the
                management team, who are charged with consulting the Board on all
                significant financial and operational matters.
              </p>
              <p style={bodyText}>
                The Chairman has the responsibility of ensuring that the Board
                discharges its responsibilities.
              </p>
            </div>
            <div style={{
              marginTop: 32, padding: "20px 24px",
              border: `1px solid ${C.gold}`,
              display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
              flexWrap: "wrap",
            }}>
              <div>
                <div style={{ fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg, fontWeight: 400 }}>
                  Michael Higgins
                </div>
                <div style={{ fontSize: 11, color: C.gold, letterSpacing: 1.6, textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--pd-sans)", marginTop: 4 }}>
                  Non-Executive Chairman
                </div>
              </div>
              <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 11, color: C.fgDim, letterSpacing: 0.4 }}>
                Updated {a.governanceUpdated}
              </div>
            </div>
            <p style={{ ...bodyText, marginTop: 20, fontSize: 13 }}>
              The Company's full Corporate Governance Statement is contained in the
              latest Annual Report. {a.takeoverCode}
            </p>
          </div>
        </section>

        {/* Advisers */}
        <section style={sectionStyle}>
          <h2 style={h2Style}>Advisers</h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16,
          }}>
            {D.advisers.map((adv, i) => (
              <div key={i} style={{
                padding: 24, background: "#0d100f",
                border: `1px solid ${C.lineSolid}`,
              }}>
                <div style={{
                  fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                  color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
                }}>{adv.role}</div>
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg,
                  fontWeight: 400, margin: "10px 0 12px", letterSpacing: -0.3,
                }}>{adv.name}</div>
                <div style={{ fontSize: 13, color: C.fgMuted, fontFamily: "var(--pd-sans)", lineHeight: 1.65 }}>
                  {adv.lines.map((l, j) => <div key={j}>{l}</div>)}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Registered offices */}
        <section style={{
          ...sectionStyle,
          borderTop: `1px solid ${C.lineSolid}`,
        }}>
          <h2 style={h2Style}>Registered Offices</h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16,
          }}>
            <div style={{ padding: 24, background: "#0d100f", border: `1px solid ${C.lineSolid}` }}>
              <Eyebrow>United Kingdom</Eyebrow>
              <div style={{ fontSize: 14, color: C.fg, lineHeight: 1.7, fontFamily: "var(--pd-sans)", marginTop: 12 }}>
                Salisbury House<br />
                London Wall<br />
                London EC2M 5PS<br />
                United Kingdom
              </div>
            </div>
            <div style={{ padding: 24, background: "#0d100f", border: `1px solid ${C.lineSolid}` }}>
              <Eyebrow>India</Eyebrow>
              <div style={{ fontSize: 14, color: C.fg, lineHeight: 1.7, fontFamily: "var(--pd-sans)", marginTop: 12 }}>
                Tej Kunj<br />
                Ambavgarh<br />
                Udaipur – 313001<br />
                Rajasthan, India
              </div>
            </div>
          </div>
        </section>

        {/* Stock information */}
        <section style={{
          ...sectionStyle,
          borderTop: `1px solid ${C.lineSolid}`,
          background: "#0d100f",
        }}>
          <Eyebrow>Stock information</Eyebrow>
          <h2 style={{ ...h2Style, marginTop: 20 }}>Share capital & instruments</h2>
          <p style={{ ...bodyText, marginBottom: 32, maxWidth: 720 }}>
            Information regarding the Company's shares in issue, outstanding options
            and warrants, and significant shareholders — required disclosures under
            AIM Rule 26.
          </p>

          {/* Shares in issue headline */}
          <div style={{
            padding: "28px 32px", marginBottom: 28,
            border: `1px solid ${C.gold}`, background: "#151814",
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 32, alignItems: "center",
          }}>
            <div>
              <div style={{
                fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
              }}>Shares in issue</div>
              <div style={{
                fontFamily: "var(--pd-display)", fontSize: 56, lineHeight: 1,
                color: C.fg, letterSpacing: -1.6, fontWeight: 300, marginTop: 8,
              }}>{D.shareCapital.sharesInIssue}</div>
              <div style={{ fontSize: 13, color: C.fgMuted, fontFamily: "var(--pd-sans)", marginTop: 8 }}>
                fully paid ordinary shares of {D.shareCapital.parValue} each
              </div>
            </div>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16, justifySelf: "end",
            }}>
              <div>
                <div style={{ fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase", color: C.fgMuted, fontFamily: "var(--pd-sans)", fontWeight: 600 }}>Par value</div>
                <div style={{ fontSize: 18, color: C.fg, fontFamily: "ui-monospace, monospace", marginTop: 6 }}>{D.shareCapital.parValue}</div>
              </div>
              <div>
                <div style={{ fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase", color: C.fgMuted, fontFamily: "var(--pd-sans)", fontWeight: 600 }}>Not in public hands</div>
                <div style={{ fontSize: 18, color: C.fg, fontFamily: "ui-monospace, monospace", marginTop: 6 }}>{D.shareCapital.notInPublicHands}</div>
              </div>
            </div>
          </div>

          {/* Options table */}
          <div style={{ border: `1px solid ${C.lineSolid}`, marginBottom: 28 }}>
            <div style={{
              padding: "16px 24px", borderBottom: `1px solid ${C.lineSolid}`,
              fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
              color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
            }}>Unlisted options</div>
            <div style={{
              display: "grid", gridTemplateColumns: "1.4fr 1fr 1.2fr 1fr",
              padding: "12px 24px", borderBottom: `1px solid ${C.lineSolid}`,
              fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase",
              color: C.fgDim, fontFamily: "var(--pd-sans)", fontWeight: 600,
            }}>
              <div>Number</div>
              <div>Strike</div>
              <div>Expiry</div>
              <div style={{ textAlign: "right" }}>Status</div>
            </div>
            {D.shareCapital.options.map((o, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "1.4fr 1fr 1.2fr 1fr",
                padding: "16px 24px",
                borderBottom: i < D.shareCapital.options.length - 1 ? `1px solid ${C.lineSolid}` : "none",
                fontSize: 14, color: C.fg, fontFamily: "ui-monospace, monospace",
                alignItems: "center",
              }}>
                <div>{o.count}</div>
                <div>{o.strike}</div>
                <div style={{ color: C.fgMuted }}>{o.expiry}</div>
                <div style={{ textAlign: "right" }}>
                  {o.note && (
                    <span style={{
                      display: "inline-flex", alignItems: "baseline", gap: 4,
                    }}>
                      <span style={{
                        fontSize: 10, letterSpacing: 1.4, textTransform: "uppercase",
                        padding: "3px 7px", fontWeight: 700,
                        border: `1px solid ${o.note === "vested" ? C.gold : C.lineSolid}`,
                        color: o.note === "vested" ? C.gold : C.fgMuted,
                        fontFamily: "var(--pd-sans)",
                      }}>{o.note}</span>
                      {o.footnote && (
                        <span style={{ color: C.gold, fontWeight: 700, fontFamily: "var(--pd-sans)" }}>*</span>
                      )}
                    </span>
                  )}
                </div>
              </div>
            ))}
            <div style={{
              padding: "12px 24px", borderTop: `1px solid ${C.lineSolid}`,
              fontSize: 11, color: C.fgDim, fontFamily: "var(--pd-sans)", lineHeight: 1.5,
            }}>
              <span style={{ color: C.gold, fontWeight: 700, marginRight: 4 }}>*</span>
              Executive incentive options subject to vesting conditions{" "}
              (<a href={D.shareCapital.optionsRNS} target="_blank" rel="noreferrer" style={{
                color: C.gold, textDecoration: "underline",
              }}>RNS on 29 July 2024</a>).
            </div>
          </div>

          {/* Warrants — omit when empty */}
          {D.shareCapital.warrants && D.shareCapital.warrants.length > 0 && (
            <div style={{ border: `1px solid ${C.lineSolid}`, marginBottom: 28 }}>
              <div style={{
                padding: "16px 24px", borderBottom: `1px solid ${C.lineSolid}`,
                fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
                color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
              }}>Unlisted warrants</div>
              {D.shareCapital.warrants.map((w, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "1.4fr 1fr 1.2fr 1fr",
                  padding: "16px 24px",
                  fontSize: 14, color: C.fg, fontFamily: "ui-monospace, monospace",
                  alignItems: "center",
                }}>
                  <div>{w.count}</div>
                  <div>{w.strike}</div>
                  <div style={{ color: C.fgMuted }}>{w.expiry}</div>
                  <div />
                </div>
              ))}
            </div>
          )}

          <p style={{ ...bodyText, marginBottom: 28, fontSize: 13 }}>
            The Company does not hold any shares in treasury.
          </p>

          {/* Significant shareholders */}
          <div style={{ border: `1px solid ${C.lineSolid}`, marginBottom: 28 }}>
            <div style={{
              padding: "16px 24px", borderBottom: `1px solid ${C.lineSolid}`,
              fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
              color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
            }}>Significant shareholders (TR1)</div>
            <div style={{
              display: "grid", gridTemplateColumns: "2fr 1fr 1fr",
              padding: "12px 24px", borderBottom: `1px solid ${C.lineSolid}`,
              fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase",
              color: C.fgDim, fontFamily: "var(--pd-sans)", fontWeight: 600,
            }}>
              <div>Name</div>
              <div>Ordinary shares</div>
              <div style={{ textAlign: "right" }}>% of share capital</div>
            </div>
            {D.shareCapital.significantHolders.map((h, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "2fr 1fr 1fr",
                padding: "16px 24px",
                fontSize: 14, color: C.fg, fontFamily: "var(--pd-sans)",
                alignItems: "center",
              }}>
                <div>{h.name}</div>
                <div style={{ fontFamily: "ui-monospace, monospace" }}>{h.shares}</div>
                <div style={{ textAlign: "right", fontFamily: "ui-monospace, monospace", color: C.gold, fontWeight: 600 }}>{h.pct}</div>
              </div>
            ))}
          </div>

          <p style={{
            marginTop: 8, fontSize: 11, color: C.fgDim,
            fontFamily: "ui-monospace, monospace", letterSpacing: 0.3,
          }}>
            Updated on {D.shareCapital.asOf}.
          </p>
        </section>

        <Footer setPage={setPage} />
      </div>
    );
  }

  function ArbitrationPage({ setPage }) {
    const a = D.arbitration;
    const sectionStyle = { padding: "80px 48px", maxWidth: 1280, margin: "0 auto" };
    const bodyText = {
      fontSize: 15, lineHeight: 1.65, color: C.fgMuted,
      fontFamily: "var(--pd-sans)", fontWeight: 300,
    };
    return (
      <div>
        {/* Hero */}
        <section style={{
          position: "relative", padding: "100px 48px 60px", overflow: "hidden",
        }}>
          <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.16 }}
            viewBox="0 0 1400 700" preserveAspectRatio="xMidYMid slice">
            <defs>
              <radialGradient id="arb-bg" cx="80%" cy="30%" r="55%">
                <stop offset="0%" stopColor={C.gold} stopOpacity="0.5" />
                <stop offset="100%" stopColor={C.gold} stopOpacity="0" />
              </radialGradient>
            </defs>
            <rect width="1400" height="700" fill="url(#arb-bg)" />
            {Array.from({ length: 16 }).map((_, i) => (
              <circle key={i} cx="1120" cy="320" r={100 + i * 36}
                stroke={C.gold} strokeWidth="0.5" fill="none" opacity={0.28 - i * 0.014} />
            ))}
          </svg>
          <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto" }}>
            <Eyebrow>Arbitration</Eyebrow>
            <h1 style={{
              fontFamily: "var(--pd-display)", fontSize: 96, lineHeight: 0.98,
              margin: "28px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -2.6,
              maxWidth: 1100,
            }}>
              The <span style={{ color: C.gold, fontStyle: "italic" }}>US$1.58B</span> treaty claim against India.
            </h1>
            <p style={{ ...bodyText, fontSize: 17, maxWidth: 800 }}>
              In May 2025, IGPL filed its statement of claim seeking{" "}
              <strong style={{ color: C.fg, fontWeight: 500 }}>US$1.58 billion, net of Indian taxes</strong>,
              from the Republic of India over the expropriation of the Bhukia Gold Project.
              The case is fully funded by Litigation Capital Management (AIM) on a non-recourse basis.
            </p>

            <div style={{
              marginTop: 40, display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
              border: `1px solid ${C.lineSolid}`,
            }}>
              {[
                ["$1.58", "B", "Claim value (USD)"],
                ["$13.6", "M", "LCM funding (USD)"],
                ["1.74", "Moz Au", "Bhukia JORC (Panthera)"],
                ["7.3", "Moz Au", "Geological Survey of India"],
                ["1999", "", "Australia–India BIT"],
              ].map(([n, u, l], i) => (
                <div key={i} style={{
                  padding: "28px 24px",
                  borderRight: i < 4 ? `1px solid ${C.lineSolid}` : "none",
                }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                    <div style={{
                      fontFamily: "var(--pd-display)", fontSize: 46, lineHeight: 1,
                      color: C.fg, letterSpacing: -1.2, fontWeight: 300,
                    }}>{n}</div>
                    <div style={{
                      fontFamily: "var(--pd-display)", fontSize: 20,
                      color: C.gold, fontWeight: 300,
                    }}>{u}</div>
                  </div>
                  <div style={{
                    marginTop: 10, fontSize: 11, color: C.fgMuted,
                    letterSpacing: 1.6, textTransform: "uppercase",
                    fontFamily: "var(--pd-sans)",
                  }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Background narrative */}
        <section style={{ ...sectionStyle, paddingTop: 40 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64 }}>
            <div>
              <Eyebrow>Background</Eyebrow>
              <h2 style={{
                fontFamily: "var(--pd-display)", fontSize: 40, lineHeight: 1.1,
                margin: "20px 0 20px", color: C.fg, fontWeight: 300, letterSpacing: -1,
              }}>How we got here.</h2>
            </div>
            <div style={{ display: "grid", gap: 16 }}>
              <p style={bodyText}>
                The Bhukia project comprises legal rights Panthera holds through its
                Australian subsidiary <strong style={{ color: C.fg, fontWeight: 500 }}>Indo Gold Pty Ltd (IGPL)</strong> in
                respect of an area that was the subject of a rejected Prospecting
                Licence Application in Rajasthan lodged by Metal Mining Pvt Ltd (MMI),
                a wholly owned subsidiary of IGPL.
              </p>
              <p style={bodyText}>
                IGPL's initial investment in Bhukia dates to <strong style={{ color: C.fg, fontWeight: 500 }}>circa 2004</strong>.
                Substantial funding and management of joint-venture exploration programmes
                followed. IGPL alleges that its right to be granted a Prospecting Licence
                — through its joint venture holding — was denied and frustrated over an
                extended period by the Government of Rajasthan.
              </p>
              <p style={bodyText}>
                In <strong style={{ color: C.fg, fontWeight: 500 }}>2021</strong>, India passed the MMDR2021 Act amending
                the Mines and Minerals (Development and Regulation) Act of 2015. Under
                Clause 13 of MMDR2021, the preferential right to a Prospecting Licence
                and Mining Lease was revoked.
              </p>
              <p style={bodyText}>
                IGPL's claim is brought under the{" "}
                <strong style={{ color: C.fg, fontWeight: 500 }}>1999 Agreement between the Government of Australia
                and the Government of India on the Promotion and Protection of Investments</strong>{" "}
                (the "Treaty"). On 19 May 2025 the Memorial was filed in accordance
                with the order of the arbitral panel, including a claim for damages of{" "}
                <strong style={{ color: C.gold, fontWeight: 500 }}>US$1.58 billion, net of Indian taxes</strong>.
              </p>
            </div>
          </div>
        </section>

        {/* Alleged breaches */}
        <section style={{
          ...sectionStyle, paddingTop: 60, paddingBottom: 60,
        }}>
          <Eyebrow>Alleged breaches</Eyebrow>
          <h2 style={{
            fontFamily: "var(--pd-display)", fontSize: 40, lineHeight: 1.1,
            margin: "20px 0 32px", color: C.fg, fontWeight: 300, letterSpacing: -1,
            maxWidth: 900,
          }}>What we say India breached.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {a.breaches.map((b, i) => (
              <div key={i} style={{
                padding: "28px 24px", background: "#0d100f",
                border: `1px solid ${C.lineSolid}`,
              }}>
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 36,
                  color: C.gold, fontWeight: 300, marginBottom: 14,
                }}>0{i + 1}</div>
                <div style={{ fontSize: 15, color: C.fg, fontFamily: "var(--pd-sans)", lineHeight: 1.5 }}>
                  {b}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Timeline + LCM */}
        <section style={{
          padding: "80px 48px", background: "#0d100f",
          borderTop: `1px solid ${C.lineSolid}`,
        }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Eyebrow>Procedural timeline</Eyebrow>
            <h2 style={{
              fontFamily: "var(--pd-display)", fontSize: 56, lineHeight: 1,
              margin: "20px 0 48px", color: C.fg, fontWeight: 300, letterSpacing: -1.4,
            }}>From discovery to decision.</h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64, alignItems: "start" }}>
              <div>
                <div style={{
                  padding: 28,
                  border: `1px solid ${C.gold}`, background: "#151814",
                }}>
                  <Eyebrow>Funded by LCM</Eyebrow>
                  <div style={{
                    fontFamily: "var(--pd-display)", fontSize: 36, lineHeight: 1.05,
                    color: C.fg, fontWeight: 300, letterSpacing: -0.8, margin: "16px 0 16px",
                  }}>
                    {a.funderCommitment}
                  </div>
                  <p style={{
                    fontSize: 13, lineHeight: 1.6, color: C.fgMuted,
                    fontFamily: "var(--pd-sans)", marginBottom: 18,
                  }}>
                    Funding committed by <strong style={{ color: C.fg }}>{a.funder}</strong> —
                    a subsidiary of AIM-listed Litigation Capital Management, one of
                    the world's leading institutional financiers of international
                    arbitration.
                  </p>
                  <div style={{ display: "grid", gap: 10 }}>
                    {[
                      ["Facility", "US$13.6M, non-recourse"],
                      ["Treaty", a.treaty],
                      ["Rules", "UNCITRAL"],
                      ["Seat", a.seat],
                    ].map(([k, v], i) => (
                      <div key={i} style={{
                        display: "flex", justifyContent: "space-between", gap: 16,
                        fontSize: 12, fontFamily: "var(--pd-sans)",
                      }}>
                        <span style={{ color: C.fgMuted, letterSpacing: 1.4, textTransform: "uppercase", fontSize: 10 }}>{k}</span>
                        <span style={{ color: C.fg, textAlign: "right" }}>{v}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div>
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 32, color: C.gold,
                  fontWeight: 300, letterSpacing: -0.6, marginBottom: 28,
                }}>
                  Key Bhukia Dates
                </div>
                {a.milestones.map((m, i) => {
                  const isComplete = m.status === "complete";
                  const isHighlight = m.highlight;
                  const isConditional = m.conditional;
                  return (
                    <Reveal key={i} delay={i * 50}>
                      <div style={{
                        display: "grid", gridTemplateColumns: "180px 32px 1fr",
                        gap: 20, padding: "20px 0",
                        borderBottom: `1px solid ${C.lineSolid}`,
                        alignItems: "start",
                        opacity: !isComplete && !isHighlight ? 0.78 : 1,
                      }}>
                        <div style={{
                          fontFamily: "ui-monospace, monospace",
                          fontSize: 12, color: isComplete ? C.gold : C.fgMuted,
                          paddingTop: 6, letterSpacing: 0.6,
                        }}>{m.date}</div>
                        <div style={{ position: "relative", paddingTop: 10 }}>
                          <div style={{
                            width: 12, height: 12,
                            background: isHighlight ? C.gold : isComplete ? C.fg : "transparent",
                            border: !isComplete && !isHighlight ? `1px solid ${C.fgDim}` : "none",
                            transform: "rotate(45deg)",
                            boxShadow: isHighlight ? `0 0 16px ${C.gold}` : "none",
                          }} />
                          {i < a.milestones.length - 1 && (
                            <div style={{
                              position: "absolute", left: 5.5, top: 28, bottom: -20,
                              width: 1, background: C.lineSolid,
                            }} />
                          )}
                        </div>
                        <div>
                          <div style={{
                            display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap",
                            marginBottom: 4,
                          }}>
                            <div style={{
                              fontFamily: "var(--pd-display)", fontSize: 22,
                              color: isHighlight ? C.gold : C.fg, fontWeight: 400,
                              letterSpacing: -0.3,
                            }}>{m.label}</div>
                            {isConditional && (
                              <span style={{
                                fontSize: 9, letterSpacing: 1.8, textTransform: "uppercase",
                                padding: "3px 7px", border: `1px solid ${C.gold}`,
                                color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 700,
                              }}>If successful</span>
                            )}
                          </div>
                          <p style={{
                            fontSize: 13, color: C.fgMuted, lineHeight: 1.55,
                            fontFamily: "var(--pd-sans)",
                          }}>{m.detail}</p>
                        </div>
                      </div>
                    </Reveal>
                  );
                })}
                <p style={{
                  marginTop: 24, padding: "16px 18px",
                  background: "rgba(212,175,92,0.06)",
                  border: `1px solid ${C.lineSolid}`, borderLeft: `2px solid ${C.gold}`,
                  fontSize: 12, color: C.fgMuted, lineHeight: 1.6,
                  fontFamily: "var(--pd-sans)",
                }}>
                  <strong style={{ color: C.fg, fontWeight: 600 }}>No guaranteed outcome.</strong>{" "}
                  Arbitration is uncertain by nature. The tribunal may rule in part,
                  in full, or not in Panthera's favour. Dates beyond filings to date
                  are indicative.
                  {" "}Awards are enforceable internationally under the New York Convention.
                  There is no guaranteed outcome.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* LCM Funding terms */}
        <section style={sectionStyle}>
          <Eyebrow>Funding economics</Eyebrow>
          <h2 style={{
            fontFamily: "var(--pd-display)", fontSize: 40, lineHeight: 1.1,
            margin: "20px 0 16px", color: C.fg, fontWeight: 300, letterSpacing: -1,
          }}>What LCM is entitled to on a successful outcome.</h2>
          <p style={{ ...bodyText, marginBottom: 32, maxWidth: 820 }}>
            If there is an award and/or recovery, LCM Funding is entitled — in the
            first instance — to the amounts it has deployed from the facility, plus
            the greater of (i) US$1.36M (10% of the funding limit), (ii) a commission
            of 5–15% of the damages recovered, or (iii) a multiple of 2.0× to 4.25×
            the total facility — each tied to the time elapsed since the Funding
            Confirmation Notice.
          </p>
          <div style={{ border: `1px solid ${C.lineSolid}` }}>
            <div style={{
              display: "grid", gridTemplateColumns: "2fr 1fr 1fr",
              padding: "14px 24px", borderBottom: `1px solid ${C.lineSolid}`,
              fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
              color: C.gold, fontFamily: "var(--pd-sans)", fontWeight: 600,
            }}>
              <div>Time since Funding Confirmation Notice</div>
              <div style={{ textAlign: "right" }}>Multiple</div>
              <div style={{ textAlign: "right" }}>Commission</div>
            </div>
            {[
              ["≤ 1 year", "2.0×", "5%"],
              ["1–2 years", "2.5×", "7.5%"],
              ["2–3 years", "3.0×", "10%"],
              ["3–4 years", "3.75×", "12.5%"],
              ["> 4 years", "4.25×", "15%"],
            ].map(([t, m, c], i, arr) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "2fr 1fr 1fr",
                padding: "18px 24px",
                borderBottom: i < arr.length - 1 ? `1px solid ${C.lineSolid}` : "none",
                fontSize: 14, color: C.fg, fontFamily: "var(--pd-sans)",
              }}>
                <div>{t}</div>
                <div style={{ textAlign: "right", fontFamily: "ui-monospace, monospace", color: C.gold, fontWeight: 600 }}>{m}</div>
                <div style={{ textAlign: "right", fontFamily: "ui-monospace, monospace" }}>{c}</div>
              </div>
            ))}
          </div>
          <p style={{
            marginTop: 16, fontSize: 12, color: C.fgDim,
            fontFamily: "var(--pd-sans)", lineHeight: 1.55, maxWidth: 820,
          }}>
            After the fifth year, the Funder is additionally entitled to an interest
            rate of 25% per annum on the drawn-down amount until receipt of damages.
            If no award and/or recovery results, IGPL has no obligation to repay LCM
            — the facility is fully non-recourse.
          </p>
        </section>

        {/* FAQ */}
        <section style={{
          padding: "80px 48px", background: "#0d100f",
          borderTop: `1px solid ${C.lineSolid}`,
        }}>
          <div style={{ maxWidth: 1080, margin: "0 auto" }}>
            <Eyebrow>FAQ</Eyebrow>
            <h2 style={{
              fontFamily: "var(--pd-display)", fontSize: 48, lineHeight: 1,
              margin: "20px 0 40px", color: C.fg, fontWeight: 300, letterSpacing: -1.2,
            }}>Common questions.</h2>
            <div style={{ display: "grid", gap: 0 }}>
              {a.faq.map((f, i) => (
                <FAQItem key={i} q={f.q} a={f.a} defaultOpen={i === 0} />
              ))}
            </div>
          </div>
        </section>

        {/* Quick links */}
        <section style={{ ...sectionStyle, paddingTop: 60 }}>
          <Eyebrow>Related</Eyebrow>
          <h2 style={{
            fontFamily: "var(--pd-display)", fontSize: 36, lineHeight: 1.1,
            margin: "20px 0 32px", color: C.fg, fontWeight: 300, letterSpacing: -0.8,
          }}>More on the case and the company.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {[
              { label: "Bhukia Project", sub: "1.74 Moz JORC inferred", target: "projects" },
              { label: "AIM Rule 26", sub: "Stock info & disclosures", target: "aim26" },
              { label: "News & RNS", sub: "Latest announcements", target: "news" },
            ].map((card, i) => (
              <button key={i} onClick={() => setPage(card.target)} style={{
                padding: 28, background: "#0d100f",
                border: `1px solid ${C.lineSolid}`,
                textAlign: "left", cursor: "pointer",
                transition: "border-color .15s",
                fontFamily: "inherit",
              }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = C.gold; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = C.lineSolid; }}
              >
                <div style={{
                  fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg,
                  fontWeight: 400, letterSpacing: -0.3, marginBottom: 6,
                }}>{card.label} →</div>
                <div style={{ fontSize: 12, color: C.fgMuted, fontFamily: "var(--pd-sans)" }}>{card.sub}</div>
              </button>
            ))}
          </div>
        </section>

        <Footer setPage={setPage} />
      </div>
    );
  }

  function FAQItem({ q, a, defaultOpen }) {
    const [open, setOpen] = useState(!!defaultOpen);
    return (
      <div style={{ borderBottom: `1px solid ${C.lineSolid}` }}>
        <button onClick={() => setOpen(!open)} style={{
          width: "100%", textAlign: "left", padding: "24px 0",
          background: "transparent", border: 0, cursor: "pointer",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 24, fontFamily: "inherit",
        }}>
          <span style={{
            fontFamily: "var(--pd-display)", fontSize: 22, color: C.fg,
            fontWeight: 400, letterSpacing: -0.3,
          }}>{q}</span>
          <span style={{
            fontFamily: "var(--pd-display)", fontSize: 28, color: C.gold,
            fontWeight: 300, lineHeight: 1, transform: open ? "rotate(45deg)" : "none",
            transition: "transform .2s",
          }}>+</span>
        </button>
        {open && (
          <div style={{
            paddingBottom: 24, fontSize: 14, lineHeight: 1.65, color: C.fgMuted,
            fontFamily: "var(--pd-sans)", maxWidth: 820,
          }}>{a}</div>
        )}
      </div>
    );
  }

  function ContactPage({ setPage }) {
    return (
      <div>
        <section style={{ padding: "100px 48px 40px", maxWidth: 1360, margin: "0 auto" }}>
          <Eyebrow>Contact</Eyebrow>
          <h1 style={{
            fontFamily: "var(--pd-display)", fontSize: 100, lineHeight: 0.95,
            margin: "28px 0 28px", color: C.fg, fontWeight: 300, letterSpacing: -2.6,
          }}>Get in touch.</h1>
        </section>
        <section style={{ padding: "20px 48px 120px", maxWidth: 1360, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            {D.company.offices.map((o, i) => (
              <div key={i} style={{ border: `1px solid ${C.lineSolid}`, background: "#0d100f", padding: 36 }}>
                <Eyebrow>{o.country}</Eyebrow>
                <div style={{ fontFamily: "var(--pd-display)", fontSize: 36, color: C.fg, margin: "14px 0 24px", fontWeight: 300, letterSpacing: -0.8 }}>
                  {o.city}
                </div>
                <div style={{ fontSize: 14, color: C.fgMuted, lineHeight: 1.8, fontFamily: "var(--pd-sans)" }}>
                  {o.lines.map((l, j) => <div key={j}>{l}</div>)}
                </div>
              </div>
            ))}
            <div style={{ background: C.gold, color: C.bg, padding: 36 }}>
              <div style={{ fontSize: 11, letterSpacing: 3.2, textTransform: "uppercase", fontWeight: 500, fontFamily: "var(--pd-sans)" }}>
                Investor relations
              </div>
              <div style={{ fontFamily: "var(--pd-display)", fontSize: 36, margin: "14px 0 24px", fontWeight: 300, letterSpacing: -0.8 }}>
                IR Enquiries
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.8, fontFamily: "var(--pd-sans)" }}>
                <div style={{ fontWeight: 600 }}>contact@pantheraresources.com</div>
                <div style={{ marginTop: 20, opacity: 0.8 }}>
                  For media, regulatory or analyst enquiries, please contact the IR team directly.
                </div>
              </div>
            </div>
          </div>
        </section>
        <CTA setPage={setPage} />
        <Footer setPage={setPage} />
      </div>
    );
  }

  // ── Styles ────────────────────────────────────────────────────
  const btnPrimary = {
    background: C.gold, color: C.bg, border: `1px solid ${C.gold}`,
    padding: "16px 30px", fontSize: 12, letterSpacing: 2, cursor: "pointer",
    textTransform: "uppercase", fontWeight: 700,
    fontFamily: "var(--pd-sans)", transition: "all .15s",
  };
  const btnGhost = {
    background: "transparent", color: C.fg, border: `1px solid ${C.lineSolid}`,
    padding: "16px 30px", fontSize: 12, letterSpacing: 2, cursor: "pointer",
    textTransform: "uppercase", fontWeight: 600,
    fontFamily: "var(--pd-sans)", transition: "all .15s",
  };

  // ── Root ──────────────────────────────────────────────────────
  // Page routing:
  //  - In standalone mode (each page has its own HTML file), `initialPage` is set
  //    via `window.PD_INITIAL_PAGE` and `setPage(id)` navigates to "{id}.html".
  //  - In canvas mode (inside design-canvas), falls back to SPA state routing.
  const PAGE_TO_FILE = {
    home: "home.html",
    about: "about.html",
    projects: "projects.html",
    arbitration: "arbitration.html",
    investors: "investors.html",
    aim26: "aim-rule-26.html",
    news: "news.html",
    contact: "contact.html",
    "project-bassala": "project-bassala.html",
    "project-kalaka": "project-kalaka.html",
    "project-bido": "project-bido.html",
    "project-cascades": "project-cascades.html",
  };
  function SiteDark({ initialPage, standalone }) {
    const [page, setPageState] = useState(initialPage || window.PD_INITIAL_PAGE || "home");
    const isStandalone = standalone ?? !!window.PD_STANDALONE;
    const scrollRef = useRef(null);
    const setPage = (id) => {
      if (isStandalone && PAGE_TO_FILE[id]) {
        window.location.href = PAGE_TO_FILE[id];
      } else {
        setPageState(id);
      }
    };
    useEffect(() => {
      if (scrollRef.current) scrollRef.current.scrollTop = 0;
    }, [page]);
    return (
      <div
        ref={scrollRef}
        data-scroll-root
        style={{
          "--pd-display": '"Fraunces", "Canela", Georgia, serif',
          "--pd-sans": '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
          width: "100%",
          height: isStandalone ? "100vh" : "100%",
          overflow: "auto",
          background: C.bg, color: C.fg,
          fontFamily: "var(--pd-sans)",
        }}
      >
        <Nav page={page} setPage={setPage} />
        <div key={page} style={{ animation: "pd-fade .35s ease" }}>
          {page === "home" && <Home setPage={setPage} />}
          {page === "about" && <AboutPage setPage={setPage} />}
          {page === "projects" && <ProjectsPage setPage={setPage} />}
          {page === "arbitration" && <ArbitrationPage setPage={setPage} />}
          {page === "investors" && <InvestorsPage setPage={setPage} />}
          {page === "aim26" && <AIMRule26Page setPage={setPage} />}
          {page === "news" && <NewsPage setPage={setPage} />}
          {page === "contact" && <ContactPage setPage={setPage} />}
          {page.startsWith("project-") && (
            <ProjectDetailPage setPage={setPage} projectId={page.replace("project-", "")} />
          )}
        </div>
      </div>
    );
  }

  window.SiteDark = SiteDark;
})();
