/* SpineClarity — public homepage (resource-hub mode) */
const { useState, useEffect, useMemo } = React;

const ARTICLES_HREF = "/articles";
const REVIEW_HREF = "waitlist.html#waitlist";

const NAV_LINKS = [
  { href: "/mri-terms", label: "MRI Terms" },
  { href: "/conditions", label: "Conditions" },
  { href: "/treatments", label: "Treatments" },
  { href: REVIEW_HREF, label: "MRI Review" },
  { href: "#about", label: "About" }
];

/* All MRI terms shown in the hero finder. Kept small and curated;
   the full library will live at /mri-terms when it ships. */
const HERO_TERMS = [
  { label: "Foraminal narrowing", gloss: "When a nerve's exit tunnel is narrowed.", aliases: "neural foraminal", href: "/mri-terms/neural-foraminal-narrowing" },
  { label: "Lateral recess stenosis", gloss: "Tight space where a nerve sits before it exits.", aliases: "", href: "/mri-terms/lateral-recess-stenosis" },
  { label: "Modic changes", gloss: "Signal changes in the bone next to a disc.", aliases: "", href: "/mri-terms/modic-changes" },
  { label: "Disc bulge vs. protrusion", gloss: "Three different things that often get confused.", aliases: "disc bulge protrusion extrusion", href: "/mri-terms/disc-bulge-vs-protrusion-vs-extrusion" },
  { label: "L4–L5", gloss: "The disc level most often involved in low-back pain.", aliases: "L4 L5 lumbar", href: "/mri-terms/l4-l5" },
  { label: "L5–S1", gloss: "The lowest lumbar level, near the sacrum.", aliases: "L5 S1 lumbosacral", href: "/mri-terms/l5-s1" },
  { label: "Lumbar spinal stenosis", gloss: "Narrowing of the spinal canal in the lower back.", aliases: "stenosis lumbar", href: "/conditions/lumbar-spinal-stenosis" },
  { label: "Cervical disc herniation", gloss: "A neck-level disc pressing on a nerve or the cord.", aliases: "neck cervical herniated disc", href: "/conditions/cervical-disc-herniation" }
];

/* ——— Icons ——— */
const Icon = ({ name, size = 16, stroke = 1.6 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    "aria-hidden": true
  };
  switch (name) {
    case "arrow":
      return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "menu":
      return <svg {...common}><path d="M4 7h16M4 12h16M4 17h16" /></svg>;
    case "close":
      return <svg {...common}><path d="M6 6l12 12M18 6L6 18" /></svg>;
    case "search":
      return <svg {...common}><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></svg>;
    default:
      return null;
  }
};

/* ——— Header ——— */
const Header = () => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <div className="container header-row">
        <a href="/" className="brand" aria-label="SpineClarity home">
          <span className="brand-mark" aria-hidden>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
              <path d="M12 3v18" />
              <path d="M8 6h8M7 10h10M7 14h10M8 18h8" />
            </svg>
          </span>
          <span>SpineClarity</span>
        </a>
        <nav className="nav" aria-label="Primary">
          {NAV_LINKS.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>
        <button className="menu-btn" onClick={() => setOpen((o) => !o)} aria-label="Toggle menu">
          <Icon name={open ? "close" : "menu"} size={18} />
        </button>
      </div>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        <div className="container">
          {NAV_LINKS.map((l) => <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>)}
        </div>
      </div>
    </header>
  );
};

/* ——— Term finder (hero right card) ———
   Real client-side filter over the small HERO_TERMS index.
   Backend not required; works entirely in-browser. */
