// Shared layout components for ihracathub
// TopNav, TopTicker, Footer, PageHeader

const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ---------- Routing helper ----------
const BASE_URL = "https://www.ihracathub.com";
const IH_URL = {
  home:    BASE_URL,
  tools:   BASE_URL + "/#araclar",
  guides:  BASE_URL + "/#rehber",
  tool:    (path) => BASE_URL + "/#" + path,
  article: (id)   => BASE_URL + "/#rehber/" + id,
};

const ROUTES = [
  { id: "home",    label: "Anasayfa", path: "",        url: BASE_URL,          canonical: BASE_URL },
  { id: "araclar", label: "Araçlar",  path: "araclar", url: IH_URL.tools,      canonical: IH_URL.tools },
  // Finansal
  { id: "landed",          label: "Kârlılık & Landed Cost",      path: "araclar/karlilik",         parent: "araclar", url: IH_URL.tool("araclar/karlilik"),          canonical: IH_URL.tool("araclar/karlilik"),          description: "İhracat kârlılığı ve landed cost hesaplayıcı" },
  { id: "kdv",             label: "KDV İadesi",                  path: "araclar/kdv",              parent: "araclar", url: IH_URL.tool("araclar/kdv"),               canonical: IH_URL.tool("araclar/kdv"),               description: "İhracat KDV iadesi simülatörü" },
  { id: "fiyatlama",       label: "Fiyatlama & Marj",            path: "araclar/fiyatlama",        parent: "araclar", url: IH_URL.tool("araclar/fiyatlama"),         canonical: IH_URL.tool("araclar/fiyatlama"),         description: "İhracat fiyatlama ve marj hesaplayıcı" },
  { id: "basabas",         label: "Başabaş Analizi",             path: "araclar/basabas",          parent: "araclar", url: IH_URL.tool("araclar/basabas"),           canonical: IH_URL.tool("araclar/basabas"),           description: "İhracat başabaş noktası analizi" },
  { id: "incoterm",        label: "INCOTERM Karşılaştırması",    path: "araclar/incoterm",         parent: "araclar", url: IH_URL.tool("araclar/incoterm"),          canonical: IH_URL.tool("araclar/incoterm"),          description: "INCOTERMS 2020 karşılaştırma ve seçim rehberi" },
  { id: "navlun",          label: "Navlun & Sigorta",            path: "araclar/navlun",           parent: "araclar", url: IH_URL.tool("araclar/navlun"),            canonical: IH_URL.tool("araclar/navlun"),            description: "Navlun ve sigorta maliyet hesaplayıcı" },
  { id: "nakitakisi",      label: "Nakit Akışı",                 path: "araclar/nakitakisi",       parent: "araclar", url: IH_URL.tool("araclar/nakitakisi"),        canonical: IH_URL.tool("araclar/nakitakisi"),        description: "İhracat nakit akışı projeksiyonu" },
  { id: "ulkeriski",       label: "Ülke Riski & Vade",           path: "araclar/ulkeriski",        parent: "araclar", url: IH_URL.tool("araclar/ulkeriski"),         canonical: IH_URL.tool("araclar/ulkeriski"),         description: "Ülke riski ve ödeme vadesi analizi" },
  { id: "forward",         label: "Forward Hesaplayıcı",         path: "araclar/forward",          parent: "araclar", url: IH_URL.tool("araclar/forward"),           canonical: IH_URL.tool("araclar/forward"),           description: "Döviz forward sözleşme maliyet hesaplayıcı" },
  // Finansman
  { id: "eximbank",        label: "Eximbank Simülatörü",         path: "araclar/eximbank",         parent: "araclar", url: IH_URL.tool("araclar/eximbank"),          canonical: IH_URL.tool("araclar/eximbank"),          description: "Eximbank ihracat kredisi simülatörü" },
  { id: "faktoring",       label: "Faktoring Maliyeti",          path: "araclar/faktoring",        parent: "araclar", url: IH_URL.tool("araclar/faktoring"),         canonical: IH_URL.tool("araclar/faktoring"),         description: "İhracat faktoring maliyet hesaplayıcı" },
  { id: "forfaiting",      label: "Forfaiting",                  path: "araclar/forfaiting",       parent: "araclar", url: IH_URL.tool("araclar/forfaiting"),        canonical: IH_URL.tool("araclar/forfaiting"),        description: "Forfaiting maliyet ve oran hesaplayıcı" },
  { id: "finansman-karsi", label: "Finansman Karşılaştırması",   path: "araclar/finansman-karsi",  parent: "araclar", url: IH_URL.tool("araclar/finansman-karsi"),   canonical: IH_URL.tool("araclar/finansman-karsi"),   description: "İhracat finansman yöntemleri karşılaştırması" },
  { id: "teminat",         label: "Teminat Mektubu",             path: "araclar/teminat",          parent: "araclar", url: IH_URL.tool("araclar/teminat"),           canonical: IH_URL.tool("araclar/teminat"),           description: "Banka teminat mektubu maliyet hesaplayıcı" },
  { id: "kredi-sigorta",   label: "Kredi Sigortası",             path: "araclar/kredi-sigorta",    parent: "araclar", url: IH_URL.tool("araclar/kredi-sigorta"),     canonical: IH_URL.tool("araclar/kredi-sigorta"),     description: "İhracat alacak kredi sigortası hesaplayıcı" },
  { id: "sevk-finansman",  label: "Sevk Finansmanı",             path: "araclar/sevk-finansman",   parent: "araclar", url: IH_URL.tool("araclar/sevk-finansman"),    canonical: IH_URL.tool("araclar/sevk-finansman"),    description: "Sevk öncesi ve sonrası finansman analizi" },
  { id: "sermaye",         label: "İşletme Sermayesi",           path: "araclar/sermaye",          parent: "araclar", url: IH_URL.tool("araclar/sermaye"),           canonical: IH_URL.tool("araclar/sermaye"),           description: "İhracat işletme sermayesi ihtiyaç hesaplayıcı" },
  { id: "garanti",         label: "Banka Garanti",               path: "araclar/garanti",          parent: "araclar", url: IH_URL.tool("araclar/garanti"),           canonical: IH_URL.tool("araclar/garanti"),           description: "Banka garanti mektubu maliyet hesaplayıcı" },
  { id: "finansman-zaman", label: "Finansman Zaman Çizelgesi",   path: "araclar/finansman-zaman",  parent: "araclar", url: IH_URL.tool("araclar/finansman-zaman"),   canonical: IH_URL.tool("araclar/finansman-zaman"),   description: "İhracat finansman süreçleri zaman çizelgesi" },
  // Ödeme & Belgeler
  { id: "akreditif",         label: "Akreditif Tarayıcı",     path: "araclar/akreditif",         parent: "araclar", url: IH_URL.tool("araclar/akreditif"),          canonical: IH_URL.tool("araclar/akreditif"),          description: "Akreditif türleri ve rezerv analiz aracı" },
  { id: "odeme-yontemi",     label: "Ödeme Yöntemi",          path: "araclar/odeme-yontemi",     parent: "araclar", url: IH_URL.tool("araclar/odeme-yontemi"),      canonical: IH_URL.tool("araclar/odeme-yontemi"),      description: "İhracat ödeme yöntemi karşılaştırma ve seçim" },
  { id: "vesaik",            label: "Vesaik Kontrol",         path: "araclar/vesaik",            parent: "araclar", url: IH_URL.tool("araclar/vesaik"),             canonical: IH_URL.tool("araclar/vesaik"),             description: "Vesaik karşılığı ödeme kontrol listesi" },
  { id: "tahsilat-riski",    label: "Tahsilat Riski",         path: "araclar/tahsilat-riski",    parent: "araclar", url: IH_URL.tool("araclar/tahsilat-riski"),     canonical: IH_URL.tool("araclar/tahsilat-riski"),     description: "İhracat tahsilat riski değerlendirme aracı" },
  { id: "vade-iskonto",      label: "Vade & İskonto",         path: "araclar/vade-iskonto",      parent: "araclar", url: IH_URL.tool("araclar/vade-iskonto"),       canonical: IH_URL.tool("araclar/vade-iskonto"),       description: "Vade ve iskonto maliyet hesaplayıcı" },
  { id: "sevkiyat-sure",     label: "Sevkiyat Süresi",        path: "araclar/sevkiyat-sure",     parent: "araclar", url: IH_URL.tool("araclar/sevkiyat-sure"),      canonical: IH_URL.tool("araclar/sevkiyat-sure"),      description: "Ülkeye ve moda göre sevkiyat süresi tahmini" },
  { id: "belge-uygunluk",    label: "Belge Uygunluğu",        path: "araclar/belge-uygunluk",    parent: "araclar", url: IH_URL.tool("araclar/belge-uygunluk"),     canonical: IH_URL.tool("araclar/belge-uygunluk"),     description: "İhracat belgesi uygunluk kontrol aracı" },
  { id: "akreditif-maliyet", label: "Akreditif Maliyeti",     path: "araclar/akreditif-maliyet", parent: "araclar", url: IH_URL.tool("araclar/akreditif-maliyet"),  canonical: IH_URL.tool("araclar/akreditif-maliyet"),  description: "Akreditif açılış ve kullanım maliyet hesaplayıcı" },
  { id: "swift",             label: "Swift Seçimi",           path: "araclar/swift",             parent: "araclar", url: IH_URL.tool("araclar/swift"),              canonical: IH_URL.tool("araclar/swift"),              description: "SWIFT mesaj türü seçim rehberi" },
  { id: "odeme-takvimi",     label: "Ödeme Takvimi",          path: "araclar/odeme-takvimi",     parent: "araclar", url: IH_URL.tool("araclar/odeme-takvimi"),      canonical: IH_URL.tool("araclar/odeme-takvimi"),      description: "İhracat ödeme takvimi ve vade planlama" },
  // E-İhracat
  { id: "pazaryeri",         label: "E-Pazaryeri",            path: "araclar/pazaryeri",         parent: "araclar", url: IH_URL.tool("araclar/pazaryeri"),          canonical: IH_URL.tool("araclar/pazaryeri"),          description: "E-pazaryeri komisyon ve maliyet karşılaştırması" },
  { id: "mikro",             label: "Mikro İhracat",          path: "araclar/mikro",             parent: "araclar", url: IH_URL.tool("araclar/mikro"),              canonical: IH_URL.tool("araclar/mikro"),              description: "Mikro ihracat ETGB ve limit hesaplayıcı" },
  { id: "kargo",             label: "Kargo Karşılaştırması",  path: "araclar/kargo",             parent: "araclar", url: IH_URL.tool("araclar/kargo"),              canonical: IH_URL.tool("araclar/kargo"),              description: "E-ihracat kargo sağlayıcı karşılaştırması" },
  { id: "etgb",              label: "ETGB Maliyeti",          path: "araclar/etgb",              parent: "araclar", url: IH_URL.tool("araclar/etgb"),               canonical: IH_URL.tool("araclar/etgb"),               description: "Elektronik ticaret gümrük beyannamesi maliyet hesabı" },
  { id: "platform-uygunluk", label: "Platform Uygunluğu",     path: "araclar/platform-uygunluk", parent: "araclar", url: IH_URL.tool("araclar/platform-uygunluk"),  canonical: IH_URL.tool("araclar/platform-uygunluk"),  description: "Ürün ve hedef pazara göre platform uygunluk analizi" },
  { id: "dijital-vergi",     label: "Dijital Vergi",          path: "araclar/dijital-vergi",     parent: "araclar", url: IH_URL.tool("araclar/dijital-vergi"),      canonical: IH_URL.tool("araclar/dijital-vergi"),      description: "E-ihracatta ülkeye göre dijital hizmet vergisi" },
  { id: "eihracat-kdv",      label: "E-İhracat KDV",         path: "araclar/eihracat-kdv",      parent: "araclar", url: IH_URL.tool("araclar/eihracat-kdv"),       canonical: IH_URL.tool("araclar/eihracat-kdv"),       description: "IOSS ve OSS e-ihracat KDV hesaplayıcı" },
  { id: "iade",              label: "İade Maliyeti",          path: "araclar/iade",              parent: "araclar", url: IH_URL.tool("araclar/iade"),               canonical: IH_URL.tool("araclar/iade"),               description: "E-ihracat ürün iade maliyet analizi" },
  { id: "platform-fx",       label: "Platform FX",            path: "araclar/platform-fx",       parent: "araclar", url: IH_URL.tool("araclar/platform-fx"),        canonical: IH_URL.tool("araclar/platform-fx"),        description: "E-pazaryeri döviz kur maliyeti karşılaştırması" },
  { id: "eihracat-karlilik", label: "E-İhracat Kârlılığı",   path: "araclar/eihracat-karlilik", parent: "araclar", url: IH_URL.tool("araclar/eihracat-karlilik"),  canonical: IH_URL.tool("araclar/eihracat-karlilik"),  description: "E-ihracat net kârlılık hesaplayıcı" },
  // Devlet Desteği
  { id: "destek",          label: "Destek Bulucu",         path: "araclar/destek",          parent: "araclar", url: IH_URL.tool("araclar/destek"),           canonical: IH_URL.tool("araclar/destek"),           description: "Şirkete uygun ihracat devlet desteği bulucu" },
  { id: "kosgeb",          label: "KOSGEB",                path: "araclar/kosgeb",          parent: "araclar", url: IH_URL.tool("araclar/kosgeb"),           canonical: IH_URL.tool("araclar/kosgeb"),           description: "KOSGEB ihracat destek hesaplayıcı" },
  { id: "turquality",      label: "Turquality",            path: "araclar/turquality",      parent: "araclar", url: IH_URL.tool("araclar/turquality"),       canonical: IH_URL.tool("araclar/turquality"),       description: "TURQUALITY program simülatörü ve uygunluk analizi" },
  { id: "tubitak",         label: "TÜBİTAK",               path: "araclar/tubitak",         parent: "araclar", url: IH_URL.tool("araclar/tubitak"),          canonical: IH_URL.tool("araclar/tubitak"),          description: "TÜBİTAK ihracat Ar-Ge desteği uygunluk testi" },
  { id: "fuar",            label: "Fuar Desteği",          path: "araclar/fuar",            parent: "araclar", url: IH_URL.tool("araclar/fuar"),             canonical: IH_URL.tool("araclar/fuar"),             description: "Yurt dışı fuar destek hesaplayıcı" },
  { id: "serbest-bolge",   label: "Serbest Bölge",         path: "araclar/serbest-bolge",   parent: "araclar", url: IH_URL.tool("araclar/serbest-bolge"),    canonical: IH_URL.tool("araclar/serbest-bolge"),    description: "Serbest bölge avantaj ve maliyet analizi" },
  { id: "eticaret-destek", label: "E-Ticaret Desteği",     path: "araclar/eticaret-destek", parent: "araclar", url: IH_URL.tool("araclar/eticaret-destek"),  canonical: IH_URL.tool("araclar/eticaret-destek"),  description: "E-ticaret ihracat destek programı filtreleyici" },
  { id: "arge",            label: "R&D Teşviki",           path: "araclar/arge",            parent: "araclar", url: IH_URL.tool("araclar/arge"),             canonical: IH_URL.tool("araclar/arge"),             description: "İhracat Ar-Ge vergi teşviki hesaplayıcı" },
  { id: "yatirim",         label: "Yatırım Teşviki",       path: "araclar/yatirim",         parent: "araclar", url: IH_URL.tool("araclar/yatirim"),          canonical: IH_URL.tool("araclar/yatirim"),          description: "Yatırım teşvik belgesi uygunluk analizi" },
  { id: "basvuru-takvim",  label: "Başvuru Takvimi",       path: "araclar/basvuru-takvim",  parent: "araclar", url: IH_URL.tool("araclar/basvuru-takvim"),   canonical: IH_URL.tool("araclar/basvuru-takvim"),   description: "İhracat destek başvuru takvim ve hatırlatıcı" },
  // Diğer
  { id: "kur",    label: "Kur Riski", path: "araclar/kur", parent: "araclar", url: IH_URL.tool("araclar/kur"), canonical: IH_URL.tool("araclar/kur"), description: "İhracatta döviz kur riski analiz aracı" },
  { id: "rehber", label: "Rehber",    path: "rehber",                         url: IH_URL.guides,              canonical: IH_URL.guides },
];

