// AirStep — multi-page site controller
// Each page's HTML sets <body data-page="..."> and loads this file AFTER
// icons.jsx, shoe.jsx, sections.jsx and buy-flow.jsx. One topic per page so
// visitors read in digestible chunks instead of one endless scroll.

const goToShop = () => { goToStore(); };

// Canonical reading order — drives the prev/next footer navigation.
const PAGE_FLOW = [
  { key: "home",           href: "index.html",          label: "Home" },
  { key: "diabetes",       href: "diabetes.html",       label: "Diabetes & Neuropathy" },
  { key: "just-diagnosed", href: "just-diagnosed.html", label: "Just Diagnosed" },
  { key: "technology",     href: "technology.html",     label: "The Technology" },
  { key: "endorsements",   href: "endorsements.html",   label: "Endorsements" },
  { key: "support",        href: "support.html",        label: "Support & NAPPI" },
  { key: "shop",           href: "shop.html",           label: "Shop Airstep" },
];

// ── Bottom-of-page previous / next navigation ───────────────────────
const PageEnd = ({ pageKey }) => {
  const i = PAGE_FLOW.findIndex(p => p.key === pageKey);
  const prev = i > 0 ? PAGE_FLOW[i - 1] : null;
  const next = i >= 0 && i < PAGE_FLOW.length - 1 ? PAGE_FLOW[i + 1] : null;
  return (
    <section className="page-end-wrap">
      <div className="container page-end">
        {prev ? (
          <a className="page-end-link prev" href={prev.href}>
            <span className="page-end-dir"><Icon.arrowRight size={14}/> Previous</span>
            <span className="page-end-label">{prev.label}</span>
          </a>
        ) : <span/>}
        {next ? (
          <a className="page-end-link next" href={next.href}>
            <span className="page-end-dir">Next <Icon.arrowRight size={14}/></span>
            <span className="page-end-label">{next.label}</span>
          </a>
        ) : <span/>}
      </div>
    </section>
  );
};

// ── Shared chrome wrapper ───────────────────────────────────────────
const Shell = ({ pageKey, children, end = true }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 700);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <React.Fragment>
      <AnnounceBar/>
      <Nav cartCount={0} onCart={goToShop}/>
      {children}
      {end && <PageEnd pageKey={pageKey}/>}
      <Footer/>
      <WhatsAppFab/>
      <StickyBuy show={scrolled} onBuy={goToShop}/>
    </React.Fragment>
  );
};

// ── Screening teaser (home only) ────────────────────────────────────
const ScreeningTeaser = () => (
  <section className="screen-teaser" id="risk-check">
    <div className="container screen-teaser-inner">
      <div className="screen-teaser-text">
        <span className="eyebrow">Free 2-minute check</span>
        <h2 className="screen-teaser-h">Not sure where you stand with diabetes?</h2>
        <p className="screen-teaser-lede">
          Roughly <strong>1 in 9 South African adults</strong> is living with diabetes — and many
          don't yet know it. Take our private, validated risk check to see your estimated 10-year
          risk and a sensible next step. No bloods, no clinic.
        </p>
        <a className="btn btn-cta" href="diabetes-aware.html">
          Check my risk <Icon.arrow size={16}/>
        </a>
      </div>
      <div className="screen-teaser-card">
        <div className="screen-teaser-stat">
          <span className="screen-teaser-num">2 min</span>
          <span className="screen-teaser-cap">to complete</span>
        </div>
        <ul className="screen-teaser-list">
          <li><Icon.check size={15}/> Based on the clinical FINDRISC tool</li>
          <li><Icon.check size={15}/> Private &amp; POPIA-compliant</li>
          <li><Icon.check size={15}/> A clear result, not a diagnosis</li>
        </ul>
      </div>
    </div>
  </section>
);