const TermFinder = () => {
  const [q, setQ] = useState("");
  const trimmed = q.trim().toLowerCase();
  const matches = useMemo(() => {
    if (!trimmed) return HERO_TERMS;
    return HERO_TERMS.filter((t) => {
      const hay = (t.label + " " + (t.aliases || "")).toLowerCase();
      return hay.includes(trimmed);
    });
  }, [trimmed]);

  return (
    <aside className="term-finder hero-finder" aria-label="Search MRI terms">
      <span className="eyebrow">Start with a word from your report</span>
      <h2>Search or browse common MRI terms</h2>
      <div className="finder-input">
        <input
          type="text"
          className="input"
          placeholder="e.g., foraminal narrowing, L5–S1, Modic"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          aria-label="Filter MRI terms"
          autoComplete="off"
          spellCheck={false}
        />
      </div>
      {matches.length === 0 ? (
        <div className="finder-empty">No matches yet — try a shorter term, or browse all guides.</div>
      ) : (
        <ul className="finder-list">
          {matches.map((t) => (
            <li key={t.href}>
              <a className="finder-row" href={t.href}>
                <span className="finder-text">
                  <span className="finder-term">{t.label}</span>
                  <span className="finder-gloss">{t.gloss}</span>
                </span>
                <Icon name="arrow" size={14} />
              </a>
            </li>
          ))}
        </ul>
      )}
      <div className="finder-foot">
        <span className="finder-meta">
          {trimmed ? `${matches.length} matching` : "New guides added regularly"}
        </span>
        <a className="finder-all" href="/mri-terms">View all MRI terms →</a>
      </div>
    </aside>
  );
};

/* ——— 1. Hero (two-column, mobile reorders via grid-template-areas) ——— */
const Hero = () => (
  <section className="hero" id="top">
    <div className="container hero-grid">
      <div className="hero-intro">
        <span className="eyebrow">Spine and MRI education</span>
        <h1 className="display">Plain-language answers to spine MRI questions.</h1>
        <p className="lede">
          Surgeon-written guides to MRI terminology, common spine conditions, and treatment options — with clear explanations of what your imaging report is, and is not, saying.
        </p>
      </div>
      <TermFinder />
      <div className="hero-actions-block">
        <div className="hero-actions">
          <a className="btn btn-primary" href={ARTICLES_HREF}>
            Browse the Library
            <Icon name="arrow" size={14} />
          </a>
        </div>
        <div className="hero-byline">
          Written and reviewed by Dr. Ifije Ohiorhenuan, a board-certified spine neurosurgeon.
        </div>
      </div>
    </div>
  </section>
);

