const Ico = {
  arrow: () => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 8h11M9 4l4 4-4 4"/></svg>,
  down: () => <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 7l4 4 4-4"/></svg>,
};

const DONATE_URL = 'https://www.gofundme.com/f/protect-the-frontline';
// One-off gifts through PayPal Giving Fund (no fees; Gift Aid handled by PayPal).
const PAYPAL_URL = 'https://www.paypal.com/gb/fundraiser/charity/5503371';
// Monthly giving form (Zeffy). Leave empty until it exists; /give then shows only the PayPal button.
const MONTHLY_URL = 'https://www.zeffy.com/en-GB/donation-form/give-monthly-care-where-its-needed';
const LINKEDIN_URL = 'https://www.linkedin.com/company/axiom-global-medicine';

const Brand = ({ badge = true }) => (
  <div className="brand">
    {badge && <img className="badge" src="assets/logo_axiom_badge_small.png" alt="" />}
    <div className="wm">
      <div className="mark">Axiom</div>
      <div className="sub">Global Medicine</div>
    </div>
  </div>
);

function Nav({ page }) {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const on = () => setSolid(window.scrollY > 40);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  const jump = (e, id) => {
    if (page !== 'home') return;
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' });
  };
  const href = (id) => (page === 'home' ? '#' + id : 'index.html#' + id);
  return (
    <nav className={'nav' + (solid ? ' solid' : '')}>
      <div className="shell">
        <a href="index.html" className="brand-link"><Brand /></a>
        <div className="menu">
          <div className="item has-sub">
            <a href="bios.html" className={page === 'bios' ? 'on' : ''}>Who We Are <Ico.down /></a>
            <div className="sub-menu">
              <a href="bios.html">Board of Trustees</a>
              <a href={href('mission')} onClick={(e) => jump(e, 'mission')}>Our Mission</a>
            </div>
          </div>
          <div className="item">
            <a href={href('work')} onClick={(e) => jump(e, 'work')}>Our Work</a>
          </div>
          <div className="item has-sub">
            <a href={href('teach')} onClick={(e) => jump(e, 'teach')}>What We Teach <Ico.down /></a>
            <div className="sub-menu">
              <a href={href('teach')} onClick={(e) => jump(e, 'teach')}>Humanitarian First Responder</a>
            </div>
          </div>
        </div>
        <a className="cta-btn" href="give.html">Donate</a>
      </div>
    </nav>
  );
}

const Hero = () => (
  <section className="hero" id="top">
    <div className="bg"><image-slot id="v2-hero" shape="rect" placeholder="Drop hero image, wide landscape crop"></image-slot></div>
    <div className="scrim" />
    <div className="shell">
      <div className="inner">
        <div className="eyebrow">Charitable Incorporated Organisation · No. 1212435</div>
        <h1>Education.<br />Logistics.<br />Support.</h1>
        <p>Axiom Global Medicine is a UK charity led by volunteer paramedics, physicians and educators. We connect donors of medical supplies with aid organisations responding to crises, and we're developing practical medical training for people preparing to work in humanitarian settings.</p>
        <div className="cta">
          <a className="btn btn-solid" href="#mission">Our Mission</a>
          <a className="btn btn-ghost" href="#work">Our Work</a>
        </div>
      </div>
    </div>
  </section>
);

const Mission = () => (
  <section className="intro reveal" id="mission">
    <div className="shell">
      <div className="grid">
        <div className="side">
          <div className="eyebrow">Our Mission</div>
          <h2>Education and care.<br />No matter where.</h2>
          <hr className="rule" />
        </div>
        <div className="body">
          <p>When a crisis hits, two things decide how much care reaches people: whether the right supplies arrive, and whether the people giving care know what to do with them. Axiom Global Medicine works on both. We find donated medical supplies and get them to established aid organisations working in the response, using free and shared transport wherever we can. And we're developing focused, evidence-based training for people heading into humanitarian settings, so they arrive ready to assess, treat and hand over patients safely. We work through experienced partners rather than around them, and we'd rather build lasting capability than create reliance. Our long-term aim is to take this work into conflict zones and disaster areas, where the gap between need and care is widest, building up step by step from what we can do well today.</p>
        </div>
      </div>
    </div>
  </section>
);

