// glotiAfrica landing  Consulting Authority direction
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy",
  "accent": "green",
  "hero": "field",
  "showGrid": true,
  "density": "regular"
} /*EDITMODE-END*/;

const PALETTES = {
  navy: { fg: "#13316B", paper: "#FBFCFE", slate: "#5C6B86", line: "rgba(19,49,107,.10)", lineStrong: "rgba(19,49,107,.20)", soft: "#EEF3FA", chip: "#1B3F87" },
  forest: { fg: "#0E1A14", paper: "#F2F0E8", slate: "#56635A", line: "rgba(14,26,20,.10)", lineStrong: "rgba(14,26,20,.18)", soft: "#E8E6DD", chip: "#172821" },
  charcoal: { fg: "#16181B", paper: "#F4F2EC", slate: "#5C6066", line: "rgba(22,24,27,.10)", lineStrong: "rgba(22,24,27,.18)", soft: "#EAE7DF", chip: "#222529" }
};

const ACCENTS = {
  green: { c: "#5DBE3C", soft: "#E6F5DD", ink: "#163307", name: "GLOTI Green" },
  blue: { c: "#2A8DD4", soft: "#DCEEF9", ink: "#06243B", name: "Ocean Blue" },
  red: { c: "#E53935", soft: "#FDE3E2", ink: "#3E0807", name: "Care Red" }
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [paperOpen, setPaperOpen] = useState(false);
  const P = PALETTES[t.palette] || PALETTES.navy;
  const A = ACCENTS[t.accent] || ACCENTS.teal;

  useEffect(() => {
    if (typeof IntersectionObserver === "undefined") {
      document.querySelectorAll(".section, .card-in").forEach((el) => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("in");
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    const watch = document.querySelectorAll(".section, .card-in");
    watch.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const cssVars = {
    "--fg": P.fg, "--paper": P.paper, "--slate": P.slate, "--line": P.line,
    "--line-strong": P.lineStrong, "--soft": P.soft, "--chip": P.chip,
    "--accent": A.c, "--accent-soft": A.soft, "--accent-ink": A.ink,
    "--gutter": t.density === "compact" ? "20px" : t.density === "comfy" ? "32px" : "26px"
  };

  return (
    <div className="page" style={cssVars}>
      <Nav onPaper={() => setPaperOpen(true)} />
      <Hero variant={t.hero} accentName={A.name} onPaper={() => setPaperOpen(true)} />
      <Vision />
      <Beneficiaries />
      <Problem />
      <DualEngine />
      <Product />
      <Marketplace />
      <Flow />
      <Alliance />
      <Trust />
      <FinalCTA onPaper={() => setPaperOpen(true)} />
      <Footer onPaper={() => setPaperOpen(true)} />
      <Whitepaper open={paperOpen} onClose={() => setPaperOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio label="Tone" value={t.palette}
        options={["navy", "forest", "charcoal"]}
        onChange={(v) => setTweak("palette", v)} />
        <TweakRadio label="Accent" value={t.accent}
        options={["green", "blue", "red"]}
        onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Treatment" value={t.hero}
        options={["field", "data", "editorial", "split"]}
        onChange={(v) => setTweak("hero", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
        options={["compact", "regular", "comfy"]}
        onChange={(v) => setTweak("density", v)} />
        <TweakToggle label="Background grid" value={t.showGrid}
        onChange={(v) => setTweak("showGrid", v)} />
      </TweaksPanel>
      {t.showGrid ? <GridOverlay /> : null}
    </div>);

}

// ─── NAV ─────────────────────────────────────────────────────────────────────
function Nav({ onPaper }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > window.innerHeight - 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <header className={"nav " + (scrolled ? "nav-scrolled " : "") + (open ? "nav-open" : "")}>
      <div className="nav-inner">
        <a href="#" className="brand brand-logo-only" onClick={close}>
          <img src="assets/gloti-care-logo.jpg?v=2" alt="GLOTI-Care" className="brand-logo" style={{ objectFit: "contain" }} />
        </a>
        <button
          type="button"
          className="nav-hamburger"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>
        <div className="nav-collapse">
          <nav className="nav-links">
            <a href="#product" onClick={close}>Product</a>
            <a href="#how" onClick={close}>How it works</a>
            <a href="#trust" onClick={close}>Governance</a>
            <a href="#alliance" onClick={close}>Alliance</a>
          </nav>
          <div className="nav-cta">
            <a href="partner.html" className="btn btn-ghost" onClick={close}>Partner with us</a>
            <a href="coming-soon.html" className="btn btn-primary" onClick={close}>
              Launch GLOTI-Care <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>
      </div>
      <div className="nav-scrim" onClick={close} aria-hidden="true"></div>
    </header>);

}

// ─── HERO ────────────────────────────────────────────────────────────────────
const HERO_SLIDES = [
  {
    id: "hero-bg-1",
    src: "assets/hero-1.jpg?v=2",
    heading: <>Send <em>care</em>.<br />Not cash.</>,
    lede: <>Bind every shilling to a clinic, a pharmacy, or a doctor  <span className="hero-lede-em">before it ever leaves your hands</span>.</>
  },
  {
    id: "hero-bg-2",
    src: "assets/hero-2.jpg?v=2",
    heading: <>Reach <em>patients</em>.<br />Wherever they live.</>,
    lede: <>Verified Community Health Promoters carry care the <span className="hero-lede-em">last mile</span>  to the village, to the door, to them.</>
  },
  {
    id: "hero-bg-3",
    src: "assets/hero-3.jpg?v=2",
    heading: <>One <em>circle</em>.<br />One receipt.</>,
    lede: <>Family in Kampala, cousin in London, NGO in Geneva, Ministry in Lagos  <span className="hero-lede-em">one chain of custody</span> everyone can read.</>
  },
  {
    id: "hero-bg-4",
    src: "assets/hero-4.jpg?v=2",
    heading: <><em>Last mile</em>.<br />Health service provider.</>,
    lede: <>Funds release only against a verified consult, a signed prescription, or a registered facility  <span className="hero-lede-em">with a receipt the donor can audit</span>.</>
  }
];

function Hero({ variant, accentName, onPaper }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((n) => (n + 1) % HERO_SLIDES.length), 5400);
    return () => clearInterval(t);
  }, []);
  const slide = HERO_SLIDES[i];

  return (
    <section className="hero">
      <HeroCarousel index={i} setIndex={setI} />
      <div className="hero-scrim" aria-hidden="true" />

      <div className={"hero-grid hero-" + variant}>
        <div className="hero-copy">
          <h1 className="display" key={"h-" + i}>{slide.heading}</h1>
          <p className="hero-lede" key={"l-" + i}>{slide.lede}</p>
          <div className="hero-cta">
            <a href="coming-soon.html" className="btn btn-primary btn-lg">
              Open Gloti-Care <span className="btn-arrow">→</span>
            </a>
          </div>
          <dl className="hero-stats">
            <div><dt>Bound to verified care</dt><dd>100<span className="stat-sub">% of funds</span></dd></div>
            <div><dt>Donor receipt</dt><dd>&lt;2<span className="stat-sub">s after release</span></dd></div>
            <div><dt>Sponsorship streams</dt><dd>4<span className="stat-sub"> city · diaspora · NGO · state</span></dd></div>
          </dl>
        </div>
      </div>

      <ScrollCue />
    </section>);

}

function HeroCarousel({ index, setIndex }) {
  return (
    <div className="hero-carousel" aria-hidden="true">
      {HERO_SLIDES.map((s, idx) =>
      <div key={s.id} className={"hc-slide " + (idx === index ? "hc-on" : "")}>
          <img src={s.src} alt="" className="hc-img" loading={idx === 0 ? "eager" : "lazy"} />
        </div>
      )}
      <div className="hc-controls">
        {HERO_SLIDES.map((s, idx) =>
        <button
          key={s.id}
          type="button"
          className={"hc-dot " + (idx === index ? "hc-dot-on" : "")}
          onClick={() => setIndex(idx)}
          aria-label={"Slide " + (idx + 1)} />

        )}
      </div>
    </div>);

}

function ScrollCue() {
  return (
    <a href="#vision" className="scroll-cue" aria-label="Scroll down">
      <span className="scroll-cue-arrow" aria-hidden="true"></span>
      <span className="scroll-cue-label">Scroll</span>
    </a>);

}

function HeroField() {
  return (
    <figure className="field">
      <image-slot
        id="hero-rural-kenya"
        shape="rect"
        radius="6px"
        placeholder="[ photography · patients at a rural clinic in Kenya  drop image here ]"
        style={{ width: "100%", aspectRatio: "4 / 5", display: "block" }}>
      </image-slot>
      <figcaption className="field-cap">
        <span className="mono-tag">FIELD · KE</span>
        <span className="field-cap-loc">Verified partner clinic · Western Kenya</span>
      </figcaption>
      <div className="field-overlay" aria-hidden="true">
        <div className="fo-row"><span className="fo-dot" /><span className="mono">CHP dispatch · active</span></div>
        <div className="fo-row fo-row-dim"><span className="mono">RX-2240 · settled · 14:02</span></div>
      </div>
    </figure>);

}

function HeroDataPlot() {
  // Stylized data plot: capital flow over time + flow ledger.
  const points = useMemo(() => {
    const arr = [];
    let v = 30;
    for (let i = 0; i <= 60; i++) {
      v += Math.sin(i / 7) * 4 + (Math.random() - 0.4) * 3 + 0.6;
      arr.push({ x: i, y: Math.max(8, Math.min(94, v)) });
    }
    return arr;
  }, []);
  const W = 560,H = 320;
  const path = points.map((p, i) =>
  (i ? "L" : "M") + p.x / 60 * W + "," + (H - p.y / 100 * H)
  ).join(" ");
  const area = path + ` L${W},${H} L0,${H} Z`;

  return (
    <div className="plot">
      <div className="plot-head">
        <div className="plot-title">
          <span className="mono-tag">FIG. 01</span>
          <span>Capital flow → Verified care delivery</span>
        </div>
        <div className="plot-legend">
          <span><i className="dot dot-accent" />Funded</span>
          <span><i className="dot dot-fg" />Disbursed</span>
        </div>
      </div>
      <svg className="plot-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="ga" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {/* gridlines */}
        {[0, 1, 2, 3, 4].map((i) =>
        <line key={i} x1="0" x2={W} y1={H / 4 * i} y2={H / 4 * i}
        stroke="var(--line)" strokeWidth="1" strokeDasharray={i % 2 ? "2 4" : ""} />
        )}
        <path d={area} fill="url(#ga)" />
        <path d={path} fill="none" stroke="var(--accent)" strokeWidth="1.75" />
        {/* secondary trace */}
        <path d={points.map((p, i) => (i ? "L" : "M") + p.x / 60 * W + "," + (H - (p.y - 8) / 100 * H)).join(" ")}
        fill="none" stroke="var(--fg)" strokeOpacity="0.55" strokeWidth="1.25" strokeDasharray="3 3" />
        {/* marker */}
        <circle cx={45 / 60 * W} cy={H - points[45].y / 100 * H} r="4" fill="var(--accent)" />
        <circle cx={45 / 60 * W} cy={H - points[45].y / 100 * H} r="9" fill="none" stroke="var(--accent)" strokeOpacity="0.4" />
      </svg>
      <div className="plot-axes">
        <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Q5</span>
      </div>
      <div className="plot-ledger">
        <LedgerRow time="14:02:18" id="TX-08842" label="Pharmacy → Nairobi" amt="$184.00" status="settled" />
        <LedgerRow time="14:02:11" id="TX-08841" label="Consultation → Kisumu" amt="$42.00" status="settled" />
        <LedgerRow time="14:01:57" id="TX-08840" label="Wallet top-up · London" amt="$1,200.00" status="cleared" />
      </div>
    </div>);

}

function LedgerRow({ time, id, label, amt, status }) {
  return (
    <div className="ledger-row">
      <span className="lr-time">{time}</span>
      <span className="lr-id">{id}</span>
      <span className="lr-label">{label}</span>
      <span className="lr-amt">{amt}</span>
      <span className={"lr-status lr-" + status}>● {status}</span>
    </div>);

}

function HeroEditorial() {
  return (
    <div className="editorial">
      <div className="ed-quote">
        <span className="mono-tag">FIELD NOTE / KISUMU</span>
        <p className="ed-pull">
          "My mother's prescription used to take three weeks of phone calls.
          Now it arrives the same afternoon I send the funds."
        </p>
        <p className="ed-attr"> Achieng O., Diaspora contributor (London)</p>
      </div>
      <div className="ed-numbers">
        <div className="ed-stat"><span className="ed-stat-num">73<sup>%</sup></span><span className="ed-stat-lbl">of remittances<br />diverted from<br />medical use</span></div>
        <div className="ed-stat ed-stat-emph"><span className="ed-stat-num">100<sup>%</sup></span><span className="ed-stat-lbl">of GLOTI-Care<br />capital locked<br />to verified care</span></div>
      </div>
    </div>);

}

function HeroSplit() {
  return (
    <div className="split">
      <div className="split-tile split-image">
        <div className="ph-stripe" aria-hidden="true" />
        <div className="ph-label">[ photography · diaspora portrait ]</div>
      </div>
      <div className="split-tile split-mock">
        <PhoneMock />
      </div>
    </div>);

}

function PhoneMock() {
  return (
    <div className="phone">
      <div className="phone-bar">
        <span>9:41</span>
        <span className="phone-dot" />
      </div>
      <div className="phone-body">
        <div className="phone-row phone-row-hero">
          <div>
            <div className="phone-eyebrow">Health Wallet · KES</div>
            <div className="phone-amount">128,400<span>.00</span></div>
          </div>
          <div className="phone-tag">Locked</div>
        </div>
        <div className="phone-card">
          <div className="phone-card-h">
            <span>Pharmacy · Goodlife Westlands</span>
            <span className="phone-card-amt">−1,840</span>
          </div>
          <div className="phone-card-meta">RX-2240 · Mama Atieno · Today, 14:02</div>
        </div>
        <div className="phone-card">
          <div className="phone-card-h">
            <span>Teleconsult · Dr. M. Otieno</span>
            <span className="phone-card-amt">−2,400</span>
          </div>
          <div className="phone-card-meta">30 min · Cardiology follow-up</div>
        </div>
        <div className="phone-cta">Send for care →</div>
      </div>
    </div>);

}

// ─── MARQUEE / TRUST BAR ─────────────────────────────────────────────────────
function Marquee() {
  return (
    <section className="marquee">
      <span className="mono-tag mono-tag-dim">PARTNER NETWORK</span>
      <div className="marquee-row">
        <PartnerLogo name="Goodlife Pharmacy" />
        <PartnerLogo name="AAR Healthcare" />
        <PartnerLogo name="Aga Khan Network" />
        <PartnerLogo name="Equity Afia" />
        <PartnerLogo name="MP Shah" />
        <PartnerLogo name="Penda Health" />
        <PartnerLogo name="Avenue Hospital" />
      </div>
    </section>);

}
function PartnerLogo({ name }) {
  return (
    <div className="partner">
      <span className="partner-mark" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="6.25" fill="none" stroke="currentColor" /><path d="M7 3v8M3 7h8" stroke="currentColor" strokeWidth="1.1" /></svg>
      </span>
      <span>{name}</span>
    </div>);

}

// ─── PROBLEM / SOLUTION ──────────────────────────────────────────────────────
function Problem() {
  return (
    <section className="section section-narrative" id="problem">
      <SectionHeader index="03" eyebrow="The problem" title="Of every dollar sent home for medicine, fewer than 40 cents reach it." />
      <div className="narrative">
        <article className="narrative-col narrative-problem">
          <div className="narrative-tag">Cash</div>
          <h3 className="narrative-h">Cash is the wrong format for care.</h3>
          <p>
            Once a transfer lands, it's just money. Fees take a slice. The taxi fare takes another. An emergency at home re-routes the rest. By the time it reaches the chemist, the prescription has expired and the donor is on WhatsApp asking for a photo of a receipt that doesn't exist.
          </p>
          <FailFlow />
        </article>

        <div className="narrative-rule" aria-hidden="true">
          <div className="narrative-arrow">
            <svg width="36" height="36" viewBox="0 0 36 36"><path d="M6 18h22m0 0l-6-6m6 6l-6 6" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
          </div>
        </div>

        <article className="narrative-col narrative-solution">
          <div className="narrative-tag narrative-tag-on">Gloti-Care</div>
          <h3 className="narrative-h">Health Credits. Bound to care before they move.
          </h3>
          <p>
            We don't send cash; we send <strong>Health Credits</strong>  ring-fenced units that can only be spent at a verified doctor, lab, pharmacy, or clinic. The credit releases the moment the service is delivered. The donor sees the receipt before the patient leaves the counter.
          </p>
          <CareFlow />
        </article>
      </div>
    </section>);

}

function FailFlow() {
  const stops = [
  { l: "Wire sent", v: "$500" },
  { l: "FX + fees", v: "−$38" },
  { l: "Cash withdrawn", v: "$462" },
  { l: "Reaches care", v: "$190", warn: true }];

  return (
    <div className="failflow">
      {stops.map((s, i) =>
      <div key={i} className={"ff-step " + (s.warn ? "ff-warn" : "")}>
          <span className="ff-bar" style={{
          width: (i === 0 ? 100 : i === 1 ? 92 : i === 2 ? 88 : 38) + "%"
        }} />
          <span className="ff-l">{s.l}</span>
          <span className="ff-v">{s.v}</span>
        </div>
      )}
    </div>);

}

function CareFlow() {
  const stops = [
  { l: "Funded", v: "$500", w: 100 },
  { l: "Locked · health policy", v: "$500", w: 100 },
  { l: "Allocated · pharmacy", v: "$500", w: 100 },
  { l: "Reaches care", v: "$500", w: 100, ok: true }];

  return (
    <div className="careflow">
      {stops.map((s, i) =>
      <div key={i} className={"cf-step " + (s.ok ? "cf-ok" : "")}>
          <span className="cf-bar" style={{ width: s.w + "%" }} />
          <span className="cf-l">{s.l}</span>
          <span className="cf-v">{s.v}</span>
        </div>
      )}
    </div>);

}

// ─── PRODUCT SPOTLIGHT ───────────────────────────────────────────────────────
function Product() {
  const features = [
  {
    i: "01",
    t: "The Health Wallet.",
    d: "Multi-currency in. KES out. Locked to medical purpose, line-item reconciled. The wallet your mother actually understands and your auditor actually accepts.",
    visual: <FeatureWallet />
  },
  {
    i: "02",
    t: "Pharmacy at her door.",
    d: "Order the refill from Westlands, watch it leave a vetted pharmacy, watch it arrive in Kisumu. Prescription-bound, pharmacist-signed, GPS-stamped.",
    visual: <FeaturePharmacy />
  },
  {
    i: "03",
    t: "A specialist on the calendar.",
    d: "Cardiology, oncology, psychiatry  booked, paid, and recorded inside the wallet. The consult ends; the care plan is already on the local registrar's screen.",
    visual: <FeatureConsult />
  },
  {
    i: "04",
    t: "The receipt that ends the argument.",
    d: "Every release, every refund, every visit  line-item, time-stamped, GPS-anchored. Show the family. File with HR. Hand to Treasury. Same artifact.",
    visual: <FeatureMonitor />
  }];

  return (
    <section className="section section-product" id="product">
      <SectionHeader index="05" eyebrow="The product" title="Gloti-Care  already live, already healing." cta={{ href: "coming-soon.html", label: "Open Gloti-Care ↗" }} />
      <div className="product-grid">
        {features.map((f) =>
        <article key={f.i} className="feature">
            <div className="feature-vis">{f.visual}</div>
            <div className="feature-meta">
              <span className="mono-tag">FT-{f.i}</span>
              <h3 className="feature-h">{f.t}</h3>
              <p className="feature-d">{f.d}</p>
            </div>
          </article>
        )}
      </div>
    </section>);

}

function FeatureWallet() {
  return (
    <div className="fv fv-wallet">
      <div className="fv-eyebrow">Health Wallet · USD ⇄ KES</div>
      <div className="fv-amount">$1,240<span>.00</span></div>
      <div className="fv-row"><span>Locked policy</span><span>medical · all</span></div>
      <div className="fv-row"><span>FX rate</span><span className="mono">1 USD = 129.42 KES</span></div>
      <div className="fv-bar"><span style={{ width: "68%" }} /></div>
      <div className="fv-row fv-row-dim"><span>Allocated 68%</span><span className="mono">$843.20</span></div>
    </div>);

}
function FeaturePharmacy() {
  return (
    <div className="fv fv-pharm">
      <div className="fv-rx">
        <div className="rx-line"><span className="mono">RX-2240</span><span className="rx-stat">verified</span></div>
        <div className="rx-drug">Metformin 500 mg <span className="rx-qty">× 60</span></div>
        <div className="rx-drug">Lisinopril 10 mg <span className="rx-qty">× 30</span></div>
        <div className="rx-foot"><span>Dr. M. Otieno · MD-2841</span><span className="mono">SIGNED</span></div>
      </div>
      <div className="fv-route">
        <span>Goodlife Westlands</span>
        <span className="route-dots">· · · · ·</span>
        <span>Kisumu, 14:40</span>
      </div>
    </div>);

}
function FeatureConsult() {
  return (
    <div className="fv fv-consult">
      <div className="consult-card">
        <div className="consult-avatar" />
        <div className="consult-meta">
          <div className="consult-name">Dr. Mercy Otieno</div>
          <div className="consult-spec">Cardiology · Aga Khan Network</div>
        </div>
        <div className="consult-live">● LIVE</div>
      </div>
      <div className="consult-times">
        <div className="ct-slot">Tue 09:00</div>
        <div className="ct-slot ct-on">Wed 14:30</div>
        <div className="ct-slot">Thu 11:15</div>
      </div>
    </div>);

}
function FeatureMonitor() {
  return (
    <div className="fv fv-monitor">
      <div className="mon-head"><span className="mono">UTILIZATION · 30D</span><span className="mono">$1,840 / $2,000</span></div>
      <div className="mon-bars">
        {[42, 58, 36, 80, 55, 92, 70, 48, 64, 88, 60, 74].map((h, i) =>
        <span key={i} className="mon-bar" style={{ height: h + "%" }} />
        )}
      </div>
      <div className="mon-legend">
        <span><i className="dot dot-accent" />Pharmacy 41%</span>
        <span><i className="dot dot-fg" />Consult 28%</span>
        <span><i className="dot dot-slate" />Clinic 31%</span>
      </div>
    </div>);

}

// ─── HOW IT WORKS ────────────────────────────────────────────────────────────
function Flow() {
  const steps = [
  { n: "01", t: "Fund.", d: "You. Your cousin in London. The Foundation in Geneva. SHA in Nairobi. Anyone in the circle tops up a named wallet. M-Pesa, card, bank, stablecoin  all land as KES.", side: "The donor" },
  { n: "02", t: "Lock.", d: "The wallet picks up its policy: pharmacy-only, primary-care, chronic, emergency. Funds cannot move sideways. Cash is no longer an option.", side: "The policy" },
  { n: "03", t: "Heal.", d: "The patient walks into the verified clinic. The credit clears at the counter. The receipt arrives in every donor's inbox before the patient is out the door.", side: "The patient" }];

  return (
    <section className="section section-flow" id="how">
      <SectionHeader index="07" eyebrow="How it works" title="Fund. Lock. Heal. Three steps. One chain of custody." />
      <div className="flow-track">
        <div className="flow-axis" aria-hidden="true" />
        {steps.map((s, i) =>
        <div key={s.n} className={"flow-step flow-" + (i === 0 ? "a" : i === 1 ? "b" : "c")}>
            <div className="flow-dot"><span /></div>
            <div className="flow-card">
              <div className="flow-meta"><span className="mono-tag">{s.n}</span><span className="flow-side">{s.side}</span></div>
              <h3 className="flow-h">{s.t}</h3>
              <p className="flow-d">{s.d}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ─── TRUST / GOVERNANCE ──────────────────────────────────────────────────────
function Trust() {
  const items = [
  { t: "Encryption that doesn't apologise.", d: "AES-256 at rest. TLS 1.3 in transit. Hardware-backed key custody on every wallet event  no exceptions, no admin overrides.", k: ["AES-256", "TLS 1.3", "HSM"] },
  { t: "Patient data stays on the continent.", d: "Primary residency in Nairobi, regional failover in Cape Town. No PII  patient or donor  leaves African jurisdiction. ODPC-registered, GDPR-aligned.", k: ["KE / ZA residency", "ODPC", "GDPR-aligned"] },
  { t: "Every shilling is reconciled.", d: "Each disbursement clears against a regulated counterparty. Built for tax authority, donor auditor, and family WhatsApp  same artifact.", k: ["Reconciled", "Auditable", "Fiscalised"] },
  { t: "Built with the regulator in the room.", d: "Designed against CBK guidance, IRA rules, PPB pharmacy licensing, and the Digital Health Agency standard. Approval isn't a phase  it's the architecture.", k: ["CBK", "IRA", "PPB", "DHA"] }];

  return (
    <section className="section section-trust" id="trust">
      <SectionHeader index="09" eyebrow="Trust & Governance" title="The receipt the family can show. The audit the State can sign." />
      <div className="trust-grid">
        {items.map((it, i) =>
        <article key={i} className="trust-card">
            <h3 className="trust-h">{it.t}</h3>
            <p className="trust-d">{it.d}</p>
            <div className="trust-keys">
              {it.k.map((k) => <span key={k} className="key-chip">{k}</span>)}
            </div>
          </article>
        )}
      </div>
    </section>);

}

// ─── FINAL CTA ───────────────────────────────────────────────────────────────
function FinalCTA({ onPaper }) {
  return (
    <section className="section section-final" id="partner">
      <div className="final-inner">
        <h2 className="final-h">
          The next prescription you fund <em>arrives</em>.
        </h2>
        <p className="final-sub">
          Open Gloti-Care and send your first Health Credit  to a parent, a programme, or a patient on Treasury's books. Pharmacies, clinics, NGOs and ministries: come build the rail with us.
        </p>
        <div className="final-cta">
          <a href="coming-soon.html" className="btn btn-primary btn-lg btn-on-dark">
            Open Gloti-Care <span className="btn-arrow">→</span>
          </a>
          <button type="button" onClick={onPaper} className="btn btn-ghost btn-lg btn-ghost-on-dark">Partner with us</button>
        </div>
      </div>
    </section>);

}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function Footer({ onPaper }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="brand brand-lg">
            <img src="assets/gloti-care-logo.jpg?v=2" alt="GLOTI-Care" className="brand-logo brand-logo-on-dark" style={{ width: "50px", height: "50px" }} />
            <span className="brand-word">gloti<span className="brand-word-em">Africa</span></span>
          </div>
          <p className="footer-blurb">Care, not cash. To anyone you love. Anywhere they live.</p>
        </div>

        <FooterCol title="Product" links={[
        ["GLOTI-Care", "coming-soon.html"],
        ["Health Wallet", "#"], ["Pharmacy", "#"], ["Consultations", "#"], ["Monitoring", "#"]]
        } />
        <FooterCol title="Company" links={[
        ["About", "#"], ["Partners", "#"], ["Press", "#"], ["Careers", "#"]]
        } />
        <FooterCol title="Governance" links={[
        ["Security", "#"], ["Compliance", "#"], ["Data residency", "#"], ["Whitepaper ↗", "#paper", onPaper]]
        } />
        <FooterCol title="Connect" links={[
        ["LinkedIn ↗", "#"], ["Contact us ↗", "contact.html"], ["Partner with us ↗", "partner.html"]]
        } />
      </div>
      <div className="footer-bot">
        <span className="mono">© 2026 glotiAfrica Ltd · Nairobi · London</span>
        <span className="mono">v1.4.0 · build 0508-A</span>
      </div>
    </footer>);

}
function FooterCol({ title, links }) {
  return (
    <div className="footer-col">
      <div className="footer-col-h">{title}</div>
      <ul>
        {links.map(([l, h, fn]) => <li key={l}><a href={h} onClick={fn ? (e) => {e.preventDefault();fn();} : undefined}>{l}</a></li>)}
      </ul>
    </div>);

}

// ─── SHARED ──────────────────────────────────────────────────────────────────
function SectionHeader({ index, eyebrow, title, cta }) {
  return (
    <header className="sh">
      <div className="sh-meta">
        <span className="mono-tag">{index}</span>
        <span className="sh-eyebrow">{eyebrow}</span>
      </div>
      <div className="sh-row">
        <h2 className="sh-title">{title}</h2>
        {cta ? <a href={cta.href} target="_blank" rel="noreferrer" className="sh-cta">{cta.label}</a> : null}
      </div>
    </header>);

}

function GridOverlay() {
  return <div className="grid-overlay" aria-hidden="true" />;
}

// ─── VISION ──────────────────────────────────────────────────────────────────
function Vision() {
  return (
    <section className="section section-vision" id="vision">
      <SectionHeader index="01" eyebrow="The imperative" title="Africa already has the phone. It still doesn't have the doctor." />
      <div className="vision-grid">
        <div className="vision-stat">
          <div className="vs-num">1.1<span className="vs-unit">B</span></div>
          <div className="vs-lbl">Mobile subscriptions across the continent.</div>
        </div>
        <div className="vision-stat vision-stat-emph">
          <div className="vs-num">84<span className="vs-unit">%</span></div>
          <div className="vs-lbl">Of African adults connected to mobile.</div>
        </div>
        <div className="vision-stat">
          <div className="vs-num">1<span className="vs-unit">:5k</span></div>
          <div className="vs-lbl">Average doctor-to-patient ratio across Sub-Saharan Africa. WHO recommends 1:1,000.</div>
        </div>
        <div className="vision-stat vision-stat-warn">
          <div className="vs-num">60<span className="vs-unit">%+</span></div>
          <div className="vs-lbl">Of African health spending paid out-of-pocket, at the counter.</div>
        </div>
      </div>
      <div className="vision-copy">
        <p>
          We can WhatsApp the diagnosis. We can M-Pesa the consultation fee. We cannot get the prescription past the village dispensary, the chronic refill into a working hand, or the specialist's plan onto the local pharmacist's screen. Telemedicine apps stop at the sick note. Remittance apps stop at the cash. Between them sits the part that actually heals  and nobody owns it.
        </p>
        <p className="vision-emph">
          Gloti-Care owns it. We connect the people who fund care to the people who deliver it  with the prescription, the audit trail, and the patient at the centre.
        </p>
      </div>
    </section>);

}

// ─── BENEFICIARIES ───────────────────────────────────────────────────────────
function Beneficiaries() {
  const profiles = [
  {
    tag: "B-01",
    side: "City",
    name: "The urban subscriber.",
    body: "You're 31, working in Westlands, with parents up-country and a teleconsult that just emailed you a prescription you can't fill before the pharmacy closes. You want the refill on your phone, the consult on the calendar, and the receipts where your CFO can find them. So does your accountant.",
    chips: ["Same-day refills", "Specialist on calendar", "Dependent wallets", "Receipts for HR"]
  },
  {
    tag: "B-02",
    side: "Village",
    name: "The rural beneficiary.",
    body: "Your mother is in Bondo. The nearest specialist is six hours away. The last refill cost her two buses and a missed market day. Gloti-Care brings the Community Health Promoter to her door, the prescription to her phone, and the audit trail back to whoever paid  wherever they are.",
    chips: ["CHP at the door", "Refill by SMS", "No travel, no queue", "Funded by anyone"]
  }];

  return (
    <section className="section section-beneficiaries" id="beneficiaries">
      <SectionHeader index="02" eyebrow="Who we serve" title="Same standard. Whether the patient is in Westlands or Bondo." />
      <div className="bene-grid">
        {profiles.map((p) =>
        <article key={p.tag} className="bene-card">
            <div className="bene-meta">
              <span className="mono-tag">{p.tag}</span>
              <span className="bene-side">{p.side}</span>
            </div>
            <h3 className="bene-name">{p.name}</h3>
            <p className="bene-body">{p.body}</p>
            <div className="bene-chips">
              {p.chips.map((c) => <span key={c} className="key-chip">{c}</span>)}
            </div>
          </article>
        )}
      </div>
    </section>);

}

// ─── DUAL ENGINE ─────────────────────────────────────────────────────────────
function DualEngine() {
  return (
    <section className="section section-engine" id="engine">
      <SectionHeader index="04" eyebrow="The funding circle" title="Four people are paying for Africa's healthcare. Now they're paying together." />
      <div className="pillars-grid">
        <article className="pillar-card">
          <div className="pillar-head"><span className="mono-tag">01</span><span className="engine-side">The neighbour</span></div>
          <h3 className="engine-h">The Nairobi sibling.</h3>
          <p>The city-to-village pipeline that already exists  made honest. Pay a parent's pharmacy wallet from the office in Upper Hill. They can't withdraw it; only the chemist can claim it. You can stop sending the same money twice.</p>
          <ul className="engine-list">
            <li><span>Funded by</span><span className="mono">M-Pesa · card · bank</span></li>
            <li><span>Cadence</span><span className="mono">recurring · KES</span></li>
          </ul>
        </article>
        <article className="pillar-card">
          <div className="pillar-head"><span className="mono-tag">02</span><span className="engine-side">The cousin abroad</span></div>
          <h3 className="engine-h">The diaspora cousin.</h3>
          <p>Forty million Africans abroad send home roughly $95B every year. Less than a fifth of it is meant to be entertainment. Gloti-Care is the rail for the rest  multi-currency in, verified care out, and a receipt that ends the family group-chat debate.</p>
          <ul className="engine-list">
            <li><span>Currencies</span><span className="mono">USD · GBP · EUR</span></li>
            <li><span>Settlement</span><span className="mono">T+0 · KES at clinic</span></li>
          </ul>
        </article>
        <article className="pillar-card">
          <div className="pillar-head"><span className="mono-tag">03</span><span className="engine-side">The institution</span></div>
          <h3 className="engine-h">The NGO programme officer.</h3>
          <p>Stop wiring grants to a partner who wires it to a sub-partner who screenshots a stack of receipts. Disburse to a named beneficiary, watch the credit clear at a named pharmacy, and download the GPS-stamped audit at quarter close.</p>
          <ul className="engine-list">
            <li><span>Disbursement</span><span className="mono">cohort · beneficiary</span></li>
            <li><span>Audit</span><span className="mono">GPS · signed</span></li>
          </ul>
        </article>
        <article className="pillar-card pillar-card-anchor">
          <div className="pillar-head"><span className="mono-tag">04</span><span className="engine-side">The anchor</span></div>
          <h3 className="engine-h">The State.</h3>
          <p>Native integration with national health authorities, starting with Kenya's SHA, PHC Fund, and ECCIF  and expanding across Ghana, Rwanda, Nigeria, and South Africa. The largest funder of healthcare on the continent uses the same rail as the smallest  with line-item reconciliation any Treasury can sign.</p>
          <ul className="engine-list">
            <li><span>Programmes</span><span className="mono">SHA · PHC · ECCIF</span></li>
            <li><span>Posture</span><span className="mono">co-located · MoH</span></li>
          </ul>
        </article>
      </div>
      <div className="engine-result">
        <span className="mono-tag">THE CIRCLE</span>
        <p>Four payers, one wallet, one provider network, one receipt. Subsidy stops being theoretical  a diaspora top-up and a state credit can co-fund the same prescription at the same pharmacy on the same afternoon.</p>
      </div>
    </section>);

}

// ─── MARKETPLACE ─────────────────────────────────────────────────────────────
function Marketplace() {
  return (
    <section className="section section-market" id="market">
      <SectionHeader index="06" eyebrow="The last mile" title="We don't dispatch one provider. We make every nearby provider compete to serve you." />
      <div className="market-grid">
        <article className="market-col">
          <div className="market-eyebrow"><span className="mono-tag">M-01</span> Open Tender</div>
          <h3 className="market-h">A live auction for your prescription.</h3>
          <p>
            Every script, lab order, and ambulance request is broadcast to the nearest vetted pharmacy, lab, private ambulance, or Community Health Promoter. The fastest qualified provider takes the job and delivers  to the door, not the dispensary queue.
          </p>
          <TenderVis />
        </article>
        <article className="market-col">
          <div className="market-eyebrow"><span className="mono-tag">M-02</span> Twin-Doctor</div>
          <h3 className="market-h">The London consultant. The local signature.</h3>
          <p>
            International specialists draft the care plan. A locally-registered physician (KMPDC in Kenya, NMCN in Nigeria, MDC in Ghana, HPCSA in South Africa) reviews, signs, and domesticates the prescription before it touches a local pharmacy. Global expertise. Local accountability. Hard-coded into the workflow.
          </p>
          <TwinVis />
        </article>
      </div>
    </section>);

}

function TenderVis() {
  return (
    <div className="tender">
      <div className="tender-head">
        <span className="mono">RX-2240 · Westlands → Kisumu</span>
        <span className="mono tender-eta">ETA 14:40</span>
      </div>
      <div className="tender-rows">
        <div className="tender-row tender-row-on">
          <span className="tr-rank">01</span>
          <span className="tr-name">Goodlife · Westlands</span>
          <span className="tr-meta mono">2.1 km · 4.9★</span>
          <span className="tr-stat">accepted</span>
        </div>
        <div className="tender-row">
          <span className="tr-rank">02</span>
          <span className="tr-name">MyDawa · Sarit</span>
          <span className="tr-meta mono">3.4 km · 4.7★</span>
          <span className="tr-stat tr-stat-dim">bid</span>
        </div>
        <div className="tender-row">
          <span className="tr-rank">03</span>
          <span className="tr-name">CHP · J. Mwangi</span>
          <span className="tr-meta mono">5.8 km · CHP-vetted</span>
          <span className="tr-stat tr-stat-dim">standby</span>
        </div>
      </div>
    </div>);

}

function TwinVis() {
  return (
    <div className="twin">
      <div className="twin-row twin-row-spec">
        <div className="twin-tag mono">CONSULTANT</div>
        <div className="twin-name">Dr. A. Singh · London</div>
        <div className="twin-perm twin-perm-on">drafts care plan</div>
        <div className="twin-perm twin-perm-off">cannot prescribe locally</div>
      </div>
      <div className="twin-arrow" aria-hidden="true">
        <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 3v14M5 12l5 5 5-5" stroke="currentColor" strokeWidth="1.25" fill="none" /></svg>
        <span className="mono">domesticate</span>
      </div>
      <div className="twin-row twin-row-reg">
        <div className="twin-tag mono">REGISTRAR · KMPDC</div>
        <div className="twin-name">Dr. M. Otieno · Nairobi</div>
        <div className="twin-perm twin-perm-on">reviews · signs</div>
        <div className="twin-perm twin-perm-on">issues prescription</div>
      </div>
    </div>);

}

// ─── ALLIANCE ────────────────────────────────────────────────────────────────
function Alliance() {
  const pillars = [
  { tag: "P-01", name: "DeRisk Technologies Group", role: "Technology & Finance", body: "Global IT operations, ITIL-standard governance, and the proprietary AI-driven telemedicine platform. A decade of operations across 60 countries.", chips: ["ITIL", "ITSM", "GCP", "ODPC / GDPR"] },
  { tag: "P-02", name: "Mount Kenya University", role: "Academic & Clinical Anchor", body: "24/7 student-staffed clinical call centre, Institutional Review Board oversight, baseline scoping studies, and continuous results-based M&E for chronic illness compliance.", chips: ["IRB", "M&E", "KAP studies", "Work-study"] },
  { tag: "P-03", name: "One Group Management Ltd", role: "Local Strategy & Operations", body: "Regulatory compliance with KMPDC, MoH, and the Digital Health Agency; government relations; deep integration with Kenya's Universal Health Coverage rollout.", chips: ["KMPDC", "MoH", "DHA", "UHC"] }];

  return (
    <section className="section section-alliance" id="alliance">
      <SectionHeader index="08" eyebrow="The alliance" title="Three partners. One mandate. National scale." />
      <div className="alliance-grid">
        {pillars.map((p) =>
        <article key={p.tag} className="pillar">
            <div className="pillar-meta">
              <span className="mono-tag">{p.tag}</span>
              <span className="pillar-role">{p.role}</span>
            </div>
            <h3 className="pillar-name">{p.name}</h3>
            <p className="pillar-body">{p.body}</p>
            <div className="pillar-chips">
              {p.chips.map((c) => <span key={c} className="key-chip">{c}</span>)}
            </div>
          </article>
        )}
      </div>
    </section>);

}

// ─── WHITEPAPER DRAWER ───────────────────────────────────────────────────────
function Whitepaper({ open, onClose }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {window.removeEventListener("keydown", onKey);document.body.style.overflow = "";};
  }, [open, onClose]);

  return (
    <div className={"paper " + (open ? "paper-open" : "")} aria-hidden={!open}>
      <div className="paper-scrim" onClick={onClose} />
      <aside className="paper-sheet" role="dialog" aria-label="GLOTI-Care Concept Note">
        <header className="paper-h">
          <div>
            <span className="mono-tag">CONCEPT NOTE · 001</span>
            <h2>GLOTI-Care · Executive Summary</h2>
            <p className="paper-sub">Prepared by DeRisk Technologies Group, One Group Management Ltd, and Mount Kenya University.</p>
          </div>
          <button type="button" className="paper-x" onClick={onClose} aria-label="Close">✕</button>
        </header>
        <div className="paper-body">
          <PaperSection n="§ 01" title="Executive Summary">
            <p>Africa is at the threshold of a digital health transformation. <strong>1.1 billion mobile subscriptions</strong> and <strong>84% adult connectivity</strong> span the continent, yet the system remains crippled by specialist maldistribution, overcrowded public facilities, and prohibitive out-of-pocket costs. <strong>GLOTI-Care</strong> is a highly scalable, AI-driven telemedicine ecosystem launched by One Group Management Ltd and DeRisk Technologies Group, beginning in Kenya and engineered to scale across Sub-Saharan and West Africa.</p>
            <p>It operates as a robust social enterprise: premium subscriptions from urban professionals and Diaspora "Health Remittances" cross-subsidise care for underserved rural communities. An "Open Tender" gig-economy marketplace ensures the physical, last-mile delivery of diagnostics and medications.</p>
          </PaperSection>
          <PaperSection n="§ 02" title="Background &amp; Rationale">
            <p>Patients in rural and peri-urban areas face severe shortages of medical specialists, predominantly clustered in Nairobi. They incur high travel costs and life-threatening delays. Public facilities suffer overcrowded wards, limited bed capacity, and exhaustive wait times  directly elevating patient safety risks.</p>
            <p>Existing platforms (M-Tiba, Ponea Health, MyDawa) demonstrate market demand but operate in heavily fragmented silos. Patients receive a tele-consultation and digital prescription, then are abandoned to navigate physical fulfilment alone  leading to massive drop-off and failed clinical outcomes.</p>
          </PaperSection>
          <PaperSection n="§ 03" title="The GLOTI-Care Ecosystem">
            <ol className="paper-ol">
              <li><strong>Dual-Engine Financial Model.</strong> Diaspora and affluent urban capital purchase ring-fenced Health Credits held in escrow until verified service delivery  cross-subsidising rural care.</li>
              <li><strong>"Open Tender" Marketplace.</strong> Geospatial dispatch to the nearest vetted pharmacy, lab, private ambulance, or Community Health Promoter  Uber-style logic for clinical fulfilment.</li>
              <li><strong>Regulatory Twin-Doctor Bridge.</strong> International specialists draft care plans; locally licensed KMPDC Registrars review, sign, and domesticate every prescription.</li>
              <li><strong>Public Health Integration.</strong> SHA e-claim processing, PHC Fund and ECCIF dispatch, GPS-verified service delivery  establishing a B2G revenue stream anchored in national budgets.</li>
            </ol>
          </PaperSection>
          <PaperSection n="§ 04" title="MKU's Strategic Role">
            <p><strong>Research &amp; ethical oversight.</strong> Baseline mapping, KAP and efficacy studies, IRB-governed data utilisation, and stakeholder dissemination forums.</p>
            <p><strong>Customer care, jobs, and incubation.</strong> A 24-hour clinical call centre staffed via the work-study program; a verified locum pipeline for student doctors, pharmacists, and nurses; a real-world sandbox inside MKU's incubation centre for student spin-offs.</p>
            <p><strong>Results-based M&amp;E.</strong> Continuous evaluation of access, safety, strain, and cost; specialised compliance monitoring for non-communicable diseases.</p>
          </PaperSection>
          <PaperSection n="§ 05" title="Implementation Roadmap">
            <ol className="paper-ol paper-ol-roadmap">
              <li><strong>Months 1–2 · Foundation &amp; Baseline.</strong> Tripartite governance formalised; MKU initiates desktop research and scoping.</li>
              <li><strong>Months 3–4 · Build &amp; Service Desk.</strong> DeRisk engineers core platform; MKU stands up the 24-hour call centre with ITSM training.</li>
              <li><strong>Months 5–6 · Network &amp; Training.</strong> Local clinicians, Diaspora specialists, pharmacies and labs onboarded.</li>
              <li><strong>Months 7–8 · Nairobi Pilot.</strong> Twin-Doctor workflow live; M&amp;E instrumentation begins.</li>
              <li><strong>Months 9–12 · National Scale-up.</strong> SHA API integration; rural county expansion.</li>
              <li><strong>Ongoing · Innovation.</strong> DeRisk Development Lab inside MKU's incubation centre.</li>
            </ol>
          </PaperSection>
          <PaperSection n="§ 06" title="Funding &amp; Revenue Share">
            <p>GLOTI-Care is 100% capitalised by DeRisk Technologies Group. MKU bears no capital risk. Returns flow via a Master Service Agreement with a Revenue-Share Annex  a fixed percentage of cross-border consultations and B2G e-claim flows handled through the MKU call centre  reconciled monthly through automated digital escrow.</p>
          </PaperSection>
          <div className="paper-foot">
            <span className="mono">© 2026 glotiAfrica · Concept Note v1.4 · build 0508-A</span>
            <a href="#" className="btn btn-primary btn-lg" onClick={(e) => e.preventDefault()}>Download PDF ↓</a>
          </div>
        </div>
      </aside>
    </div>);

}

function PaperSection({ n, title, children }) {
  return (
    <section className="paper-sect">
      <header><span className="mono-tag">{n}</span><h3 dangerouslySetInnerHTML={{ __html: title }} /></header>
      <div className="paper-prose">{children}</div>
    </section>);

}

// Mount
ReactDOM.createRoot(document.getElementById("root")).render(<App />);