/* ——— 2. Browse the library (3-up cards, navigation system) ——— */
const Library = () => {
  const cards = [
    {
      title: "MRI report terms",
      body: "Plain-language explanations of the words radiologists use — foraminal narrowing, Modic changes, Pfirrmann grading, and more.",
      href: "/mri-terms",
      cta: "Browse MRI terms"
    },
    {
      title: "Conditions",
      body: "Surgeon-written guides on disc herniation, spinal stenosis, sciatica, cervical radiculopathy, and other common diagnoses.",
      href: "/conditions",
      cta: "Browse conditions"
    },
    {
      title: "Treatments",
      body: "What patients should know about physical therapy, injections, microdiscectomy, fusion, disc replacement, and how surgeons think about choosing between them.",
      href: "/treatments",
      cta: "Browse treatments"
    }
  ];
  return (
    <section className="block" id="library">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Browse the library</span>
          <h2 className="display">Three places most patients start.</h2>
          <p className="lede">
            The library is organized into three reading paths, depending on whether you're trying to decode a report, understand a diagnosis, or compare treatments.
          </p>
        </div>
        <div className="steps">
          {cards.map((c, i) => (
            <article className="offer-card" key={i}>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <a className="offer-link" href={c.href}>
                {c.cta} <Icon name="arrow" size={12} />
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ——— 3. Why MRI reports are hard to understand ——— */
const WhyMri = () => (
  <section className="block" id="why">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Why this site exists</span>
        <h2 className="display">Why MRI reports are hard to understand.</h2>
      </div>
      <div className="why-prose">
        <p>
          Spine MRI reports are written for doctors, not patients. They often contain terms like foraminal narrowing, disc protrusion, stenosis, Modic changes, and nerve impingement — but the report usually does not explain which findings matter, which are common age-related changes, or how they relate to your symptoms.
        </p>
        <p>
          SpineClarity helps translate those terms into plain language so you can better understand your report and prepare for a more informed conversation with your clinician.
        </p>
        <p className="why-aside">
          If you want help applying this information to your own MRI report and symptoms, SpineClarity also offers a <a href={REVIEW_HREF}>written MRI Review</a>.
        </p>
      </div>
    </div>
  </section>
);

/* ——— 4. Common MRI terms (glossary grid) ——— */
const CommonTerms = () => {
  const terms = [
    { href: "/mri-terms/neural-foraminal-narrowing", term: "Neural foraminal narrowing", gloss: "When a nerve's exit tunnel is narrowed." },
    { href: "/mri-terms/lateral-recess-stenosis", term: "Lateral recess stenosis", gloss: "Tightness where a nerve root sits before it exits." },
    { href: "/mri-terms/modic-changes", term: "Modic changes", gloss: "Signal changes in the bone next to a disc." },
    { href: "/mri-terms/disc-bulge-vs-protrusion-vs-extrusion", term: "Disc bulge vs. protrusion vs. extrusion", gloss: "Three different things that often get confused." },
    { href: "/mri-terms/l4-l5", term: "L4–L5", gloss: "The disc level most often involved in low-back pain." },
    { href: "/mri-terms/l5-s1", term: "L5–S1", gloss: "The lowest lumbar level, near the sacrum." },
    { href: "/conditions/lumbar-spinal-stenosis", term: "Lumbar spinal stenosis", gloss: "Narrowing of the spinal canal in the lower back." },
    { href: "/conditions/cervical-disc-herniation", term: "Cervical disc herniation", gloss: "A neck-level disc pressing on a nerve or the cord." }
  ];
  return (
    <section className="block" id="terms">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Common MRI report terms</span>
          <h2 className="display">Start with the words on your report.</h2>
          <p className="lede">
            A few of the terms that appear most often in lumbar and cervical MRI reports.
          </p>
        </div>
        <div className="term-grid">
          {terms.map((t) => (
            <a className="term-card" key={t.href} href={t.href}>
              <div className="term">{t.term}</div>
              <div className="gloss">{t.gloss}</div>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 24 }}>
          <a className="offer-link" href={ARTICLES_HREF}>Browse all articles →</a>
        </div>
      </div>
    </section>
  );
};

/* ——— 4. How surgeons read MRIs ——— */
const HowSurgeons = () => (
  <section className="block" id="how-surgeons-read">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">A note on how spine surgeons read imaging</span>
        <h2 className="display">MRI findings only matter when they match the patient.</h2>
        <p className="lede">
          An MRI report describes anatomy. It does not, by itself, prove what is causing pain. The goal of these articles is to explain how spine surgeons think about the relationship between imaging, symptoms, nerve patterns, and treatment options — because that context is often missing from generic patient information online.
        </p>
      </div>
      <ul className="surg-bullets">
        <li>
          <span className="key">Level</span>
          <span className="val"><strong>Level matters.</strong> A finding at L4–L5 affects different nerves than the same finding at L5–S1.</span>
        </li>
        <li>
          <span className="key">Side</span>
          <span className="val"><strong>Side matters.</strong> A right-sided finding rarely explains left-sided symptoms, and vice versa.</span>
        </li>
        <li>
          <span className="key">Symptoms</span>
          <span className="val"><strong>Symptoms and exam matter.</strong> Imaging is one input. The pattern of pain, weakness, or numbness is another.</span>
        </li>
      </ul>
      <blockquote className="quote">
        "In spine care, the question is rarely, <em>'Is the MRI abnormal?'</em> The better question is, <em>'Which finding, if any, explains the patient's symptoms?'</em>"
      </blockquote>
      <aside className="urgent-callout" aria-label="When symptoms are urgent">
        <span className="eyebrow">When symptoms are urgent</span>
        <p>
          New weakness, loss of bowel or bladder control, numbness in the groin or saddle area, fever with severe back pain, or rapidly worsening neurologic symptoms should be evaluated urgently — regardless of what an MRI report says.
        </p>
        <a className="text-link" href="/urgent-care">Read more about urgent spine symptoms →</a>
      </aside>
    </div>
  </section>
);

/* ——— 5. About this site (with optional service folded in) ——— */
const AboutSite = () => (
  <section className="block about" id="about">
    <div className="container">
      <div className="about-grid">
        <div className="headshot-frame">
          <img src="headshot.png" alt="Dr. Ifije Ohiorhenuan, board-certified spine neurosurgeon" />
        </div>
        <div>
          <span className="eyebrow">About this site</span>
          <h2 className="display">Written by a board-certified spine neurosurgeon.</h2>
          <p>
            Written by Ifije Ohiorhenuan, MD, PhD, a board-certified neurosurgeon specializing in spine surgery and complex spine conditions.
          </p>
          <p>
            SpineClarity is designed to help patients understand the language of spine MRI reports before or after a clinical visit. It does not replace evaluation by a physician.
          </p>
          <div className="credentials">
            <span className="credential">Board-certified</span>
            <span className="credential">Fellowship-trained</span>
            <span className="credential">Academic spine surgeon</span>
          </div>
          <div className="optional-note">
            <span className="eyebrow">Optional service</span>
            <p>
              For readers who want a personalized written explanation of their own MRI report and symptoms, SpineClarity also offers a paid written MRI review.
            </p>
            <a className="text-link" href={REVIEW_HREF}>Learn more about the MRI review →</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ——— 6. FAQ ——— */
const FAQ = () => {
  const items = [
    { q: "Who is SpineClarity for?", a: "Patients with neck or back symptoms, patients who have just received an MRI report, and family members trying to make sense of one. The articles are written in plain language and assume no medical background." },
    { q: "Will the articles tell me what is wrong with me?", a: "No. The articles explain what terms and findings mean in general, not what they mean for your specific case. Imaging findings only have meaning in the context of an in-person history and exam." },
    { q: "Does using SpineClarity replace seeing a doctor?", a: "No. The goal is to help patients prepare for clinical conversations, not replace them. SpineClarity does not provide diagnosis or treatment." },
    { q: "Is this for emergencies?", a: "No. If you have new weakness, bowel or bladder changes, saddle numbness, fever with severe spine pain, major trauma, or rapidly worsening symptoms, seek urgent medical care." },
    { q: "When are spine symptoms urgent?", a: "Some symptoms need urgent evaluation regardless of what an MRI report says: new weakness in the legs or arms, loss of bowel or bladder control, numbness in the groin or saddle area, fever with severe spine pain, recent major trauma, or rapidly worsening neurologic symptoms. If you have any of these, seek emergency care." },
    { q: "Do you offer a paid service?", a: "Yes. SpineClarity offers an optional written MRI review for patients who want a personalized explanation of their own report." }
  ];
  return (
    <section className="block" id="faq">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Common questions</span>
          <h2 className="display">Questions readers ask first.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <details className="faq-item" key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="chev" aria-hidden />
              </summary>
              <div className="faq-body">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ——— 7. Pick a starting point ——— */
const Wayfinder = () => {
  const links = [
    { label: "I have an MRI report I don't understand", href: "/mri-terms" },
    { label: "I was told I have a specific condition", href: "/conditions" },
    { label: "I'm trying to decide between treatments", href: "/treatments" }
  ];
  return (
    <section className="block">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Keep reading</span>
          <h2 className="display">Pick a starting point.</h2>
        </div>
        <ul className="wayfinder-list">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href}>
                <span>{l.label}</span>
                <Icon name="arrow" size={14} />
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

/* ——— Footer ——— */
const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <a href="/" className="brand" style={{ marginBottom: 16, display: "inline-flex" }}>
            <span className="brand-mark" aria-hidden>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
                <path d="M12 3v18" /><path d="M8 6h8M7 10h10M7 14h10M8 18h8" />
              </svg>
            </span>
            <span>SpineClarity</span>
          </a>
          <p className="footer-disclaimer">
            SpineClarity provides educational information and written case-review support. It is not emergency care and does not replace an in-person evaluation with a licensed clinician. If you have new weakness, bowel or bladder changes, saddle numbness, fever with severe spine pain, recent major trauma, or rapidly worsening symptoms, seek urgent medical care.
          </p>
        </div>
        <div className="footer-meta">
          <a href="/articles">Articles</a>
          <a href="/conditions">Conditions</a>
          <a href="/treatments">Treatments</a>
          <a href="#about">About</a>
          <a href="#faq">FAQ</a>
          <a href={REVIEW_HREF}>MRI Review</a>
          <a href="/privacy">Privacy</a>
          <a href="/terms">Terms</a>
          <a href="/medical-disclaimer">Medical Disclaimer</a>
          <a href="/contact">Contact</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} SpineClarity</span>
        <span>EDUCATIONAL · NOT EMERGENCY CARE</span>
      </div>
    </div>
  </footer>
);

/* ——— App ——— */
const App = () => (
  <>
    <Header />
    <main>
      <Hero />
      <Library />
      <WhyMri />
      <CommonTerms />
      <HowSurgeons />
      <AboutSite />
      <FAQ />
      <Wayfinder />
    </main>
    <Footer />
  </>
);

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