// AirStep — page sections

const LogoHeader = () => (
  <div className="logo-header">
    <a href="index.html" className="logo-header-link" aria-label="Airstep home">
      <Logo height={90}/>
    </a>
  </div>
);

const AnnounceBar = () => (
  <div className="announce">
    <span>For diabetes &amp; peripheral neuropathy · Class A Medical Device</span>
    <span className="sep">•</span>
    <span>NAPPI-coded · PMB listed · Claimable on medical aid</span>
    <span className="sep">•</span>
    <span>Delivered across South Africa</span>
  </div>
);

const Nav = ({ cartCount, onCart }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  // Lock body scroll while the mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const links = [
    { href: "diabetes.html", label: "Diabetes & Neuropathy" },
    { href: "just-diagnosed.html", label: "Just Diagnosed" },
    { href: "technology.html",  label: "Technology" },
    { href: "endorsements.html",  label: "Endorsements" },
    { href: "diabetes-aware.html", label: "Risk Check" },
    { href: "shop.html",      label: "Shop" },
    { href: "support.html", label: "Support" },
  ];

  return (
    <React.Fragment>
      <header className="nav">
        <div className="nav-inner">
          <a href="index.html" className="brand" aria-label="Airstep home" onClick={()=>setMenuOpen(false)}>
            <Logo height={36}/>
          </a>
          <nav className="nav-links" aria-label="Primary">
            {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          </nav>
          <div className="nav-right">
            <button className="cart-btn" onClick={onCart} aria-label="Open cart">
              <Icon.bag size={16}/>
              <span className="cart-btn-label">Cart</span>
              {cartCount > 0 && <span className="count">{cartCount}</span>}
            </button>
            <button
              className={`nav-burger ${menuOpen ? "open" : ""}`}
              onClick={()=>setMenuOpen(o=>!o)}
              aria-label={menuOpen ? "Close menu" : "Open menu"}
              aria-expanded={menuOpen}>
              <span/><span/><span/>
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-menu ${menuOpen ? "show" : ""}`}>
        <div className="mobile-menu-scrim" onClick={()=>setMenuOpen(false)}/>
        <nav className="mobile-menu-panel" aria-label="Mobile">
          <div className="mobile-menu-bar">
            <Logo height={30}/>
            <button className="mobile-menu-close" onClick={()=>setMenuOpen(false)} aria-label="Close menu">
              <Icon.x/>
            </button>
          </div>
          <div className="mobile-menu-body">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={()=>setMenuOpen(false)}>
                {l.label}
                <Icon.arrow size={16}/>
              </a>
            ))}
            <a className="mobile-menu-cta" href={STORE_URL} onClick={()=>setMenuOpen(false)}>
              Order Airstep · R3,200
            </a>
            <div className="mobile-menu-foot">
              <Icon.check size={13}/> Class A Medical Device · NAPPI-coded
            </div>
          </div>
        </nav>
      </div>
    </React.Fragment>
  );
};

// =====================================================================
// HERO COUNTER — "Every 30 Seconds" variant (landing page)
// =====================================================================
const HeroCounter = ({ onBuy }) => {
  // One lower limb is lost to diabetes roughly every 30 seconds (IDF).
  // Seed the counter with the real year-to-date total since 1 Jan 2026,
  // then let it tick up live so visitors see an actual, moving figure.
  const START_2026 = Date.UTC(2026, 0, 1, 0, 0, 0);
  const calc = () => Math.max(0, Math.floor((Date.now() - START_2026) / 30000));

  const [legs, setLegs] = React.useState(calc);
  const [pulse, setPulse] = React.useState(true);

  React.useEffect(() => {
    const tick = setInterval(() => {
      setLegs(calc());
      setPulse(p => !p);
    }, 1000);
    return () => clearInterval(tick);
  }, []);

  return (
    <section className="hero-counter" id="top">
      <div className="container hero-counter-grid">
        <div className="hero-counter-left">
          <div className="hero-counter-eyebrow">
            <span className={`live-dot ${pulse ? "on" : ""}`}/>
            Live · right now, across the world
          </div>
          <div className="hero-counter-number">
            {legs.toLocaleString("en-US")}
          </div>
          <h1 className="hero-counter-headline">
            legs lost to diabetes in 2026
            <span className="hero-counter-subline"> &mdash; and counting, every 30 seconds.</span>
          </h1>
          <p className="hero-counter-body">
            That's the running total since 1 January 2026. Most begin with damage a neuropathic
            foot can't feel &mdash; a seam, a pressure point, a pebble that becomes an ulcer before
            anyone notices.
          </p>
          <div className="hero-counter-source">
            Source · International Diabetes Federation · IWGDF Guidelines
          </div>
          <div className="hero-counter-cta-row">
            <button
              className="btn btn-cta hero-counter-cta-primary"
              onClick={onBuy}
              style={{animation:"heroPulse 2s ease-in-out infinite", background:"var(--navy)", borderColor:"var(--navy)"}}>
              Shop the range <Icon.arrow size={16}/>
            </button>
            <a className="btn btn-ghost hero-counter-cta-ghost" href="podiatrists.html">
              Find a podiatrist
            </a>
          </div>
          <div className="hero-counter-trust-line">
            <span style={{color:"var(--sky)", letterSpacing:"0.02em"}}>★★★★★</span>
            {" "}Claimable on medical aid · NAPPI-coded · PMB listed
          </div>
        </div>

        <div className="hero-counter-right">
          <div className="hero-counter-card">
            <div className="hero-counter-card-eyebrow">The intervention</div>
            <h2 className="hero-counter-card-h">
              A shoe<br/>that protects.
            </h2>
            <p className="hero-counter-card-body">
              Medical-grade. Designed, tested and certified
              in South Africa for diabetic foot care.
            </p>
            <p className="hero-counter-card-body" style={{marginTop:8, fontSize:"0.85em", color:"rgba(246,241,232,0.75)"}}>
              Many medical aids reimburse the cost — we provide a NAPPI-coded invoice for your claim.
            </p>
            <div className="hero-counter-card-img">
              <ShoePhoto variant="hero"/>
            </div>

            <button className="btn btn-cta btn-block" onClick={onBuy}>
              Order Airstep <Icon.arrow size={16}/>
            </button>
            <div className="hero-counter-card-foot">
              <Icon.check size={13}/>
              Class A Medical Device · NAPPI-coded · claimable on medical aid
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Hero = ({ onBuy }) => (
  <section className="hero" id="top">
    <div className="container hero-grid">
      <div>
        <div className="hero-tagline">For Diabetes &amp; Neuropathy</div>
        <h1>
          <span className="l1">Made for movement.</span>
          <span className="l2">Built for confidence.</span>
          <span className="l3">Engineered for purpose.</span>
          <span className="rule"></span>
        </h1>
        <p className="hero-lede">
          Airstep is purpose-built to protect feet with diabetes and peripheral neuropathy
          — the seam-free interior, triple-layer pressure-offloading insole, and FreeStride™
          last work together to prevent the silent injuries that lead to ulcers, infection, and amputation.
        </p>
        <ul className="hero-bullets">
          <li><Icon.check/> Pressure offloading away from ulcer-prone metatarsal heads</li>
          <li><Icon.check/> Seam-free interior — critical when nerve damage masks pain</li>
          <li><Icon.check/> Generous fit up to 4E, extra depth, orthotic-ready</li>
        </ul>
        <div className="hero-cta-row">
          <button className="btn btn-cta" onClick={onBuy}>
            Order Airstep <Icon.arrow size={16}/>
          </button>
          <a className="btn btn-ghost" href="#diabetes">Why diabetic feet need more →</a>
        </div>
        <div className="hero-trust">
          <span style={{display:"inline-flex", alignItems:"center", gap:6, color:"var(--sage)", fontWeight:600}}>
            <Icon.check size={14}/> Telmo-tested & approved
          </span>
          <span style={{color:"var(--ink-mute)"}}>·</span>
          <span>NAPPI-coded · PMB listed</span>
          <span style={{color:"var(--ink-mute)"}}>·</span>
          <span>SAMED member</span>
        </div>
      </div>

      <div className="hero-product">
        <div className="photo">
          <ShoePhoto variant="hero"/>
        </div>
      </div>
    </div>
  </section>
);

// =====================================================================
// QUICK BENEFITS strip — Hike-style social proof + 4 round-icon features
// =====================================================================
const QuickBenefits = () => {
  const items = [
    {
      label: "Wide Toe Box",
      sub: "Up to 4E width",
      Ic: () => (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 42c0-8 6-14 14-14h6c8 0 12 4 16 8 4 4 6 6 4 10s-6 4-12 4H20c-4 0-6-2-6-8z"/>
          <circle cx="22" cy="34" r="2" fill="currentColor"/>
          <circle cx="29" cy="32" r="2" fill="currentColor"/>
          <circle cx="36" cy="32" r="2" fill="currentColor"/>
          <circle cx="43" cy="34" r="2" fill="currentColor"/>
          <path d="M14 50h36" strokeDasharray="2 3"/>
          <path d="M10 50l4-4M54 50l-4-4"/>
        </svg>
      ),
    },
    {
      label: "Pressure Offloading",
      sub: "Lab-tested 29 Nm",
      Ic: () => (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 14v8M32 12v10M42 14v8"/>
          <path d="M16 24h32"/>
          <path d="M18 26c0 12 6 22 14 22s14-10 14-22"/>
          <path d="M26 30c0 8 3 14 6 14s6-6 6-14"/>
        </svg>
      ),
    },
    {
      label: "Seam-Free Interior",
      sub: "Friction-protected",
      Ic: () => (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 38c0-12 8-22 18-22 8 0 18 4 22 16"/>
          <path d="M14 38c0 6 4 10 8 10h28c4 0 6-2 6-6"/>
          <path d="M22 28c2-2 6-4 10-4M28 22c4-2 10-2 14 2" strokeDasharray="1 3"/>
          <circle cx="48" cy="26" r="3"/>
          <path d="M50 24l4-4"/>
        </svg>
      ),
    },
    {
      label: "Rocker Sole",
      sub: "Comfy gait support",
      Ic: () => (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M10 44c2-12 12-20 22-20h12c6 0 10 4 10 10v6H14c-2 0-4-1-4-4z"/>
          <path d="M14 44h36" strokeDasharray="2 3"/>
          <path d="M8 50c6 4 16 6 24 6s18-2 24-6"/>
          <path d="M22 32c2-2 6-4 10-4"/>
        </svg>
      ),
    },
  ];
  return (
    <section className="quick-benefits">
      <div className="container">
        <div className="qb-head">
          <div className="qb-pill">
            <span className="qb-stars">★★★★★</span>
            <span>Class A Medical Device · Telmo-approved</span>
          </div>
          <h2 className="qb-title">Therapeutic shoes for diabetic &amp; neuropathic feet</h2>
          <p className="qb-sub">Your path to ulcer-free walking.</p>
        </div>
        <div className="qb-grid">
          {items.map((it, i) => (
            <div className="qb-item" key={i}>
              <div className="qb-ic"><it.Ic/></div>
              <div className="qb-label">{it.label}</div>
              <div className="qb-sub-label">{it.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const TrustStrip = () => (
  <div className="trust-strip">
    <div className="container trust-strip-inner">
      <div className="trust-item">
        <Icon.shield/>
        <span className="label">Class A Medical Device</span>
        <span>GMDN registered</span>
      </div>
      <div className="trust-item">
        <Icon.cert/>
        <span className="label">NAPPI-coded · PMB listed</span>
        <span>SARS Circular 13 of 2024</span>
      </div>
      <div className="trust-item">
        <Icon.heart/>
        <span className="label">Telmo Applied Science</span>
        <span>Tested &amp; approved</span>
      </div>
      <div className="trust-item">
        <Icon.truck/>
        <span className="label">Made in South Africa</span>
        <span>ISO-certified cow leather</span>
      </div>
    </div>
  </div>
);

// =====================================================================
// DIABETES CRISIS — the big problem (lead with this on the landing page)
// =====================================================================
const DiabetesCrisis = () => (
  <section className="crisis" id="crisis">
    <div className="container">
      <div className="crisis-head">
        <span className="eyebrow on-dark">The hidden crisis</span>
        <h2 className="crisis-h">
          Diabetes is taking limbs.<br/>
          <em>Mostly without warning.</em>
        </h2>
        <p className="crisis-lede">
          Peripheral neuropathy quietly switches off the warning system in your feet.
          A pressure point you can't feel, a seam you can't notice, a friction blister
          you never registered &mdash; that's how nearly every diabetic amputation begins.
        </p>
      </div>

      <div className="crisis-hero-stat">
        <div className="crisis-hero-stat-num">
          <span className="big">30</span>
          <span className="unit">seconds</span>
        </div>
        <div className="crisis-hero-stat-body">
          Somewhere in the world, a lower limb is amputated due to diabetes <strong>every 30 seconds</strong>.
          More than a million people lose a leg or foot to diabetes each year &mdash; and the figures are rising.
          <div className="crisis-src">International Diabetes Federation · IWGDF Guidelines</div>
        </div>
      </div>

      <div className="crisis-stats">
        <div className="crisis-stat">
          <div className="num">1 in 4</div>
          <div className="label">people with diabetes will develop a foot ulcer in their lifetime.</div>
        </div>
        <div className="crisis-stat">
          <div className="num">85<span className="pct">%</span></div>
          <div className="label">of diabetes-related amputations are preceded by a foot ulcer.</div>
        </div>
        <div className="crisis-stat">
          <div className="num">~50<span className="pct">%</span></div>
          <div className="label">five-year mortality after a major diabetic amputation &mdash; worse than most cancers.</div>
        </div>
      </div>

      <div className="crisis-journey">
        <div className="crisis-journey-title">How it actually happens &mdash; the silent progression</div>
        <ol className="crisis-steps">
          <li>
            <span className="step-n">01</span>
            <h4>Neuropathy</h4>
            <p>Nerve damage in the foot dulls or eliminates pain, temperature, and pressure feedback.</p>
          </li>
          <li>
            <span className="step-n">02</span>
            <h4>Silent injury</h4>
            <p>A normal shoe seam, a pebble, or a small blister causes damage you cannot feel.</p>
          </li>
          <li>
            <span className="step-n">03</span>
            <h4>Ulcer</h4>
            <p>The injury breaks the skin. Poor circulation slows healing. Infection sets in.</p>
          </li>
          <li>
            <span className="step-n">04</span>
            <h4>Amputation</h4>
            <p>Tissue death forces surgical removal &mdash; often the toe, foot, or lower leg.</p>
          </li>
        </ol>
        <div className="crisis-bridge">
          By the time it hurts, it's already serious.
          <strong> Almost every step in that chain begins where a regular shoe presses, rubs, or pinches a foot that can't feel it.</strong>
        </div>
      </div>

      <div className="crisis-local">
        <div className="crisis-local-eyebrow">In South Africa</div>
        <div className="crisis-local-row">
          <div>
            <div className="crisis-local-num">4.2M+</div>
            <div className="crisis-local-label">South African adults living with diabetes today.</div>
          </div>
          <div>
            <div className="crisis-local-num">≈50<span className="pct">%</span></div>
            <div className="crisis-local-label">of major lower-limb amputations in SA public hospitals are diabetes-related.</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const DiabetesFocus = () => (
  <section className="diabetes" id="diabetes">
    <div className="container">
      <div className="diabetes-grid">
        <div>
          <span className="eyebrow on-dark">The answer</span>
          <h2 className="diabetes-h">
            This is why we built Airstep.
          </h2>
          <p className="diabetes-lede">
            Airstep is engineered to address the weak points in that chain. Even pressure
            distribution. A seam-free, friction-protected interior. Generous width and depth
            for compromised feet. A geometry that supports circulation. <strong>The first medical-grade
            shoe built and certified in South Africa for diabetic foot protection.</strong>
          </p>
          <div className="diabetes-claims">
            <div className="claim">
              <div className="claim-ic"><Icon.layers/></div>
              <div>
                <h4>Even plantar pressure</h4>
                <p>FreeStride™ last + triple-layer insole distributes load away from ulcer-prone metatarsal heads.</p>
              </div>
            </div>
            <div className="claim">
              <div className="claim-ic"><Icon.feather/></div>
              <div>
                <h4>Friction-free, seam-free interior</h4>
                <p>Reversed lining, padded collar, and double-walled eyelets prevent the shear that triggers ulceration in neuropathic feet.</p>
              </div>
            </div>
            <div className="claim">
              <div className="claim-ic"><Icon.heart/></div>
              <div>
                <h4>Circulation &amp; sensation support</h4>
                <p>Rocker geometry &amp; flexion zones activate the foot and calf venous pumps — critical when vascular health is compromised.</p>
              </div>
            </div>
          </div>
        </div>
        <aside className="pressure-card">
          <div className="pressure-eyebrow">German Laboratory · Pedography</div>
          <div className="pressure-stat">
            <span className="num">29</span>
            <span className="unit">Nm</span>
          </div>
          <div className="pressure-label">Maximum in-shoe pressure measured</div>
          <p className="pressure-body">
            Independent pedography testing in a German laboratory confirmed an even
            distribution of plantar pressure with <strong>no high-pressure zones</strong>,
            well within targeted clinical tolerances for diabetic-safe footwear.
          </p>
          <div className="pressure-foot">
            <Icon.cert size={16}/>
            <span>
              Tested &amp; approved by <strong style={{color: "#fff"}}>Telmo Applied Science</strong>
              <small style={{display:"block", marginTop:4, opacity:0.7, fontSize:11, lineHeight:1.5}}>
                International research group of podiatrists and scientists who set performance standards for footwear design.
              </small>
            </span>
          </div>
        </aside>
      </div>
      <div className="endorsers">
        <span className="endorsers-label">Endorsed by</span>
        <div className="endorsers-row">
          <div className="endorser"><span>Diabetes SA</span><small>Diabetes South Africa</small></div>
          <div className="endorser"><span>Diabetes Alliance</span><small>Patient advocacy</small></div>
          <div className="endorser"><span>Sweetlife</span><small>Diabetes community</small></div>
          <div className="endorser"><span>SAMED</span><small>SA Medical Tech Industry</small></div>
        </div>
      </div>
      <div className="medical-disclaimer">
        <Icon.shield size={16}/>
        <p>
          <strong>Important:</strong> Airstep is a Class A Medical Device intended to protect
          and support the foot. It is <em>not</em> a replacement for prescribed medication,
          insulin, or any treatment plan recommended by your doctor, podiatrist, or
          endocrinologist. Always continue your prescribed care &mdash; Airstep is designed
          to work alongside it, not in place of it.
        </p>
      </div>
    </div>
  </section>
);

// =====================================================================
// NEWLY DIAGNOSED — foot-care starter routine for the just-diagnosed
// =====================================================================
const NewlyDiagnosed = () => {
  const steps = [
    {
      n: "01",
      t: "Check your feet every day",
      b: "Look over the tops, soles, heels and between the toes for cuts, blisters, redness or swelling. Use a mirror or ask someone to help.",
    },
    {
      n: "02",
      t: "Wash and dry with care",
      b: "Wash daily in warm — never hot — water, pat dry, and dry carefully between the toes. Moisturise the skin, but not between the toes.",
    },
    {
      n: "03",
      t: "Never go barefoot",
      b: "Indoors or out, always keep your feet covered. A pebble, a tack or a hot surface you can't feel can break the skin before you notice.",
    },
    {
      n: "04",
      t: "Wear protective footwear",
      b: "A deep, wide toe box, full coverage, cushioned soles and a seam-free interior. This is exactly what Airstep is built to give you.",
      airstep: true,
    },
    {
      n: "05",
      t: "Book a foot screening",
      b: "Even if your feet feel fine, ask for a baseline foot exam. Nerve or vessel damage can already be present at diagnosis without any symptoms.",
    },
    {
      n: "06",
      t: "Manage the basics",
      b: "Keep blood glucose, blood pressure and cholesterol within your target range. Good control protects the nerves and circulation your feet depend on.",
    },
  ];
  return (
    <section className="newly" id="newly-diagnosed">
      <div className="container">
        <div className="section-head newly-head">
          <span className="eyebrow">Just diagnosed?</span>
          <h2>A diagnosis is a turning point &mdash;<br/><em>start with your feet.</em></h2>
          <p>
            A new diabetes diagnosis can feel overwhelming, but your feet are one of the
            easiest places to protect from day one. Even when they feel completely normal,
            nerve and circulation changes can begin silently &mdash; so the habits you build
            now matter far more than most people realise.
          </p>
        </div>

        <div className="newly-grid">
          {steps.map((s) => (
            <article className={`newly-card ${s.airstep ? "is-airstep" : ""}`} key={s.n}>
              <div className="newly-n">{s.n}</div>
              <h3 className="newly-t">{s.t}</h3>
              <p className="newly-b">{s.b}</p>
              {s.airstep && (
                <a className="newly-tag" href="technology.html">
                  <Icon.check size={13}/> How Airstep helps
                  <Icon.arrowRight size={12}/>
                </a>
              )}
            </article>
          ))}
        </div>

        <div className="newly-foot">
          <Icon.heart size={16}/>
          <p>
            Guidance here is adapted from the <strong>American Diabetes Association</strong> and
            international foot-care standards. It's a starting point, not a care plan &mdash; always
            follow the routine set by your doctor, podiatrist or diabetes team. Airstep is designed
            to support that plan, never to replace it.
          </p>
        </div>
      </div>
    </section>
  );
};

const Problem = () => {
  const groups = [
    {
      Ic: Icon.shield,
      tag: "Arthritis & Joint Pain",
      body: "Rocker sole absorbs impact and reduces load on inflamed joints — making movement less painful."
    },
    {
      Ic: Icon.refresh,
      tag: "Post-Surgery & Rehabilitation",
      body: "Extra depth and wide fit comfortably accommodates swelling, dressings, and prescribed orthotics."
    },
    {
      Ic: Icon.feather,
      tag: "Plantar Fat Pad Atrophy",
      body: "Supplementary triple-layer cushioning compensates for diminished natural padding under the foot."
    },
    {
      Ic: Icon.cloud,
      tag: "Sensitive & Tired Feet",
      body: "For anyone on their feet for hours — pressure distribution reduces fatigue, swelling, and end-of-day pain."
    },
  ];
  return (
    <section className="problem" id="science">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Also engineered for</span>
          <h2>Beyond diabetes &mdash; built for any foot that needs more.</h2>
          <p>
            Airstep is indicated for anyone whose feet need more support, space, and
            protection &mdash; from arthritic joints to post-surgical recovery, structural
            deformities, and the natural wear of standing all day.
          </p>
        </div>
        <div className="stat-row audience-row">
          {groups.map((g, i) => (
            <div className="stat audience" key={i}>
              <div className="audience-ic"><g.Ic/></div>
              <h3 className="audience-tag">{g.tag}</h3>
              <div className="body">{g.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const MadeForMovement = () => {
  const fixes = [
    {
      n: "01",
      fault: "Impaired blood flow",
      faultBody: "Tight uppers and shallow toe boxes restrict circulation — dangerous for diabetic and neuropathic feet.",
      fix: "Generous 2E–4E wide last with extra depth",
      fixBody: "Spacious volumetric fit lets feet sit naturally; uncompromised blood flow.",
    },
    {
      n: "02",
      fault: "Narrow, tight fit",
      faultBody: "Standard lasts squeeze bunions, hammer toes, and swollen forefeet — every step hurts.",
      fix: "Anatomical FreeStride™ last",
      fixBody: "Built around the actual shape of the human foot, not a fashion silhouette.",
    },
    {
      n: "03",
      fault: "Friction → blisters, ulcers, corns",
      faultBody: "Internal seams and harsh stitching abrade insensate skin without warning.",
      fix: "Seam-free interior · reversed lining",
      fixBody: "Inside-out stitching, padded collar, double-walled eyelets. Nothing rubs.",
    },
    {
      n: "04",
      fault: "Incorrect flex",
      faultBody: "Shoes that bend in the middle (not at the toes) fight the foot's natural mechanics.",
      fix: "55° forefoot flexion · engineered toe spring",
      fixBody: "Flex point aligns with the metatarsal joints. The shoe moves with you.",
    },
    {
      n: "05",
      fault: "Poor plantar pressure distribution",
      faultBody: "Hot spots under the metatarsals are the #1 precursor to diabetic foot ulcers.",
      fix: "Triple-layer pressure-offloading insole",
      fixBody: "German pedography lab: peak plantar pressure 29 N/cm² — well within clinical tolerance.",
    },
    {
      n: "06",
      fault: "Inadvisable heel-to-toe drop",
      faultBody: "High heel drops shift weight forward, overloading the forefoot and destabilising gait.",
      fix: "Minimal drop · rocker sole · TPU stabiliser",
      fixBody: "Even weight distribution, smooth roll-through, anti-twist protection at every step.",
    },
  ];
  return (
    <section className="movement" id="movement">
      <div className="container">
        <div className="section-head movement-head">
          <span className="eyebrow">Made for Movement</span>
          <h2>What conventional shoes get wrong,<br/><em>and how we fix each one.</em></h2>
          <p>
            Six structural faults common to mass-market footwear &mdash; and the
            specific engineering choices that correct them.
          </p>
        </div>
        <div className="movement-grid">
          {fixes.map((f) => (
            <article className="mv-card" key={f.n}>
              <span className="mv-num">{f.n}</span>
              <div className="mv-fault">
                <span className="mv-tag mv-tag--fault"><Icon.x size={11}/> The fault</span>
                <h4 className="mv-fault-h">{f.fault}</h4>
                <p>{f.faultBody}</p>
              </div>
              <div className="mv-connector" aria-hidden="true">
                <span className="mv-node">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="12" y1="5" x2="12" y2="19"/><polyline points="6 13 12 19 18 13"/>
                  </svg>
                </span>
              </div>
              <div className="mv-fix">
                <span className="mv-tag mv-tag--fix"><Icon.check size={11}/> Airstep fix</span>
                <h4 className="mv-fix-h">{f.fix}</h4>
                <p>{f.fixBody}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const Anatomy = () => {
  const specs = [
    { spec: "Volumetric Fit",        v: "Up to 4E width",                 b: "Accommodates wider feet and structural deformities without compression." },
    { spec: "Enhanced Depth",        v: "Built-in extra depth",           b: "Protects vulnerable dorsal toe surfaces; accepts prescription orthotics." },
    { spec: "Insole System",         v: "Triple-layer removable",         b: "Moulded polyurethane top layer over two open-cell foam densities." },
    { spec: "Internal Construction", v: "Reversed lining · Strobel",      b: "Padded tongue, double-walled eyelets; minimal seams to prevent friction." },
    { spec: "Gait Mechanics",        v: "55° forefoot flexion",           b: "Engineered toe spring ensures flex matches the metatarsal joints." },
    { spec: "Stability",             v: "Minimal heel-to-toe drop",       b: "Rubber outsole optimises weight distribution and reduces fall risk." },
    { spec: "Lining",                v: "Moisture-wicking",               b: "Maintains a healthy foot microclimate all day — critical for diabetic skin." },
    { spec: "Upper Material",        v: "ISO-certified cow leather",      b: "Genuine leather upper, manufactured in South Africa to Class A standards." },
  ];
  return (
    <section className="anatomy" id="anatomy">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow on-dark">FreeStride™ Technology</span>
          <h2>Built for performance.<br/>Engineered for outcomes.</h2>
          <p>
            The FreeStride™ anatomical last is a registered design based on
            podiatric research and orthopaedic principles &mdash; reduced in-flare,
            anatomically correct, and tested by pedography in a German laboratory.
          </p>
        </div>
        <div className="anatomy-stage">
          <div className="anatomy-callouts">
            <FeatureCallouts/>
          </div>
          <div className="anatomy-specs">
            <div className="anatomy-specs-head">
              <span>Performance feature</span>
              <span>Specification</span>
              <span>Clinical benefit</span>
            </div>
            {specs.map((s, i) => (
              <div className="anatomy-specs-row" key={i}>
                <div className="spec-name">{s.spec}</div>
                <div className="spec-value">{s.v}</div>
                <div className="spec-benefit">{s.b}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Features = () => {
  const features = [
    { Ic: Icon.layers,  t: "Pressure Offloading",  b: "Dual-density EVA absorbs impact and redistributes plantar pressure away from ulcer-prone sites." },
    { Ic: Icon.width,   t: "Wide Toe Box",         b: "Eliminates compression on bunions, hammer toes, and swollen forefoot. Up to 4E width." },
    { Ic: Icon.feather, t: "Seam-Free Interior",   b: "Inside-out stitching prevents friction injuries on neuropathic and fragile skin." },
    { Ic: Icon.cloud,   t: "Breathable Lining",    b: "Moisture-wicking lining maintains a healthy foot environment all day." },
    { Ic: Icon.refresh, t: "Rocker Sole",          b: "Supports comfy gait — particularly helpful for arthritic patients." },
    { Ic: Icon.shield,  t: "Genuine Cow Leather",  b: "ISO-certified upper, manufactured in South Africa to Class A Medical Device standards." },
  ];
  return (
    <section id="features">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Comfort benefits</span>
          <h2>Built around your well-being.</h2>
          <p>Every detail is engineered to restore independence, reduce risk, and uplift daily living. Rooted in medical science, made in South Africa, driven by care.</p>
        </div>
        <div className="features-grid">
          {features.map((f,i) => (
            <div className="feature" key={i}>
              <div className="ic"><f.Ic/></div>
              <h3>{f.t}</h3>
              <p>{f.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Evidence = () => null;

const WhyAirstep = () => (
  <section className="why" id="why">
    <div className="container">
      <div className="why-head">
        <span className="eyebrow">Why Airstep?</span>
        <h2 className="why-h">
          The product of over <em>50&nbsp;years</em> combined<br/>
          podiatry and master&nbsp;shoemaking.
        </h2>
      </div>

      <div className="why-body">
        <div className="why-col">
          <p className="why-p why-lede">
            Many people suffer from sensitive feet &mdash; whether from arthritis,
            thinning of the plantar fat pad, diabetes, or simply long hours on
            their feet. Conventional athleisure shoes rely on thin foam inners,
            and removing those liners leaves no room for a prescription orthotic.
          </p>
          <p className="why-p">
            What was missing from the market was a generous-fitting athleisure shoe
            with extra depth that combined the best of medical-grade footwear with
            a sporty look, at an affordable price. Airstep is the South African
            answer to that gap.
          </p>
        </div>
        <div className="why-col">
          <p className="why-p">
            Last dimensions, shaping, and axial alignment were developed through
            local podiatric research. In-shoe pressure testing &mdash; followed
            by years of prototype wear-trialling by adult volunteers living with
            diabetes &mdash; confirmed that Airstep reduces plantar shear stress
            and vertical pressure, and promotes both venous and arterial circulation
            through activation of the foot and calf muscle venous pumps.
          </p>
          <p className="why-p">
            Airstep is approved by <strong>Telmo Applied Science</strong> &mdash; an
            international research group of podiatrists and scientists who contribute
            to performance standards in footwear design &mdash; registered on the
            global GMDN medical device register, and NAPPI-coded in South Africa.
          </p>
        </div>
      </div>

      <div className="why-stats">
        <div className="why-stat">
          <div className="why-stat-v">3°</div>
          <div className="why-stat-k">In-flare angle</div>
          <div className="why-stat-b">vs the industry-standard 6° &mdash; relieves pressure on the 4th and 5th toes</div>
        </div>
        <div className="why-stat">
          <div className="why-stat-v">50+ <span>yrs</span></div>
          <div className="why-stat-k">Combined expertise</div>
          <div className="why-stat-b">Podiatric research paired with master shoemaker experience</div>
        </div>
        <div className="why-stat">
          <div className="why-stat-v"><span>Made in</span> Cape&nbsp;Town</div>
          <div className="why-stat-k">Since 2025</div>
          <div className="why-stat-b">Designed, tested, and manufactured locally to medical-device standards</div>
        </div>
      </div>
    </div>
  </section>
);

const Reviews = () => {
  const reviews = [
    {
      tag: "Clinical perspective",
      body: "As a podiatry academic with a history of plantar fasciitis, I approached Airstep with a critical, evidence-based perspective. During a recent trip to the United Kingdom, I walked approximately 20 km per day over several consecutive days while wearing Airstep shoes — without any orthotic support. Notably, I experienced no plantar fasciitis symptoms throughout this period.",
      name: "Ms. Yaasirah Mohomed Choonara",
      role: "MHS (Podiatry) · University of Johannesburg",
    },
    {
      tag: "Lived experience",
      body: "I've been wearing Airstep daily since October 2025. As someone living with Type 1 diabetes and a lower limb amputation, balance and mobility are constant challenges — and Airstep has made a real difference. Within the first few weeks, I noticed a tingling sensation in my left foot, which I believe was due to improved pressure distribution. Over time, it has felt as though I've regained some sensation in that foot.",
      name: "Gavin van Wyk",
      role: "Type 1 Diabetes · Amputee · SA Diabetes Advocate",
    },
    {
      tag: "Type 1 Diabetes · Neuropathy",
      body: "Since starting to use the Airstep, it has been an absolutely amazing journey. I quit smoking, changed my diet, and now I successfully do 20,000 steps a day in these shoes. I no longer take pain medication, and I sleep like a baby — nine hours of uninterrupted sleep each night. It's incredible how a shoe has completely changed my life.",
      name: "Kresan Moodley",
      role: "Type 1 Diabetic · Neuropathy · Previously waking nightly with severe leg pain · Now 20,000 steps/day",
    },
    {
      tag: "Podiatrist Endorsement",
      body: "Airstep reflects a deep understanding of foot mechanics, comfort, and support. The combination of breathable materials, triple layer insoles, wider toebox and rocker sole makes this shoe ideal for both everyday wear or long hours on your feet. Every element is designed to promote better foot health. It's more than footwear — it's podiatric science you can feel in every step.",
      name: "Humaira Ismail",
      role: "Podiatrist · Dunkeld Medical & Dental Centre, Randburg",
    },
    {
      tag: "Practice Endorsement",
      body: "We prescribe Airstep shoes for their superior comfort, cushioning, and clinical support. Designed to enhance pressure offloading and reduce risk, they are particularly well-suited for diabetic patients. A trusted choice for protecting foot health while maintaining everyday comfort.",
      name: "Podiatry Africa",
      role: "Gaborone, Botswana · podiatryafrica.com",
    },
  ];
  return (
    <section id="reviews">
      <div className="container">
        <div className="reviews-head">
          <div>
            <span className="eyebrow">Endorsements</span>
            <h2 style={{marginTop: 16, maxWidth: "22ch"}}>From clinicians and the patients who wear them.</h2>
          </div>
          <div className="score">
            <div className="big">A</div>
            <div>
              <div className="stars" style={{fontSize:13, letterSpacing:0.4, color:"var(--sky)"}}>CLASS A MEDICAL DEVICE</div>
              <div className="meta">Telmo-endorsed standard</div>
            </div>
          </div>
        </div>
        <div className="review-grid">
          {reviews.map((r,i) => (
            <article key={i} className="review">
              <div className="pill" style={{alignSelf:"flex-start"}}>
                <span className="dot"></span>{r.tag}
              </div>
              <div className="body">"{r.body}"</div>
              <div className="who">
                <div className="avatar">{r.name.split(" ").map(w=>w[0]).slice(0,2).join("")}</div>
                <div style={{flex:1}}>
                  <div className="name">{r.name}</div>
                  <div style={{fontSize:11, color:"var(--ink-mute)"}}>{r.role}</div>
                </div>
                <div className="verified"><Icon.check size={12}/> Verified</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const Compare = () => {
  // value types: 'yes' | 'no' | { warn: 'label' }
  const rows = [
    { feat: "Wide Toe Box (up to 4E)",                   us: "yes", them: "no" },
    { feat: "Pressure-Offloading Insole",                us: "yes", them: { warn: "Often Thin" } },
    { feat: "Seam-Free Interior",                        us: "yes", them: "no" },
    { feat: "Rocker Sole for Comfy Gait",                us: "yes", them: "no" },
    { feat: "Class A Medical Device · GMDN registered",  us: "yes", them: "no" },
    { feat: "NAPPI-Coded · Medical Aid Claimable",       us: "yes", them: "no" },
    { feat: "Telmo-Approved Diabetic Standard",          us: "yes", them: "no" },
    { feat: "Made for Diabetic & Neuropathic Feet",      us: "yes", them: { warn: "Not Specialised" } },
  ];

  const Cell = ({ v }) => {
    if (v === "yes") {
      return (
        <span className="cmp-yes">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <polyline points="8 12 11 15 16 9"/>
          </svg>
        </span>
      );
    }
    if (v === "no") {
      return (
        <span className="cmp-no">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="6" y1="6" x2="18" y2="18"/>
            <line x1="18" y1="6" x2="6" y2="18"/>
          </svg>
        </span>
      );
    }
    return (
      <span className="cmp-warn">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <line x1="12" y1="8" x2="12" y2="12"/>
          <line x1="12" y1="16" x2="12.01" y2="16"/>
        </svg>
        <small>{v.warn}</small>
      </span>
    );
  };

  return (
    <section className="compare" id="compare">
      <div className="container">
        <div className="compare-card">
          <div className="compare-intro">
            <h2 className="compare-h">Podiatrist-Designed<br/>&amp; Telmo-Approved</h2>
            <p className="compare-lede">
              Built on podiatric research and real-world wear testing, Airstep is engineered
              specifically for diabetic, neuropathic, arthritic, and sensitive feet &mdash;
              not adapted from a regular sneaker last.
            </p>
          </div>
          <div className="compare-grid">
            <div className="compare-row compare-head">
              <div></div>
              <div className="col-us"><Logo height={28}/></div>
              <div className="col-them">Regular<br/>Sneakers</div>
            </div>
            {rows.map((r, i) => (
              <div className="compare-row" key={i}>
                <div className="feat">{r.feat}</div>
                <div className="col-us"><Cell v={r.us}/></div>
                <div className="col-them"><Cell v={r.them}/></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const NappiCodes = () => {
  const [open, setOpen] = React.useState(false);
  const sizes = [
    { size: "UK 2",  nappi: "1242132001", cat: "91DIA553M020" },
    { size: "UK 3",  nappi: "1242134001", cat: "91DIA553M030" },
    { size: "UK 4",  nappi: "1242137001", cat: "91DIA553M040" },
    { size: "UK 5",  nappi: "1242141001", cat: "91DIA553M050" },
    { size: "UK 6",  nappi: "1176091001", cat: "91DIA553M060" },
    { size: "UK 7",  nappi: "1176092001", cat: "91DIA553M070" },
    { size: "UK 8",  nappi: "1176093001", cat: "91DIA553M080" },
    { size: "UK 9",  nappi: "1176094001", cat: "91DIA553M090" },
    { size: "UK 10", nappi: "1176095001", cat: "91DIA553M100" },
    { size: "UK 11", nappi: "1176096001", cat: "91DIA553M110" },
    { size: "UK 12", nappi: "1242145001", cat: "91DIA553M120" },
    { size: "UK 13", nappi: "1242149001", cat: "91DIA553M130" },
  ];
  return (
    <section className="nappi" id="nappi-codes">
      <div className="container">
        <div className="nappi-head">
          <div>
            <span className="eyebrow">For healthcare professionals</span>
            <h2>NAPPI codes &amp; claim references.</h2>
            <p>
              Per-size NAPPI codes for medical aid claims. Listed as a Prescribed
              Minimum Benefit (PMB) under SARS Circular 13 of 2024. Effective 12 September 2025.
            </p>
          </div>
          <button className="nappi-toggle" onClick={() => setOpen(!open)}>
            {open ? "Hide table" : "Show all 12 codes"}
            <span className={`nappi-chev ${open ? "up" : ""}`} aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </span>
          </button>
        </div>

        <div className="nappi-shared">
          <div className="nappi-shared-item">
            <span className="nappi-shared-k">GMDN</span>
            <span className="nappi-shared-v">31041</span>
          </div>
          <div className="nappi-shared-item">
            <span className="nappi-shared-k">MediKredit class</span>
            <span className="nappi-shared-v">Z20AH07AA02</span>
          </div>
          <div className="nappi-shared-item">
            <span className="nappi-shared-k">Pack size</span>
            <span className="nappi-shared-v">1 pair</span>
          </div>
          <div className="nappi-shared-item">
            <span className="nappi-shared-k">Price (ex VAT)</span>
            <span className="nappi-shared-v">R 2,782.61</span>
          </div>
          <div className="nappi-shared-item">
            <span className="nappi-shared-k">Price (incl VAT)</span>
            <span className="nappi-shared-v">R 3,200.00</span>
          </div>
        </div>

        <div className="nappi-cta">
          <div className="nappi-cta-text">
            <strong>Order at wholesale pricing.</strong>
            <span>Podiatrists, endocrinologists, orthotists &amp; accredited distributors can open a direct account.</span>
          </div>
          <a className="btn btn-cta" href="wholesale-application.html">
            Apply for an account <Icon.arrow size={16}/>
          </a>
        </div>

        {open && (
          <div className="nappi-table-wrap">
            <table className="nappi-table">
              <thead>
                <tr>
                  <th>Size</th>
                  <th>NAPPI code</th>
                  <th>Catalogue no.</th>
                  <th>Product description</th>
                </tr>
              </thead>
              <tbody>
                {sizes.map((r) => (
                  <tr key={r.nappi}>
                    <td className="nappi-size">{r.size}</td>
                    <td className="nappi-code">{r.nappi}</td>
                    <td className="nappi-cat">{r.cat}</td>
                    <td className="nappi-desc">Shoe diabetic Airstep cloud blue lace-up, {r.size.replace("UK ", "size ")}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="nappi-foot">
              Provide the relevant NAPPI code, GMDN 31041, and MediKredit Z20AH07AA02 to your
              medical scheme. A tax invoice is emailed with every order &mdash; <a href="nappi-invoice.html">see a sample invoice &amp; claim pack</a>, or contact <a href="mailto:info@diabeticshoes.co.za">info@diabeticshoes.co.za</a> for additional documentation.
            </p>
            <p className="nappi-disclaimer">
              Reimbursement is not guaranteed. Medical schemes, plans and benefit options differ &mdash; some
              reimburse Airstep in full, some in part, and some not at all, depending on plan rules, available
              benefits and prescription. Confirm cover with the patient's scheme before ordering. Tradeshoe (Pty)
              Ltd t/a Airstep cannot be held liable for any claim that is declined, short-paid or reversed.
            </p>
          </div>
        )}
      </div>
    </section>
  );
};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Who is Airstep for?",
      a: "Airstep is built for anyone who needs serious foot protection. While it was engineered to medical-device standards to help prevent diabetic foot ulcers and protect feet with reduced sensation, the same clinical features benefit people living with arthritis, post-surgical recovery, structural deformities (bunions, hammer toes, claw toes), plantar fat pad atrophy, plantar fasciitis, oedema, neuropathy from any cause, and anyone on their feet for long hours. It is endorsed by Diabetes SA, Diabetes Alliance, and Sweetlife." },
    { q: "Will my medical aid cover the cost?",
      a: "Airstep is NAPPI-coded and listed as a Prescribed Minimum Benefit (PMB) under SARS Circular 13 of 2024. Most South African medical aid schemes can therefore reimburse the cost — ask your healthcare provider or scheme to confirm what applies to your plan. The NAPPI price is R3,200 incl. VAT. We email a NAPPI invoice with every order to make claims simple. Please note: reimbursement is never guaranteed. Schemes, plans and benefit options differ — some pay in full, some in part, and some not at all, depending on your plan rules, available benefits and whether a prescription is provided. Always confirm cover with your scheme before ordering. Tradeshoe (Pty) Ltd t/a Airstep cannot be held liable for any claim that is declined, short-paid or reversed." },
    { q: "Is Airstep registered as a medical device?",
      a: "Yes. Airstep is a Class A Medical Device with Global Medical Device Numbering (GMDN) registration, NAPPI-coded in South Africa, and a member of the South African Medical Technology Industry Association (SAMED). It has been tested and approved by Telmo Applied Science, an independent footwear assessment body." },
    { q: "What sizes are available? Can I order mixed-size pairs?",
      a: "Airstep is built on a generous wide-fitting last in sizes UK 2 to 13, accommodating feet up to 4E width. Mixed-size pairs are available on request for patients with significantly different left/right foot sizes — email info@diabeticshoes.co.za to arrange." },
    { q: "What styles and colours are available?",
      a: "Currently the Airstep Trainer ships in unisex Midnight Navy lace-up at the NAPPI price of R3,200 incl. VAT. Additional colourways are arriving in Q2 2027, with a velcro-fastening variant to follow for patients who prefer or require easier closures." },
    { q: "Can I wear my own prescribed orthotic?",
      a: "Yes. The triple-layer factory insole pops out cleanly to make room for your custom orthotic, and the shoe has extra depth specifically to accommodate orthotics and prosthetics without crowding the toe box." },
    { q: "What is the shoe made of?",
      a: "Genuine ISO-certified cow leather upper, dual-density EVA midsole with a lightweight Phylon component, moisture-wicking lining, seam-free interior, TPU stabiliser for anti-twist protection, and a slip-resistant rubber outsole. Manufactured in South Africa." },
    { q: "I'm a healthcare professional — can I order at wholesale pricing?",
      a: "Yes. Podiatrists, endocrinologists, orthotists, and accredited distributors can order directly from Airstep at wholesale pricing. Apply online to open a wholesale account using the link in the 'For healthcare professionals' section, or register your practice at info@diabeticshoes.co.za or call 074 906 0388." },
    { q: "What if Airstep doesn't fit?",
      a: "If your Airsteps don't fit correctly, contact us within 7 days of delivery and we'll arrange a size exchange. Because Airstep is a Class A Medical Device, worn pairs cannot be resold — please try them indoors on a clean surface before deciding. For exchange queries, email info@diabeticshoes.co.za." },
  ];
  return (
    <section className="faq" id="faq">
      <div className="container" style={{maxWidth: 920}}>
        <div className="section-head">
          <span className="eyebrow">Common questions</span>
          <h2 style={{marginTop: 16}}>Things people ask us before they buy.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open===i?"open":""}`}>
              <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)} aria-expanded={open===i}>
                <span>{it.q}</span>
                <span className="ic"><Icon.plus size={14}/></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <LogoWhite height={48}/>
          <p className="footer-blurb">
            Purpose-built footwear that restores freedom, reduces risk, and empowers life in motion. Medical-grade. Made in South Africa.
          </p>
          <div style={{marginTop:24, fontSize:12, color:"rgba(246,241,232,0.55)", lineHeight:1.7}}>
            <strong style={{color:"#fff", display:"block", fontFamily:"var(--sans)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", marginBottom:6}}>Airstep Footwear</strong>
            43 Boulevard Way<br/>
            Capricorn Business Park<br/>
            Muizenberg, 7945, South Africa<br/>
            <span style={{color:"#fff", display:"block", marginTop:8}}>074 906 0388</span>
            <a href="mailto:info@diabeticshoes.co.za" style={{color:"var(--sand)"}}>info@diabeticshoes.co.za</a>
          </div>
        </div>
        <div>
          <h4>Shop</h4>
          <ul>
            <li><a href={STORE_URL}>Airstep Trainer</a></li>
            <li><a href={STORE_URL}>Order now</a></li>
            <li><a href="support.html">Sizing &amp; fit</a></li>
            <li><a href="support.html">Medical aid claims</a></li>
          </ul>
        </div>
        <div>
          <h4>The science</h4>
          <ul>
            <li><a href="diabetes.html">Diabetic foot care</a></li>
            <li><a href="technology.html">FreeStride™ technology</a></li>
            <li><a href="diabetes-aware.html">Diabetes risk check</a></li>
            <li><a href="endorsements.html">Endorsements</a></li>
          </ul>
        </div>
        <div>
          <h4>For Healthcare Pros</h4>
          <ul>
            <li><a href="wholesale-application.html">Wholesale ordering</a></li>
            <li><a href="wholesale-application.html">Become a distributor</a></li>
            <li><a href="wholesale-application.html">Open an account</a></li>
            <li><a href="support.html">NAPPI codes</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 TRADESHOE (Pty) Ltd t/a Airstep · Class A Medical Device · GMDN 31041 · MediKredit Z20AH07AA02 · NAPPI-coded · PMB listed · SAMED member</div>
        <div className="footer-legal-links">
          <a href="privacy.html">Privacy Policy</a>
          <a href="terms.html">Terms &amp; Conditions</a>
        </div>
        <div className="payments">
          <span className="pay-chip">VISA</span>
          <span className="pay-chip">MC</span>
          <span className="pay-chip">AMEX</span>
          <span className="pay-chip">EFT</span>
        </div>
      </div>
      <div className="footer-disclaimer">
        Airstep is a Class A Medical Device intended to protect and support the foot. It is
        <em> not</em> a substitute for prescribed medication or medical treatment, and is not
        intended to diagnose, treat, or heal an active foot ulcer, wound, or infection. Always
        continue any therapy, insulin regime, or care plan advised by your doctor, podiatrist,
        or endocrinologist, and consult your healthcare provider before changing any aspect of
        your diabetic foot care. Daily foot self-inspection and routine podiatry reviews remain
        essential. Seek medical attention promptly for any new wound, blister, redness, swelling,
        or loss of sensation. Individual results vary depending on condition, fit, and usage.
      </div>
    </div>
  </footer>
);