function useRoute() {
  const [hash, setHash] = useState(window.location.hash.slice(1) || "");
  useEffect(() => {
    const onHash = () => {
      setHash(window.location.hash.slice(1) || "");
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return hash;
}

function navigate(path) {
  window.location.hash = "#" + path;
}

function Link({ to, children, className, style, ...rest }) {
  const onClick = (e) => {
    e.preventDefault();
    navigate(to);
  };
  return (
    <a href={"#" + to} onClick={onClick} className={className} style={style} {...rest}>
      {children}
    </a>
  );
}

// ---------- Top ticker ----------
function TopTicker() {
  // Simulated live FX/data — fixed but feels live
  const [t, setT] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setT((x) => x + 1), 4000);
    return () => clearInterval(id);
  }, []);
  const wiggle = (base, amt) => (base + Math.sin(t * 0.7 + base) * amt).toFixed(4);
  const items = [
    { k: "USD/TRY", v: wiggle(38.42, 0.03), d: "+0.18%", pos: true },
    { k: "EUR/TRY", v: wiggle(43.71, 0.04), d: "−0.12%", pos: false },
    { k: "GBP/TRY", v: wiggle(50.88, 0.05), d: "+0.07%", pos: true },
    { k: "EXIMBANK 6A USD", v: "%5,75", d: "—", pos: null },
    { k: "TR İHRACAT YTD", v: "131,4 mlr $", d: "+4,1% YoY", pos: true },
  ];
  return (
    <div className="topbar">
      <div className="container topbar-row">
        <div className="ticker">
          {items.map((it) => (
            <span className="ticker-item" key={it.k}>
              {it.k} <span className="v">{it.v}</span>{" "}
              <span className={it.pos === true ? "pos" : it.pos === false ? "neg" : ""}>{it.d}</span>
            </span>
          ))}
        </div>
        <div style={{ display: "flex", gap: 16, color: "#9C9486" }}>
          <span>28 Nis 2026 · İstanbul</span>
        </div>
      </div>
    </div>
  );
}