const MISSION_PILLARS = [
  ['Education & Training', 'We are developing the Humanitarian First Responder course: practical, competency-based medical training for people preparing to work in humanitarian settings, designed around the conditions they will actually face.'],
  ['Logistics & Supply', 'We connect donors of medical supplies with aid organisations in humanitarian responses, and arrange free or shared transport to get those supplies where they are needed. Our first shipment reached an Ebola treatment centre in the DRC in 2026.'],
  ['Partnership', 'No two crises are the same. We work alongside established organisations that know the ground, filling specific gaps they tell us about rather than arriving with our own agenda.'],
];

const Pillars = () => (
  <section className="pillars reveal" id="what">
    <div className="shell">
      <div className="sec-head">
        <div className="eyebrow">What We Do</div>
        <h2>Three strands</h2>
        <hr className="rule" />
      </div>
      <div className="grid">
        {MISSION_PILLARS.map(([t, b], i) => (
          <div className="pillar" key={t}>
            <div className="txt">
              <h3>{t}</h3>
              <p>{b}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const DRC_PHOTOS = [
  ['assets/drc/1-pallet-new-york.jpg', 'A labelled pallet ready to leave Afya, New York, August 2026. Photo: Afya Foundation'],
  ['assets/drc/2-medair-boxes.jpg', 'Supplies marked for Medair after arrival in the DRC, September 2026. Photo: Medair'],
  ['assets/drc/3-masks.jpg', 'Masks from the shipment in the warehouse, September 2026. Photo: Medair'],
  ['assets/drc/4-katwa-etc.jpg', "Medair's Ebola treatment centre, Katwa, September 2026. Photo: Medair"],
];

const Work = () => (
  <section className="teach work reveal" id="work">
    <div className="shell">
      <div className="sec-head">
        <div className="eyebrow">Our Work</div>
        <h2>DRC Ebola<br />response, 2026</h2>
        <hr className="rule" />
      </div>
      <div className="grid">
        <div className="lede">
          <p>In May 2026 an outbreak of Ebola disease caused by Bundibugyo virus was declared in the Democratic Republic of the Congo. There is no licensed vaccine for this strain, so protective equipment for health workers is critical.</p>
          <p>We brought together a donor in New York, the Afya Foundation, and Medair, which runs an Ebola treatment centre in Katwa, North Kivu. Seven pallets of gloves, gowns and masks were flown free of charge by Airlink from New York to Entebbe, then carried by road to Bunia with the WFP-led Logistics Cluster in September 2026. The equipment is now in use at Medair's treatment centre.</p>
          <p>Further shipments are being planned with Medair and donors in the US and Canada.</p>
        </div>
        <div className="facts">
          <div className="fact"><span className="k">Shipped</span><span className="v">7 pallets of gloves, gowns and masks</span></div>
          <div className="fact"><span className="k">Donor</span><span className="v">Afya Foundation, New York</span></div>
          <div className="fact"><span className="k">Recipient</span><span className="v">Medair Ebola treatment centre, Katwa, DRC</span></div>
          <div className="fact"><span className="k">Transport</span><span className="v">Free airfreight by Airlink; road transport with the Logistics Cluster</span></div>
        </div>
      </div>
      <div className="work-photos">
        {DRC_PHOTOS.map(([src, cap]) => (
          <figure key={src}><img src={src} alt={cap} loading="lazy" /><figcaption>{cap}</figcaption></figure>
        ))}
      </div>
      <div className="work-cta">
        <a className="btn btn-solid" href={DONATE_URL} target="_blank" rel="noopener">Support the response</a>
      </div>
    </div>
  </section>
);

const HFR_DAYS = [
  ['Day 1', 'Foundations and patient assessment'],
  ['Day 2', 'Trauma care and haemorrhage control'],
  ['Day 3', 'Communicable disease detection and infection control'],
  ['Day 4', 'Camp public health and WASH'],
  ['Day 5', 'Chronic disease, maternal health and mental health'],
  ['Day 6', 'Mass casualty, scene management and transport'],
  ['Day 7', 'Competency assessment'],
];

const HFR_FOR = [
  ['UK-based aid workers', 'People preparing to work in camps, displacement settings and communities where health services have broken down.'],
  ['Volunteers', 'Those about to join a humanitarian response who need structured clinical skills and a clear scope of practice.'],
  ['Early-career responders', 'People starting out in humanitarian or emergency work who want a solid, practical grounding before they go.'],
];

const Teach = () => (
  <section className="teach reveal" id="teach">
    <div className="shell">
      <div className="sec-head">
        <div className="eyebrow">What We Teach</div>
        <h2>Humanitarian<br />First Responder</h2>
        <hr className="rule" />
      </div>
      <div className="grid">
        <div className="lede">
          <p>The Humanitarian First Responder course is a seven-day intensive course for people preparing to provide care in high-need areas: places where infrastructure has broken down, where displaced populations are living in camps, and where patients often have to travel a long way before they can reach a hospital.</p>
          <p>We are hoping to run a pilot course in London in 2027, with dates set once funding is confirmed. It would be run to the HPass Quality Standards for Humanitarian Learning, with the aim of HPass certification so that graduates' training is recognised by humanitarian organisations.</p>
          <p>Students would learn to assess a patient properly, recognise the signs that someone is seriously unwell, give the right immediate care, and know when a case needs to be passed to someone more qualified. The training is practical, and the skills are the ones that matter most where medical help is limited or far away.</p>
        </div>
        <div className="facts">
          <div className="fact"><span className="k">Status</span><span className="v">Pilot planned for 2027, subject to funding</span></div>
          <div className="fact"><span className="k">Location</span><span className="v">London, UK</span></div>
          <div className="fact"><span className="k">Group size</span><span className="v">Up to 12 students</span></div>
          <div className="fact"><span className="k">Length</span><span className="v">7 days, intensive</span></div>
          <div className="fact"><span className="k">Format</span><span className="v">Classroom teaching with daily hands-on practical labs</span></div>
          <div className="fact"><span className="k">Assessment</span><span className="v">Practical and written competency assessment on the final day</span></div>
        </div>
      </div>
      <div className="who-for">
        <h3>Who it is for</h3>
        <div className="rows">
          {HFR_FOR.map(([t, b]) => (
            <div className="cell" key={t}><div className="t">{t}</div><p>{b}</p></div>
          ))}
        </div>
        <p className="note">No prior clinical qualification is assumed. The course starts with scope of practice and basic assessment, and builds from there. Bursaries, including meals and travel, would be available for students who can't afford the fee.</p>
      </div>
      <div className="days">
        <h3>The seven days</h3>
        <ol>
          {HFR_DAYS.map(([d, t]) => (
            <li key={d}><span className="d">{d}</span><span className="t">{t}</span></li>
          ))}
        </ol>
      </div>
      <p className="outcome">On completion, responders would be able to assess patients systematically, identify high-risk conditions, prevent and detect communicable disease, manage mass casualty situations, move patients safely, and hand over clearly to the next person caring for the patient.</p>
    </div>
  </section>
);

const Band = ({ kicker, title, label, href, slot }) => (
  <section className="band reveal">
    <div className="shell">
      <div className="inner">
        {kicker && <div className="eyebrow">{kicker}</div>}
        <h2>{title}</h2>
        <a className="btn btn-solid" href={href}>{label}</a>
      </div>
    </div>
  </section>
);

const Credentials = () => (
  <section className="creds reveal">
    <div className="shell">
      <div className="grid">
        <div className="cell"><div className="big">1212435</div><div className="cap">Registered charity number</div></div>
        <div className="cell"><div className="big">CIO</div><div className="cap">Charitable Incorporated Organisation</div></div>
        <div className="cell"><div className="big">5</div><div className="cap">Trustees on the board</div></div>
        <div className="cell"><div className="big">UK</div><div className="cap">Registered in England &amp; Wales</div></div>
      </div>
    </div>
  </section>
);

const TRUSTEES = ['Spencer Gifford', 'Rebecca Cusack', 'Reza Salari', 'William Cupo', 'Todd Alan Curtis'];

const WhoWeAre = () => (
  <section className="who reveal" id="who">
    <div className="shell">
      <div className="grid">
        <div>
          <div className="eyebrow">Our Board</div>
          <h2>Professionals<br />with compassion</h2>
          <hr className="rule" />
          <p>The charity is governed by a board of five trustees spanning medical operations, technology, education, business development, and strategic leadership.</p>
          <a className="more" href="bios.html">Read the bios <Ico.arrow /></a>
        </div>
        <div className="board">
          <div className="board-title">Board of Trustees</div>
          {TRUSTEES.map(n => (
            <div className="row" key={n}><span className="dot" /><span className="nm">{n}</span></div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Contact = () => (
  <section className="contact reveal" id="contact">
    <div className="shell">
      <div className="head">
        <div className="eyebrow">Get in Touch</div>
        <h2>Contact Us</h2>
        <hr className="rule" />
        <p>For partnership enquiries, programme questions, or general correspondence, reach the charity at the details below.</p>
      </div>
      <div className="grid">
        <div className="card">
          <div className="k">Based in</div>
          <div className="v">London, United Kingdom</div>
          <div className="k" style={{ marginTop: 28 }}>LinkedIn</div>
          <a className="v lnk" href={LINKEDIN_URL} target="_blank" rel="noopener">Axiom Global Medicine</a>
        </div>
        <div className="card">
          <div className="k">Telephone</div>
          <a className="v lnk" href="tel:+447415879633">07415 879633</a>
          <div className="k" style={{ marginTop: 28 }}>Email</div>
          <a className="v lnk" href="mailto:contact@aeiaxioma.uk">contact@aeiaxioma.uk</a>
        </div>
      </div>
    </div>
  </section>
);

const PARTNERS = [
  { name: 'Afya', src: 'assets/partner-afya.png' },
  { name: 'Medair', src: 'assets/partner-medair.png' },
  { name: 'Butterfly Global Health', src: 'assets/partner-butterfly.png' },
];

const Partners = () => (
  <section className="partners reveal" id="partners">
    <div className="shell">
      <div className="sec-head">
        <div className="eyebrow">Who We Work With</div>
        <h2>Partners</h2>
      </div>
      <div className="grid">
        {PARTNERS.map((p, i) => (
          <div className="cell" key={p.name}>
            {p.src
              ? <img className="logo" src={p.src} alt={p.name} />
              : <image-slot id={'v2-partner-' + (i + 1)} shape="rect" placeholder={'Drop logo: ' + p.name}></image-slot>}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="foot">
    <div className="shell">
      <div className="grid">
        <div>
          <Brand />
          <p className="blurb">A UK charity working towards medical education, supply and support in conflict zones and disaster response, starting with supplies for humanitarian responses and practical training for responders.</p>
          <div className="reg">Registered charity number: 1212435</div>
        </div>
        <div>
          <h5>Site</h5>
          <ul>
            <li><a href="index.html#mission">Our Mission</a></li>
            <li><a href="index.html#work">Our Work</a></li>
            <li><a href="index.html#teach">What We Teach</a></li>
            <li><a href="bios.html">Who We Are</a></li>
            <li><a href="index.html#contact">Contact Us</a></li>
            <li><a href="give.html">Give monthly</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <div className="contact-line"><span className="k">Telephone</span><a href="tel:+447415879633">07415 879633</a></div>
          <div className="contact-line"><span className="k">Email</span><a href="mailto:contact@aeiaxioma.uk">contact@aeiaxioma.uk</a></div>
          <div className="contact-line"><span className="k">LinkedIn</span><a href={LINKEDIN_URL} target="_blank" rel="noopener">Axiom Global Medicine</a></div>
        </div>
        <div>
          <h5>Location</h5>
          <p>London, United Kingdom<br />Charitable Incorporated Organisation<br />Registered in England &amp; Wales</p>
        </div>
      </div>
      <div className="bar">
        <span>© 2026 Axiom Global Medicine · Charity no. 1212435 · aeiaxioma.uk</span>
        <span className="legal-name">Axiom Global Medicine is the working name of Aei Axioma, a charitable incorporated organisation registered with the Charity Commission for England and Wales (no. 1212435).</span>
      </div>
    </div>
  </footer>
);

const TRUSTEE_BIOS = [
  {
    name: 'Spencer Gifford',
    bio: [
      "I founded Axiom Global Medicine and chair its board of trustees. I've worked in emergency medical services since 2012, for domestic and international agencies, on placements across Africa, South America, the Caribbean, Europe and North America, as well as offshore on oil rigs and maritime vessels. I now work in an NHS emergency department in London.",
      "Alongside clinical work, I've designed education programmes and supported safety initiatives. I developed the Humanitarian First Responder course with a colleague and would teach it myself. Working in places where help is a long way off taught me that the most useful thing a responder can carry is training, and that's what this charity is built around.",
    ],
  },
  {
    name: 'Rebecca Cusack',
    bio: ["Dr. Rebecca Cusack grew up in the South of England, UK where she pursued undergraduate studies in Biomedical Science as well as medical school. Dr. Cusack has lived, studied, trained and worked all over the world including the West Indies and Montana, USA. She is former faculty of the University of East Anglia where she was part of the leadership team tasked with running the Biomedicine Apprenticeship Program. She has training in Extreme Medicine and is an avid para-athlete having survived meningococcal meningitis as a child. She is a fierce advocate for disabled physicians and has spoken internationally on the topics of disability and neurodivergence in the fields of medicine. Dr. Cusack currently resides in Maine, USA with her husband and three-year-old daughter; she is completing medical residency in neurology after a successful career in academic medicine."],
  },
  {
    name: 'Reza Salari',
    bio: ["Reza Salari oversees the global cybersecurity, technology risk, and operational resilience program for Pacific Life Re and its subsidiary, UnderwriteMe. He is primarily responsible for advising the business on cyber risks, security risk management, geopolitical risk, awareness, and driving adoption of security services and best practices. Reza served in the US Air Force and participated in several deployments as part of a communications element based in Europe. Later as a civilian, he spent over a decade in the US defense industry working on cybersecurity projects, operations, and research for the US Department of Defense and intelligence agencies. He holds two Masters degrees, most recently an MBA from University of California, Irvine. Prior to that he obtained an MS in Computer Information Systems from Boston University. For undergraduate studies he attended San Diego State University and holds a BA in International Security and Conflict Resolution. He is a Chartered Security Professional (CSyP) and holds multiple industry leading certifications to include the Certified Information Systems Security Professional (CISSP); Certified in Risk and Information Systems Controls (CRISC); and certified in Strategic Planning, Policy, and Leadership (GSTRT)."],
  },
  {
    name: 'William Cupo',
    bio: [
      "Dr. William Cupo is a Fellow of the Royal College of Emergency Medicine and a Diplomate of the American Board of Emergency Medicine, with more than two decades of consultant-level experience in emergency care across the United Kingdom, the United States, and Australia. He currently practises as a Consultant Emergency Physician at the Royal Free Hospital in London.",
      "A graduate of Jefferson Medical College, Dr. Cupo trained in emergency medicine with the United States Navy and served operationally as a shock-trauma platoon commander, providing frontline casualty stabilisation. Over his career he has worked as a consultant, attending physician, and departmental director across level-one trauma centres, regional hospitals, and rural emergency services on three continents, including as site lead for paediatric emergency medicine.",
      "Alongside clinical practice, Dr. Cupo has held academic appointments and remains committed to teaching: training residents, registrars, and medical students, and supporting community physicians in emergency-medicine best practice.",
    ],
  },
  { name: 'Todd Alan Curtis', bio: ['Biography to follow.'] },
];

const BiosHero = () => (
  <header className="bios-hero">
    <div className="bg"><image-slot id="bios-hero" shape="rect" placeholder="Drop a wide banner image"></image-slot></div>
    <div className="scrim" />
    <div className="shell">
      <div className="inner">
        <div className="eyebrow">Our Board</div>
        <h1>Professionals<br />with compassion</h1>
        <hr className="rule" />
        <p>Five trustees spanning medical operations, technology, education, business development, and strategic leadership. They are the people accountable for Axiom Global Medicine's direction and governance.</p>
      </div>
    </div>
  </header>
);

const Bios = () => (
  <section className="bios">
    <div className="shell">
      {TRUSTEE_BIOS.map((t, i) => (
        <article className={'bio reveal' + (i % 2 === 1 ? ' flip' : '')} key={t.name}>
          <div className="shot"><image-slot id={'bio-' + i} shape="rect" placeholder={'Drop portrait: ' + t.name}></image-slot></div>
          <div className="copy">
            <h2>{t.name}</h2>
            <hr className="rule" />
            {t.bio.map((p, k) => <p key={k}>{p}</p>)}
          </div>
        </article>
      ))}
    </div>
  </section>
);

const GIVE_AMOUNTS = [1, 2, 5];

const GiveButtons = () => (
  MONTHLY_URL
    ? <div className="give-amounts">
        {GIVE_AMOUNTS.map(a => (
          <a key={a} className={'btn ' + (a === 2 ? 'btn-solid' : 'btn-ghost')} href={MONTHLY_URL} target="_blank" rel="noopener">£{a} a month</a>
        ))}
        <a className="btn btn-ghost" href={PAYPAL_URL} target="_blank" rel="noopener">Give once with PayPal</a>
      </div>
    : <div className="give-amounts">
        <a className="btn btn-solid" href={PAYPAL_URL} target="_blank" rel="noopener">Donate with PayPal</a>
      </div>
);

const GiveHero = () => (
  <section className="hero give-hero">
    <div className="shell">
      <div className="inner">
        <div className="eyebrow">Monthly giving · Charity no. 1212435</div>
        <h1>£2 a month.<br />Care where<br />it's needed.</h1>
        <p>Axiom Global Medicine is a small, volunteer-led UK charity. We get donated medical supplies to health workers in crisis responses, and we're developing practical medical training for people heading into humanitarian settings. Our long-term aim is to bring medical education, supplies and support to conflict zones and disaster response. A pound or two a month helps us keep going.</p>
        <GiveButtons />
        <p className="give-small">{MONTHLY_URL ? 'Cancel or change your gift at any time.' : 'Monthly giving is coming soon. For now you can give a one-off donation.'}</p>
      </div>
    </div>
  </section>
);

const GIVE_USES = [
  ['Protective equipment', 'Getting donated gloves, gowns and masks to health workers in outbreaks and emergencies, and covering the costs that free transport doesn\'t.'],
  ['Training responders', 'Developing the Humanitarian First Responder course, including bursaries for students who couldn\'t otherwise afford it.'],
  ['Keeping the lights on', 'The small, unglamorous costs of running a charity properly, so every partnership is done well.'],
];

const GiveStory = () => (
  <section className="teach work reveal">
    <div className="shell">
      <div className="sec-head">
        <div className="eyebrow">What we've done</div>
        <h2>From New York<br />to an Ebola ward</h2>
      </div>
      <div className="grid">
        <div className="lede">
          <p>In 2026 we connected the Afya Foundation in New York with Medair's Ebola treatment centre in Katwa, in the Democratic Republic of the Congo. Seven pallets of gloves, gowns and masks were flown free of charge by Airlink and taken by road into the DRC with the Logistics Cluster. They are now protecting health workers on the front line.</p>
          <p>That was our first shipment, delivered by volunteers. Regular gifts let us plan the next one, and the one after that.</p>
        </div>
        <div className="facts">
          <div className="fact"><span className="k">£1 a month</span><span className="v">£12 a year</span></div>
          <div className="fact"><span className="k">£2 a month</span><span className="v">£24 a year, or £30 with Gift Aid</span></div>
          <div className="fact"><span className="k">100 supporters at £2</span><span className="v">£2,400 a year</span></div>
        </div>
      </div>
      <div className="work-photos give-photos">
        {DRC_PHOTOS.filter((_, i) => i === 0 || i === 3).map(([src, cap]) => (
          <figure key={src}><img src={src} alt={cap} loading="lazy" /><figcaption>{cap}</figcaption></figure>
        ))}
      </div>
    </div>
  </section>
);

const GiveUses = () => (
  <section className="pillars reveal">
    <div className="shell">
      <div className="sec-head">
        <div className="eyebrow">Where it goes</div>
        <h2>What your gift supports</h2>
      </div>
      <div className="grid">
        {GIVE_USES.map(([t, b]) => (
          <div className="pillar" key={t}><div className="txt"><h3>{t}</h3><p>{b}</p></div></div>
        ))}
      </div>
    </div>
  </section>
);

const GiveClose = () => (
  <section className="teach reveal">
    <div className="shell">
      <div className="sec-head">
        <div className="eyebrow">Give monthly</div>
        <h2>Small amounts,<br />every month</h2>
      </div>
      <div className="lede give-close">
        <p>If you're a UK taxpayer, tick Gift Aid when you give and we can claim an extra 25p for every £1 from HMRC, at no cost to you.</p>
        <GiveButtons />
        <p className="give-small">Axiom Global Medicine is a charitable incorporated organisation registered in England &amp; Wales, no. 1212435. <a href="index.html">Find out more about us</a>.</p>
      </div>
    </div>
  </section>
);

function mountReveal() {
  const els = document.querySelectorAll('.reveal');
  if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
  const io = new IntersectionObserver((rows) => {
    rows.forEach(r => { if (r.isIntersecting) { r.target.classList.add('in'); io.unobserve(r.target); } });
  }, { rootMargin: '0px 0px -12% 0px', threshold: 0.08 });
  els.forEach(e => io.observe(e));
}

Object.assign(window, { GiveHero, GiveStory, GiveUses, GiveClose, Nav, Hero, Mission, Pillars, Work, Teach, Band, Credentials, WhoWeAre, Contact, Partners, Footer, BiosHero, Bios, mountReveal });