const SciencePillars = () => {
  const pillars = [
    {
      n: "01",
      t: "Supportive padding & structure",
      pts: [
        "Padded tongue relieves lace pressure across the instep",
        "Reinforced ankle support holds the rear-foot stable",
        "Rocker sole, high bridge & wide toe box spread plantar pressure",
      ],
    },
    {
      n: "02",
      t: "Seam-free inner fit",
      pts: [
        "Reversed, inside-out lining construction",
        "Padded collar for friction-free wear",
        "Minimal internal seams protect fragile diabetic skin",
      ],
    },
    {
      n: "03",
      t: "Built to outlast sneakers",
      pts: [
        "Durability proven through extended wear trials",
        "Premium, medical-grade materials throughout",
        "Breathable lining ensures long-term comfort",
      ],
    },
    {
      n: "04",
      t: "Air-stepping sole",
      pts: [
        "Lightweight Phylon midsole cushions every step",
        "Durable rubber outsole for confident traction",
        "TPU stabiliser delivers anti-twist foot protection",
      ],
    },
    {
      n: "05",
      t: "Pressure-relieving footbed",
      pts: [
        "Generous extra depth for compromised feet",
        "Triple-layer removable insole absorbs impact & offloads pressure",
        "Orthotic-friendly & antifungal design",
      ],
    },
  ];
  return (
    <section className="pillars" id="science-step">
      <div className="container">
        <div className="section-head pillars-head">
          <span className="eyebrow">The science behind the step</span>
          <h2>Everything flows from the<br/>FreeStride™ last &amp; fit system.</h2>
          <p>
            Five engineering systems work together to distribute plantar pressure
            evenly and reduce friction &mdash; mitigating the primary causes of
            diabetic foot ulcers and everyday foot discomfort.
          </p>
        </div>
        <div className="pillars-grid">
          {pillars.map((p) => (
            <article className="pillar-card" key={p.n}>
              <div className="pillar-n">{p.n}</div>
              <h3 className="pillar-t">{p.t}</h3>
              <ul className="pillar-pts">
                {p.pts.map((pt, i) => (
                  <li key={i}><Icon.check size={14}/><span>{pt}</span></li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const EngineeredForPurpose = () => {
  const items = [
    { t: "3° in-flare angle",        b: "Versus the conventional 6° last — less pressure on the 4th and 5th toes." },
    { t: "Minimal heel-to-toe drop", b: "Optimised weight distribution for a stable, walking-friendly gait." },
    { t: "Strobel stitching",        b: "Flexible construction that moves naturally with the foot." },
    { t: "Reversed lining",          b: "Built to minimise internal seams against vulnerable skin." },
    { t: "Enhanced depth",           b: "Protects vulnerable toe tops and makes room for orthotics." },
    { t: "Forefoot flexion range",   b: "Anatomical flex that supports healthy gait dynamics." },
    { t: "Engineered toe-spring",    b: "Promotes natural propulsion through every step." },
    { t: "Triple-layer insoles",     b: "Removable layers manage shear and plantar pressure." },
    { t: "2E–4E generous width",     b: "Accommodates orthotics, prosthetics and wide feet." },
    { t: "Double-walled eyelets",    b: "Protect the dorsal surfaces of the foot." },
    { t: "Slip-resistant outsole",   b: "Confident traction on everyday surfaces." },
    { t: "Padded tongue & laces",    b: "Comfort details that reduce pressure points." },
  ];
  return (
    <section className="engineered" id="engineered">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow on-dark">Engineered for purpose</span>
          <h2>Twelve deliberate decisions.</h2>
          <p>
            Every measurable choice in the Airstep last serves a clinical purpose &mdash;
            the difference between a shoe that merely fits and one that protects.
          </p>
        </div>
        <div className="engineered-grid">
          {items.map((it, i) => (
            <div className="eng-item" key={i}>
              <span className="eng-n">{String(i + 1).padStart(2, "0")}</span>
              <h4 className="eng-t">{it.t}</h4>
              <p className="eng-b">{it.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Gout section ─────────────────────────────────────────────────────
const GOUT_FEATURES = [
  {
    n: "01",
    title: "Wide, deep toe box",
    body: "The FreeStride™ last is podiatric-informed — wider across the forefoot and higher at the bridge than standard footwear. If a gout flare hits your big toe joint, your foot has room to swell without the shoe compressing it.",
  },
  {
    n: "02",
    title: "Triple-layer footbed",
    body: "An impact-absorbing base, orthotic-grade mid-layer, and soft top surface work together to cushion the metatarsophalangeal joint — the joint most commonly struck by gout. The footbed is fully removable if you need to fit a custom orthotic.",
  },
  {
    n: "03",
    title: "Seam-free inner lining",
    body: "Airstep is stitched inside-out so there are no internal seams to press against an inflamed joint. The breathable mesh upper reduces heat build-up — important, because warmth accelerates uric-acid crystal formation.",
  },
  {
    n: "04",
    title: "ISO-certified cow suede upper",
    body: "Soft, breathable and durable — suede stretches with wear and doesn't stiffen after washing. Unlike synthetic materials, it won't create localised pressure points as the shoe moulds to your foot over time.",
  },
];

const GoutSection = () => (
  <section className="gout-section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Gout & joint conditions</span>
        <h2>Built for feet that can't afford a bad shoe.</h2>
        <p className="section-lede">
          Gout attacks without warning — and the wrong shoe can turn a flare into a week of immobility.
          The best shoe for gout offers three things: room to swell, cushioning at the joint, and nothing
          inside the shoe pressing back. Airstep was designed with all three as non-negotiables.
        </p>
      </div>

      <div className="gout-grid">
        {GOUT_FEATURES.map((f) => (
          <div key={f.n} className="gout-card">
            <span className="gout-card-n">{f.n}</span>
            <h4 className="gout-card-title">{f.title}</h4>
            <p className="gout-card-body">{f.body}</p>
          </div>
        ))}
      </div>

      <div className="gout-footer">
        <div className="gout-footer-text">
          <strong>Already have custom orthotics?</strong> Every Airstep comes with a removable
          triple-layer footbed — swap it out and your orthotics drop straight in. The extra-depth
          last is designed to accommodate them without compressing the toe box.
        </div>
        <a className="btn btn-cta" href="shop.html">Shop Airstep <Icon.arrow size={15}/></a>
      </div>
    </div>
  </section>
);

// ── FreeStride infographic — full-width banner ───────────────────────
const FreeStrideInfographic = () => (
  <div className="freestride-banner">
    <img
      src="assets/freestride-infographic.png"
      alt="The Science Behind the FreeStride™ Step — annotated diagram showing podiatric-informed design, triple layer footbed, upper mesh, padded collar, seam-free inner fit, Phylon midsole, grippy rubber outsole and TPU stabiliser"
      className="freestride-banner-img"
      loading="lazy"
    />
  </div>
);

// ── Product photo strip — sits between TrustStrip and ExploreHub ─────
const ProductStrip = () => (
  <div className="product-strip">
    <div className="product-strip-inner product-strip-inner--two">
      <div className="product-strip-img">
        <img src="assets/shoe-pair-1.png" alt="Airstep trainer — pair view" loading="lazy"/>
      </div>
      <div className="product-strip-img">
        <img src="assets/shoe-hero-v2.png" alt="Airstep trainer — side profile" loading="lazy"/>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  LogoHeader, AnnounceBar, Nav, Hero, HeroCounter, QuickBenefits, TrustStrip, ProductStrip,
  FreeStrideInfographic, GoutSection, DiabetesCrisis, DiabetesFocus, Problem, Anatomy, Features,
  Evidence, Reviews, Compare, FAQ, Footer, SciencePillars, EngineeredForPurpose, NewlyDiagnosed
});