// ---------- Logo mark ----------
function Logo() {
  return (
    <Link to="" className="brand">
      <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <rect x="0.5" y="0.5" width="21" height="21" stroke="#0E1518" />
          <path d="M5 14 L9 8 L13 12 L17 6" stroke="#0E1518" strokeWidth="1.5" fill="none" />
          <circle cx="17" cy="6" r="2" fill="#C8861D" />
        </svg>
        ihracat<span style={{ color: "var(--accent)" }}>hub</span>
      </span>
      <span className="brand-suffix">TR · BAĞIMSIZ</span>
    </Link>
  );
}

// ---------- Top nav ----------
function TopNav() {
  const route = useRoute();
  const top = route.split("/")[0] || "home";
  const isActive = (id) => {
    if (id === "home") return route === "";
    if (id === "araclar") return route.startsWith("araclar");
    return route === ROUTES.find((r) => r.id === id)?.path;
  };

  const navItems = [
    { id: "araclar", label: "Araçlar", path: "araclar" },
    { id: "rehber", label: "Rehber", path: "rehber" },
    { id: "destek", label: "Devlet Destekleri", path: "araclar/destek" },
    { id: "akreditif", label: "Akreditif", path: "araclar/akreditif" },
    { id: "kur", label: "Kur Riski", path: "araclar/kur" },
  ];

  return (
    <>
      <TopTicker />
      <nav className="nav">
        <div className="container nav-row">
          <Logo />
          <div className="nav-links">
            {navItems.map((it) => (
              <Link
                to={it.path}
                key={it.id}
                className={"nav-link " + (isActive(it.id) ? "active" : "")}
              >
                {it.label}
              </Link>
            ))}
          </div>
          <div className="nav-cta">
            <span className="tag pos" style={{ marginRight: 8 }}>TAMAMEN ÜCRETSİZ</span>
            <Link to="araclar" className="btn sm">Araçlara git</Link>
          </div>
        </div>
      </nav>
    </>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="grid grid-4" style={{ gap: 32 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16, color: "#fff" }}>
              <span style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em" }}>
                ihracat<span style={{ color: "var(--accent)" }}>hub</span>
              </span>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.55, color: "#9C9486", margin: "0 0 16px" }}>
              Türkiye'nin bağımsız ihracat rehber portalı. Devlet kurumları,
              bankalar ve danışmanlık firmalarından bağımsızdır.
            </p>
            <div className="tag" style={{ background: "transparent", borderColor: "#3A4348", color: "#9C9486" }}>
              v.2026.04 · Son güncelleme bugün
            </div>
          </div>
          <div>
            <h5>Araçlar</h5>
            <Link to="araclar/karlilik">Kârlılık Hesaplayıcı</Link>
            <Link to="araclar/eximbank">Eximbank Simülatörü</Link>
            <Link to="araclar/akreditif">Akreditif Tarayıcı</Link>
            <Link to="araclar/kur">Kur Riski</Link>
            <Link to="araclar/destek">Destek Bulucu</Link>
          </div>
          <div>
            <h5>Rehberler</h5>
            <Link to="rehber/gtip-rehberi">İhracat Nasıl Başlarız</Link>
            <Link to="rehber/nakliye-karsilastirma">Nakliye ve INCOTERMS</Link>
            <Link to="rehber/mense-ispati">Menşe İspatı (A.TR vs EUR.1)</Link>
            <Link to="rehber/eihracat-kdv-ioss">E-İhracat KDV Rehberi</Link>
            <Link to="rehber/eximbank-urunler">Eximbank Ürün Rehberi</Link>
            <Link to="rehber/kobi-finans-destek">KOBİ Finansman Desteği</Link>
            <Link to="rehber">Tüm Rehberler →</Link>
          </div>
          <div>
            <h5>Kurumsal</h5>
            <a href="#hakkimizda">Hakkımızda</a>
            <a href="#metodoloji">Metodoloji</a>
            <a href="#veri-kaynaklari">Veri kaynakları</a>
            <a href="#editoryal-ilkeler">Editöryel ilkeler</a>
            <a href="#iletisim">İletişim</a>
            <a href="#basin">Basın</a>
            <a href="#kariyer">Kariyer</a>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 ihracathub. Bilgi amaçlıdır; resmi tavsiye yerine geçmez.</span>
          <span style={{ display: "flex", gap: 16 }}>
            <a href="#kvkk">KVKK</a>
            <a href="#gizlilik">Gizlilik</a>
            <a href="#cerez">Çerezler</a>
            <a href="#kullanim">Kullanım Koşulları</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Page header ----------