// ── Insole reveal showcase (home only) ──────────────────────────────
const InsoleShowcase = () => (
  <section className="insole-show" id="insole">
    <div className="container insole-show-grid">
      <div className="insole-show-media">
        <img src="assets/product-insole-reveal.jpg"
             alt="Airstep shoe with its removable triple-layer pressure-offloading insole lifted out"
             loading="lazy"/>
      </div>
      <div className="insole-show-body">
        <span className="eyebrow">Inside the shoe</span>
        <h2 className="insole-show-h">The insole does the real work.</h2>
        <p className="insole-show-lede">
          Lift the footbed and you'll find what sets Airstep apart — a <strong>triple-layer,
          pressure-offloading insole</strong> that redistributes load away from the metatarsal
          heads and heel, exactly where diabetic ulcers begin.
        </p>
        <ul className="insole-show-list">
          <li>
            <Icon.check size={16}/>
            <div><strong>Triple-density build</strong> — a firm base, a cushioning core and a skin-friendly top sheet.</div>
          </li>
          <li>
            <Icon.check size={16}/>
            <div><strong>Removable &amp; orthotic-ready</strong> — lift it out to fit your own prescribed orthotic.</div>
          </li>
        </ul>
        <a className="insole-show-cta" href="technology.html">
          See the full construction <Icon.arrow size={16}/>
        </a>
      </div>
    </div>
  </section>
);

