// AirStep — page sections

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>Free shipping across South Africa</span>
  </div>
);

const Nav = ({ cartCount, onCart }) => (
  <header className="nav">
    <div className="nav-inner">
      <a href="#top" className="brand" aria-label="Airstep home">
        <Logo height={36}/>
      </a>
      <nav className="nav-links" aria-label="Primary">
        <a href="#diabetes">Diabetes &amp; Neuropathy</a>
        <a href="#anatomy">Technology</a>
        <a href="#reviews">Endorsements</a>
        <a href="#buy">Shop</a>
        <a href="#faq">Support</a>
      </nav>
      <div className="nav-right">
        <button className="cart-btn" onClick={onCart} aria-label="Open cart">
          <Icon.bag size={16}/>
          Cart
          <span className="count">{cartCount}</span>
        </button>
      </div>
    </div>
  </header>
);

// =====================================================================
// HERO COUNTER — "Every 30 Seconds" variant (landing page)
// =====================================================================
const HeroCounter = ({ onBuy }) => {
  const [legs, setLegs] = React.useState(0);
  const [pulse, setPulse] = React.useState(true);

  React.useEffect(() => {
    const tick = setInterval(() => setLegs(v => v + 1), 30000);
    const beat = setInterval(() => setPulse(p => !p), 1000);
    return () => { clearInterval(tick); clearInterval(beat); };
  }, []);

  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">
            {String(legs).padStart(2, "0")}
          </div>
          <h1 className="hero-counter-headline">
            legs lost to diabetes
            <span className="hero-counter-subline"> since you opened this page.</span>
          </h1>
          <p className="hero-counter-body">
            One every 30 seconds. 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>

        <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">
              Airstep is here<br/>to interrupt the chain.
            </h2>
            <p className="hero-counter-card-body">
              The first medical-grade shoe built and certified in South Africa
              for diabetic foot protection.
            </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="product-tag">In stock · Ships in 1 day</div>
        <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 className="crisis-local-num">R&thinsp;0</div>
            <div className="crisis-local-label">out-of-pocket for most patients &mdash; Airstep is NAPPI-coded and claimable on medical aid.</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 remove every failure point 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}/>
            Tested &amp; approved by Telmo Applied Science
          </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>
);

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 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 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",
    },
  ];
  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 FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Is Airstep specifically for people with diabetes?",
      a: "Yes — Airstep is purpose-built to prevent diabetic foot ulcers and protect feet with reduced sensation, but its clinical features also benefit people with arthritis, post-surgical recovery, structural deformities (bunions, hammer toes), plantar fat pad atrophy, and anyone on their feet for prolonged periods. 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." },
    { 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@airstepfootwear.com 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. Register your practice at info@airstepfootwear.com or call Rory Ramsay on 074 906 0388 for an account application." },
    { 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@airstepfootwear.com." },
  ];
  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}}>Rory Ramsay: 074 906 0388</span>
            <a href="mailto:info@airstepfootwear.com" style={{color:"var(--sand)"}}>info@airstepfootwear.com</a>
          </div>
          <div style={{marginTop:24, fontSize:12, color:"rgba(246,241,232,0.55)", lineHeight:1.7, paddingTop:20, borderTop: "1px solid rgba(255,255,255,0.08)"}}>
            <strong style={{color:"#fff", display:"block", fontFamily:"var(--sans)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", marginBottom:6}}>Authorised Stockist</strong>
            <strong style={{color:"var(--sand)", fontFamily:"var(--serif)", fontSize:17, fontWeight:500, display:"block", marginBottom:2}}>Noel Nagiah</strong>
            Medical Orthotist &amp; Prosthetist Centre<br/>
            6 Aurora Drive, Ridgeton Towers, Unit 146<br/>
            Umhlanga Ridge, Durban<br/>
            <span style={{color:"#fff", display:"block", marginTop:6}}>+27 31 566 5450 · 082 696 9604</span>
          </div>
        </div>
        <div>
          <h4>Shop</h4>
          <ul>
            <li><a href="#buy">Airstep Trainer</a></li>
            <li><a href="#buy">Sizing guide</a></li>
            <li><a href="#faq">Mixed-size pairs</a></li>
            <li><a href="#faq">Medical aid claims</a></li>
          </ul>
        </div>
        <div>
          <h4>The science</h4>
          <ul>
            <li><a href="#diabetes">Diabetic foot care</a></li>
            <li><a href="#anatomy">FreeStride™ technology</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#reviews">Endorsements</a></li>
          </ul>
        </div>
        <div>
          <h4>For Healthcare Pros</h4>
          <ul>
            <li><a href="mailto:info@airstepfootwear.com">Wholesale ordering</a></li>
            <li><a href="mailto:info@airstepfootwear.com">Become a distributor</a></li>
            <li><a href="#faq">NAPPI codes</a></li>
            <li><a href="#faq">Clinical documents</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Airstep Footwear · Class A Medical Device · GMDN 31041 · MediKredit Z20AH07AA02 · NAPPI-coded · PMB listed · SAMED member</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 not a substitute for prescribed medication or medical treatment.
        Always continue any therapy, insulin regime, or care plan advised by your
        doctor, podiatrist, or endocrinologist. Consult your healthcare provider
        before changing any aspect of your diabetic foot care.
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  AnnounceBar, Nav, Hero, HeroCounter, QuickBenefits, TrustStrip, DiabetesCrisis, DiabetesFocus, Problem, Anatomy, Features,
  Evidence, Reviews, Compare, FAQ, Footer
});