// Airstep — "Diabetes Aware" health-assessment landing (South Africa)
// Modelled on a hospital diabetes-awareness page, localised for SA and wired
// to flow into Airstep's own interactive risk check (screening.html).

const goToShop = () => { goToStore(); };
const goToCheck = () => { window.location.href = "screening.html"; };

const WARNING_SIGNS = [
  { icon: "refresh", label: "Passing urine often", note: "Especially through the night." },
  { icon: "thermo",  label: "Constant thirst or hunger", note: "That doesn't ease after drinking or eating." },
  { icon: "feather", label: "Unusual tiredness", note: "Feeling drained without a clear reason." },
  { icon: "cloud",   label: "Blurred vision", note: "Sight that comes and goes." },
  { icon: "width",   label: "Unexplained weight loss", note: "Losing weight without trying." },
  { icon: "heart",   label: "Slow-healing wounds", note: "Cuts, sores or infections that linger — often on the feet." },
];

const DiabetesAware = () => {
  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}/>

      {/* ── Hero / banner ────────────────────────────────────── */}
      <section className="da-hero">
        <div className="container da-hero-inner">
          <div className="da-hero-text">
            <span className="da-eyebrow">Diabetes Aware · Free 2-minute check</span>
            <h1 className="da-hero-h">Know your risk today.</h1>
            <p className="da-hero-lede">
              Diabetes affects millions of South Africans — and roughly
              <strong> 1 in 9 adults</strong> is living with it, many without knowing.
              The earlier it's caught, the more of your health, eyesight and feet you keep.
              Take our free, private check to understand your personal risk.
            </p>
            <div className="da-hero-actions">
              <button className="btn btn-cta" onClick={goToCheck}>
                Start the free assessment <Icon.arrow size={16}/>
              </button>
              <span className="da-hero-meta"><Icon.lock size={14}/> 2 minutes · Private · No bloods</span>
            </div>
          </div>
          <div className="da-hero-stat">
            <div className="da-stat-num">1 in 9</div>
            <div className="da-stat-cap">South African adults lives with diabetes</div>
            <div className="da-stat-rule"></div>
            <div className="da-stat-sub">
              More than half of people with type 2 diabetes don't yet know they have it.
            </div>
          </div>
        </div>
      </section>

      {/* ── Warning signs ────────────────────────────────────── */}
      <section className="da-signs">
        <div className="container">
          <div className="section-head da-signs-head">
            <span className="eyebrow">Know the signs</span>
            <h2>Symptoms are easy to miss.</h2>
            <p>
              Many people with diabetes notice nothing at all. If any of these feel
              familiar — especially the foot-related ones — speak to a clinician and get
              your blood sugar tested.
            </p>
          </div>
          <div className="da-signs-grid">
            {WARNING_SIGNS.map((s, i) => (
              <div className="da-sign" key={i}>
                <span className="da-sign-ico">{Icon[s.icon]({ size: 22 })}</span>
                <h3 className="da-sign-label">{s.label}</h3>
                <p className="da-sign-note">{s.note}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Who should get checked ───────────────────────────── */}
      <section className="da-who">
        <div className="container da-who-inner">
          <div className="section-head da-who-head">
            <span className="eyebrow">Who should get checked</span>
            <h2>Worth a check — even if you feel fine.</h2>
          </div>
          <p className="da-who-lede">
            Health authorities recommend that adults be screened for type 2 diabetes from
            <strong> age 45</strong>, and earlier if any of the below apply. If your result
            is normal, it's worth repeating the check every three years.
          </p>
          <ul className="da-who-list">
            <li><span className="da-dot"></span> A parent or sibling with diabetes</li>
            <li><span className="da-dot"></span> Carrying extra weight, especially around the middle</li>
            <li><span className="da-dot"></span> High blood pressure or raised cholesterol</li>
            <li><span className="da-dot"></span> Little physical activity in a typical week</li>
            <li><span className="da-dot"></span> Diabetes during a pregnancy, or a large birth-weight baby</li>
            <li><span className="da-dot"></span> Of African, Indian or other higher-risk descent</li>
          </ul>
        </div>
      </section>

      {/* ── Footer CTA: tie back to feet / Airstep ───────────── */}
      <section className="da-foot-cta-wrap">
        <div className="container">
          <div className="da-foot-cta">
            <div className="da-foot-cta-text">
              <span className="da-eyebrow da-eyebrow-sand">If you're already living with diabetes</span>
              <h3>Your feet carry the most risk. Protect them.</h3>
              <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>
        </div>
      </section>

      {/* ── Support resources ────────────────────────────────── */}
      <section className="da-resources">
        <div className="container">
          <div className="da-res-grid">
            <div className="da-res">
              <h4>Diabetes South Africa</h4>
              <p>National non-profit offering education, support groups and guidance for people living with diabetes.</p>
              <span className="da-res-link">diabetessa.org.za</span>
            </div>
            <div className="da-res">
              <h4>Talk to Airstep</h4>
              <p>Questions about diabetic footwear, sizing or medical-aid claims? Our team is here to help.</p>
              <span className="da-res-link">info@diabeticshoes.co.za · 074 906 0388</span>
            </div>
            <div className="da-res">
              <h4>See your clinic or GP</h4>
              <p>This check is a guide, not a diagnosis. A fasting blood-glucose or HbA1c test confirms diabetes.</p>
              <span className="da-res-link">Book a blood-glucose test</span>
            </div>
          </div>
          <p className="da-disclaimer">
            Diabetes Aware is an educational risk indicator and does not provide a medical
            diagnosis. Always consult a qualified healthcare professional about your health.
          </p>
        </div>
      </section>

      <Footer/>
      <StickyBuy show={scrolled} onBuy={goToShop}/>
    </React.Fragment>
  );
};

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