// ── Diabetic shoes are a specialised category (diabetes page) ───────
const SpecializedFootwear = () => {
  const sports = [
    { label: "Running", note: "Cushioned for repeated impact" },
    { label: "Basketball", note: "High collars for ankle support" },
    { label: "Weightlifting", note: "A flat, stable base for load" },
  ];
  const features = [
    { ic: "feather", title: "A seam-free interior", body: "Soft, stitch-free linings so nothing rubs as you move \u2014 the friction that quietly starts a blister is engineered out." },
    { ic: "width",   title: "A spacious toe box", body: "Extra room across the toes, with space for deformities like bunions or hammertoes instead of pressing on them." },
    { ic: "layers",  title: "Depth for orthotics", body: "Built with extra depth to take a custom insert, distributing weight away from the pressure points where ulcers begin." },
    { ic: "shield",  title: "Protection, not just comfort", body: "Every choice is made to keep skin intact \u2014 preventing the strains, calluses and ulcers a neuropathic foot can't feel." },
  ];
  return (
    <section className="spec-fw" id="specialized">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">A real medical category</span>
          <h2>Every sport has its shoe.<br/>So does diabetes.</h2>
          <p>
            Weightlifters don't train in running shoes; runners don't play in basketball boots.
            Footwear is specialised for the body and the task &mdash; and diabetic footwear is no
            different. It's purpose-built to protect the foot from the forces that break down skin
            and turn into ulcers. If you're living with diabetes and aren't wearing it yet, it's
            worth speaking to your doctor or podiatrist about your options.
          </p>
        </div>

        <div className="spec-analogy">
          {sports.map((s, i) => (
            <div className="spec-chip" key={i}>
              <span className="spec-chip-label">{s.label}</span>
              <span className="spec-chip-note">{s.note}</span>
            </div>
          ))}
          <div className="spec-chip spec-chip--lead">
            <span className="spec-chip-ic">{Icon.shield({ size: 18 })}</span>
            <span className="spec-chip-label">Diabetes</span>
            <span className="spec-chip-note">Protection from pressure &amp; friction</span>
          </div>
        </div>

        <div className="spec-feat-head">
          <h3>What actually makes a shoe diabetic</h3>
          <p>It isn't a label on the box. It's four deliberate design decisions, each aimed at one thing &mdash; keeping the skin unbroken.</p>
        </div>
        <div className="spec-feat-grid">
          {features.map((f, i) => (
            <article className="spec-feat" key={i}>
              <span className="spec-feat-ic">{Icon[f.ic]({ size: 22 })}</span>
              <h4 className="spec-feat-title">{f.title}</h4>
              <p className="spec-feat-body">{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Why the wrong shoe is dangerous → mapped to Airstep (home only) ──
const FootwearRisk = () => {
  return (
    <section className="fw-risk" id="why-footwear">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Why footwear matters</span>
          <h2>The wrong shoe isn't a comfort problem.<br/>It's a medical risk.</h2>
          <p className="fw-risk-intro">
            Here's the part most people miss: for a foot that can't feel, the everyday shoe is
            often the hazard. A too-narrow toe box, a hard inner seam, an unforgiving sole &mdash;
            the very things a healthy foot shrugs off are what quietly start the damage. So the
            right shoe isn't about comfort. It's the front line of protection.
          </p>
        </div>

        <div className="fw-stat-row">
          <div className="fw-stat">
            <div className="fw-stat-n">63%</div>
            <p className="fw-stat-c">
              of people with diabetes are walking in the wrong-size shoe — most often too narrow.
            </p>
            <span className="fw-stat-src">University of Dundee · Int. J. Clinical Practice, 2007</span>
          </div>
          <div className="fw-stat">
            <div className="fw-stat-n">40%</div>
            <p className="fw-stat-c">
              of healed foot ulcers return within a year &mdash; and therapeutic footwear is the most proven way to prevent the next one.
            </p>
            <span className="fw-stat-src">IWGDF Guidelines · ulcer-recurrence data</span>
          </div>
          <div className="fw-stat">
            <div className="fw-stat-n">80%</div>
            <p className="fw-stat-c">
              of diabetes-related amputations are considered preventable with proper foot care and protection.
            </p>
            <span className="fw-stat-src">World Health Organization</span>
          </div>
        </div>

        <div className="fw-risk-foot">
          <span>Airstep is a Class A Medical Device, engineered to remove every one of those pressure points &mdash; see exactly how it measures up to the clinical checklist.</span>
          <a className="btn btn-cta" href="technology.html">
            See how it's made <Icon.arrow size={16}/>
          </a>
        </div>
      </div>
    </section>
  );
};

// ── Home "explore" hub — routes visitors into each topic ────────────
const ExploreHub = () => {
  const cards = [
    { href: "diabetes.html",   eyebrow: "The problem",       title: "Diabetes & Neuropathy", desc: "How nerve damage silences the warning signs — and the way an ulcer quietly begins." },
    { href: "just-diagnosed.html", eyebrow: "Just diagnosed?", title: "Start With Your Feet", desc: "A simple six-step foot-care routine to protect your feet from day one." },
    { href: "technology.html", eyebrow: "How it works",       title: "The Technology",        desc: "The FreeStride™ last, triple-layer offloading insole and seam-free build — the full spec." },
    { href: "endorsements.html", eyebrow: "Proof",            title: "Endorsements",          desc: "What podiatrists and people living with diabetes say after wearing Airstep." },
    { href: "diabetes-aware.html",  eyebrow: "Free 2-min check",   title: "Diabetes Risk Check",   desc: "A private, validated screening to estimate your 10-year risk — no bloods, no clinic." },
    { href: "support.html",    eyebrow: "Patients & pros",    title: "Support & NAPPI Codes", desc: "FAQs, sizing, medical-aid claims and per-size NAPPI codes for prescribers." },
  ];
  return (
    <section className="hub">
      <div className="container">
        <div className="section-head hub-head">
          <span className="eyebrow">Explore</span>
          <h2>One topic at a time.</h2>
          <p>
            There's a lot behind a medical-grade shoe. Take it in whatever order suits you —
            each section stands on its own, so you're never reading more than you need.
          </p>
        </div>
        <div className="hub-grid">
          {cards.map((c, i) => (
            <a className="hub-card" href={c.href} key={i}>
              <span className="hub-card-eyebrow">{c.eyebrow}</span>
              <h3 className="hub-card-title">{c.title}</h3>
              <p className="hub-card-desc">{c.desc}</p>
              <span className="hub-card-go">Read more <Icon.arrow size={15}/></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Home testimonials — patients & podiatrists (home only) ──────────
const HomeTestimonials = () => {
  const items = [
    {
      tag: "Lived experience",
      body: "I've been wearing Airstep daily since October 2025. Balance and mobility are constant challenges \u2014 and Airstep has made a real difference. Within the first few weeks, I noticed improved pressure distribution and over time felt as though I'd regained some sensation.",
      name: "Gavin van Wyk",
      role: "Type 1 Diabetes · Amputee · SA Diabetes Advocate",
    },
    {
      tag: "Lived experience",
      body: "Since starting to use the Airstep, it has been an absolutely amazing journey. I quit smoking, changed my diet, and now do 20,000 steps a day in these shoes. I no longer take pain medication, and I sleep like a baby.",
      name: "Kresan Moodley",
      role: "Type 1 Diabetic · Neuropathy",
    },
    {
      tag: "Clinical perspective",
      body: "Airstep reflects a deep understanding of foot mechanics, comfort, and support. I recommend it to my diabetic patients.",
      name: "Humaira Ismail",
      role: "Podiatrist · Dunkeld Medical & Dental Centre, Randburg",
    },
  ];
  const initials = (n) => n.split(" ").filter(w => /^[A-Z]/.test(w)).map(w => w[0]).slice(0, 2).join("");
  return (
    <section className="home-tm" id="testimonials">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Real results</span>
          <h2>What patients and podiatrists say.</h2>
        </div>
        <div className="review-grid">
          {items.map((r, i) => (
            <article className="review" key={i}>
              <div className="home-tm-badge">
                <span className="home-tm-stars">★★★★★</span> Verified
              </div>
              <div className="body">“{r.body}”</div>
              <div className="who">
                <div className="avatar">{initials(r.name) || "A"}</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 className="home-tm-cta">
          <a className="btn btn-cta" href="endorsements.html">
            Read all endorsements <Icon.arrow size={16}/>
          </a>
        </div>
      </div>
    </section>
  );
};

// ── Medical-aid explainer — simple 3-step claim path (home only) ─────
const MedicalAidSimple = () => {
  const steps = [
    { n: "1", t: "Order your Airstep", b: "We ship directly to you across South Africa." },
    { n: "2", t: "Receive your NAPPI-coded invoice", b: "We include it automatically with every order." },
    { n: "3", t: "Submit to your medical aid", b: "Airstep is NAPPI-coded and PMB-listed. Whether it's reimbursed depends on your scheme's rules — we'll give you everything you need to submit." },
  ];
  return (
    <section className="med-simple" id="medical-aid">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Medical aid</span>
          <h2>How claiming on your medical aid works.</h2>
        </div>
        <div className="med-simple-steps">
          {steps.map((s) => (
            <div className="med-simple-step" key={s.n}>
              <div className="med-simple-n">{s.n}</div>
              <h3 className="med-simple-t">{s.t}</h3>
              <p className="med-simple-b">{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── "Already living with diabetes" risk CTA (home, top) ─────────────
const RiskProtect = () => {
  return (
    <section className="risk-protect-wrap">
      <div className="container">
        <div className="risk-protect">
          <div className="risk-protect-text">
            <span className="risk-protect-eyebrow">If you're already living with diabetes</span>
            <h2 className="risk-protect-h">Your feet carry the most risk. Protect them.</h2>
            <p className="risk-protect-p">
              Up to a third of people with diabetes develop a foot ulcer in their lifetime —
              and most amputations begin with one. Airstep is a NAPPI-coded medical-grade shoe
              engineered to lower that risk.
            </p>
            <button className="btn btn-cta" onClick={goToShop}>
              See the Airstep shoe <Icon.arrow size={16}/>
            </button>
          </div>
          <div className="risk-protect-media">
            <ShoePhoto variant="side" alt="Airstep diabetic-friendly trainer, side profile"/>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Pages ───────────────────────────────────────────────────────────
const HomeApp = () => (
  <Shell pageKey="home" end={false}>
    <HeroCounter onBuy={goToShop}/>
    <TrustStrip/>
    <ExploreHub/>
  </Shell>
);

const DiabetesPage = () => (
  <Shell pageKey="diabetes">
    <DiabetesCrisis/>
    <DiabetesComplications/>
    <DiabetesFocus/>
    <SpecializedFootwear/>
    <FootwearRisk/>
    <ScreeningTeaser/>
  </Shell>
);

const JustDiagnosedPage = () => (
  <Shell pageKey="just-diagnosed">
    <NewlyDiagnosed/>
    <Problem/>
  </Shell>
);

const TechnologyPage = () => (
  <Shell pageKey="technology">
    <InsoleShowcase/>
    <QuickBenefits/>
    <MadeForMovement/>
    <Anatomy/>
    <ClinicalChecklist/>
    <WhyAirstep/>
  </Shell>
);

const EndorsementsPage = () => (
  <Shell pageKey="endorsements">
    <Reviews/>
    <Compare/>
  </Shell>
);

const SupportPage = () => (
  <Shell pageKey="support">
    <FAQ/>
    <MedicalAidSimple/>
    <NappiCodes/>
  </Shell>
);

// ── Dispatch on <body data-page="..."> ──────────────────────────────
const PAGE_COMPONENTS = {
  home: HomeApp,
  diabetes: DiabetesPage,
  "just-diagnosed": JustDiagnosedPage,
  technology: TechnologyPage,
  endorsements: EndorsementsPage,
  support: SupportPage,
};

const __pageKey = (document.body && document.body.dataset.page) || "home";
const __Page = PAGE_COMPONENTS[__pageKey] || HomeApp;
ReactDOM.createRoot(document.getElementById("root")).render(<__Page/>);