function PageHeader({ crumbs, title, lede, kicker, right }) {
  return (
    <header className="page-header">
      <div className="container">
        <div className="crumbs">
          {crumbs.map((c, i) => (
            <span key={i}>
              {c.to ? <Link to={c.to}>{c.label}</Link> : c.label}
              {i < crumbs.length - 1 ? <span style={{ margin: "0 8px" }}>/</span> : null}
            </span>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 320 }}>
            {kicker ? <div className="eyebrow accent" style={{ marginBottom: 12 }}>{kicker}</div> : null}
            <h1 className="h-1" style={{ margin: 0 }}>{title}</h1>
            {lede ? <p className="lede" style={{ marginTop: 16, maxWidth: 720 }}>{lede}</p> : null}
          </div>
          {right}
        </div>
      </div>
    </header>
  );
}

// ---------- Section heading helper ----------
function SectionHead({ kicker, title, lede, action }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, marginBottom: 32, flexWrap: "wrap" }}>
      <div style={{ maxWidth: 720 }}>
        {kicker ? <div className="eyebrow accent" style={{ marginBottom: 8 }}>{kicker}</div> : null}
        <h2 className="h-2" style={{ margin: 0 }}>{title}</h2>
        {lede ? <p className="body" style={{ marginTop: 12, fontSize: 16 }}>{lede}</p> : null}
      </div>
      {action}
    </div>
  );
}

// Export to window
Object.assign(window, { useRoute, navigate, Link, TopNav, Footer, PageHeader, SectionHead, ROUTES });