// Biolite — Treatments listing + detail screens

function TreatmentsScreen({ route, setRoute, openBooking }) {
  const [filterArea, setFilterArea] = useState(route.area || "all");

  useEffect(() => {
    if (route.area && route.area !== filterArea) setFilterArea(route.area);
  }, [route.area]);

  const filtered = filterArea === "all"
    ? TREATMENTS
    : TREATMENTS.filter(t => t.area === filterArea);

  const currentArea = TREATMENT_AREAS.find(a => a.id === filterArea);

  return (
    <div>
      {/* HEADER */}
      <section className="section-sm" style={{ paddingTop: 80, paddingBottom: 0 }}>
        <div className="wide">
          <div className="eyebrow">— Treatments · 70+ across six areas</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1100 }}>
            <em>Treatment journeys,</em><br/>
            written by clinicians.
          </h1>
          <p className="lede" style={{ marginTop: 28, maxWidth: 720 }}>
            Every treatment page is structured the same way — what it is, who's a candidate, how it goes, what recovery looks like, and an honest FAQ. No prices on the web; pricing is by consultation.
          </p>
        </div>
      </section>

      {/* FILTER */}
      <section className="section-sm">
        <div className="wide">
          <div className="chips" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "18px 0", gap: 8 }}>
            <button className={"chip " + (filterArea === "all" ? "active" : "")} onClick={() => setFilterArea("all")}>All · {TREATMENTS.length}</button>
            {TREATMENT_AREAS.map(a => (
              <button key={a.id} className={"chip " + (filterArea === a.id ? "active" : "")} onClick={() => setFilterArea(a.id)}>
                {a.name}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* AREA HERO */}
      {currentArea && (
        <section className="section-sm">
          <div className="wide">
            <div className="row row-12" style={{ gap: 40, alignItems: "stretch" }}>
              <div className="col-span-5">
                <div className="eyebrow" style={{ color: "var(--gold-deep)" }}>— Area {currentArea.num}</div>
                <h2 className="h1" style={{ marginTop: 14 }}>{currentArea.name}</h2>
                <p className="lede" style={{ marginTop: 16, maxWidth: 500 }}>{currentArea.blurb}</p>
                <div className="note" style={{ marginTop: 24 }}>
                  <span className="mono">Compliance</span>
                  Every treatment in this area is DHA-compliant. We don't make guaranteed-results claims; device claims (FDA / CE) are attributed and verifiable.
                </div>
              </div>
              <div className="col-span-7">
                <div style={{ aspectRatio: "16/9", overflow: "hidden", border: "1px solid var(--line)" }}>
                  <img src={currentArea.image} alt={currentArea.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* TREATMENT LIST */}
      <section className="section-sm">
        <div className="wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
            <h3 className="h2"><em>{filtered.length}</em> {filtered.length === 1 ? "treatment" : "treatments"}</h3>
            <div className="micro">Click a row → treatment journey</div>
          </div>
          <div>
            {filtered.map((t, i) => (
              <div key={t.id} className="t-row" onClick={() => setRoute({ page: "treatment", id: t.id })}>
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div className="name">{t.name}</div>
                <div className="tags">{t.tags}</div>
                <div className="meta">Recovery · {t.recovery}</div>
                <div className="arrow">→</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wide" style={{ textAlign: "center" }}>
          <h2 className="h1">Not sure which is <em>right for you?</em></h2>
          <p className="lede" style={{ marginTop: 18, maxWidth: 560, marginLeft: "auto", marginRight: "auto" }}>
            Tell us what you're considering and we'll recommend the lightest, most appropriate pathway.
          </p>
          <div style={{ marginTop: 28 }}>
            <button className="btn btn-lg" onClick={openBooking}>Book a consultation</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function TreatmentDetailScreen({ route, setRoute, openBooking, setBookingTreatment }) {
  const t = TREATMENTS.find(x => x.id === route.id);
  const [tab, setTab] = useState("what");
  if (!t) return <div className="section"><div className="wide">Treatment not found. <button className="btn-gold" onClick={() => setRoute({ page: "treatments" })}>Back to treatments</button></div></div>;

  const area = TREATMENT_AREAS.find(a => a.id === t.area);

  return (
    <div>
      <section style={{ background: "var(--paper-2)", paddingTop: 32 }}>
        <div className="wide">
          <div className="micro" style={{ marginBottom: 8 }}>
            <span style={{ cursor: "pointer" }} onClick={() => setRoute({ page: "treatments" })}>Treatments</span>
            {" / "}
            <span style={{ cursor: "pointer" }} onClick={() => setRoute({ page: "treatments", area: area.id })}>{area.name}</span>
            {" / "}
            <span style={{ color: "var(--ink)" }}>{t.name}</span>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--paper-2)", paddingBottom: 80 }}>
        <div className="wide">
          <div className="row row-12" style={{ gap: 48, alignItems: "stretch" }}>
            <div className="col-span-6" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: 32 }}>
              <div>
                <div className="eyebrow">— {area.name} · Treatment</div>
                <h1 className="h-display" style={{ marginTop: 20, fontSize: "clamp(40px, 5.5vw, 80px)" }}>{t.name}</h1>
                <p className="lede" style={{ marginTop: 24, maxWidth: 540 }}>
                  A clinician-led consultation, written as a journey: what we'll discuss, who's a candidate, how the treatment runs, recovery to expect, and answers we hear most.
                </p>
              </div>
              <div style={{ marginTop: 40, display: "flex", gap: 16, flexWrap: "wrap" }}>
                <button className="btn btn-lg" onClick={() => { setBookingTreatment(t); openBooking(); }}>Book this consultation</button>
                <button className="btn btn-ghost" onClick={() => setRoute({ page: "doctors" })}>View specialists →</button>
              </div>
            </div>
            <div className="col-span-6">
              <div style={{ aspectRatio: "4/5", overflow: "hidden", border: "1px solid var(--line)" }}>
                <img src={t.image} alt={t.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* JOURNEY */}
      <section className="section-sm">
        <div className="wide">
          <div className="eyebrow" style={{ marginBottom: 18 }}>— The journey</div>
          <div className="journey">
            {[
              { n: "01", name: "Consultation", body: "Goals, candidacy, medical history reviewed in clinic. ~45 min." },
              { n: "02", name: "Plan", body: "Written plan, alternatives, recovery and what success looks like." },
              { n: "03", name: "Treatment", body: `Performed by a DHA-licensed practitioner. ${t.tags}.` },
              { n: "04", name: "Recovery", body: `Expect ${t.recovery}. Follow-up scheduled at booking.` },
              { n: "05", name: "Review", body: "Outcome review and onward care planning if needed." },
            ].map(s => (
              <div key={s.n}>
                <div className="step-num">{s.n}</div>
                <div className="step-name">{s.name}</div>
                <div className="small">{s.body}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TABS */}
      <section className="section">
        <div className="wide">
          <div className="row row-12" style={{ gap: 48 }}>
            <div className="col-span-4">
              <div className="serif" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing: "-0.01em" }}>The page, in five readings.</div>
              <p className="small" style={{ marginTop: 18, color: "var(--ink-2)" }}>
                Every treatment page on Biolite is written the same way. We don't quote prices online; we don't show before/after without consent; we don't claim what isn't compliant.
              </p>
              <div className="note" style={{ marginTop: 24 }}>
                <span className="mono">Doctor-led</span>
                Treatment carried out under DHA-licensed practitioner supervision.
              </div>
            </div>
            <div className="col-span-8">
              <div className="tabs">
                {[
                  ["what", "What it is"],
                  ["candidacy", "Candidacy"],
                  ["process", "Process"],
                  ["recovery", "Recovery"],
                  ["faq", "FAQ"],
                ].map(([id, label]) => (
                  <button key={id} className={"tab " + (tab === id ? "active" : "")} onClick={() => setTab(id)}>{label}</button>
                ))}
              </div>
              <div style={{ padding: "32px 0", minHeight: 280 }}>
                {tab === "what" && (
                  <div className="body fadein" style={{ maxWidth: 680 }}>
                    <p className="lede"><strong>{t.name}</strong> — {t.tags}. A clinician-supervised treatment, planned to your goals and skin or anatomical baseline.</p>
                    <p>The page you'd see in the live build expands on technology, mechanism, evidence base and clinical positioning. Device claims (FDA/CE) are attributed only where the clinic can produce verification.</p>
                    <p>Where the treatment touches longevity or regenerative modalities, we present outcomes factually and avoid disease-cure language.</p>
                  </div>
                )}
                {tab === "candidacy" && (
                  <div className="body fadein" style={{ maxWidth: 680 }}>
                    <p>Candidacy is established in consultation. We consider goals, medical history, prior treatments and whether {t.name.toLowerCase()} is the lightest, most appropriate pathway.</p>
                    <p>Conditions, age and concurrent medications can affect candidacy. We are transparent when a different modality, or no treatment, is the better answer.</p>
                  </div>
                )}
                {tab === "process" && (
                  <div className="body fadein" style={{ maxWidth: 680 }}>
                    <p>The treatment is performed by a DHA-licensed practitioner. A typical session covers preparation, the treatment itself, and immediate aftercare instructions.</p>
                    <p>You'll be given written aftercare and a coordinator's direct line for any questions in the days that follow.</p>
                  </div>
                )}
                {tab === "recovery" && (
                  <div className="body fadein" style={{ maxWidth: 680 }}>
                    <p>Expect <strong>{t.recovery}</strong>. Most patients return to work and social commitments within this window; specific instructions are provided in clinic.</p>
                    <p>We schedule a follow-up at the time of booking and offer post-recovery support modalities (lymphatic, supervised infusion) where clinically appropriate.</p>
                  </div>
                )}
                {tab === "faq" && (
                  <div className="fadein" style={{ maxWidth: 680 }}>
                    {FAQ.slice(0, 4).map(f => <FAQItem key={f.q} q={f.q} a={f.a} />)}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RELATED */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wide">
          <SecHead roman="V." title={`Other treatments in <em>${area.name}</em>`} meta="Related" />
          <div className="row row-3" style={{ gap: 24 }}>
            {TREATMENTS.filter(x => x.area === t.area && x.id !== t.id).slice(0, 3).map(rt => (
              <div key={rt.id} className="tarea" onClick={() => { setRoute({ page: "treatment", id: rt.id }); setTab("what"); window.scrollTo(0, 0); }}>
                <div className="tarea-img" style={{ aspectRatio: "5/4" }}>
                  <img src={rt.image} alt={rt.name} />
                  <div className="tarea-name">{rt.name}</div>
                </div>
                <div className="tarea-body">
                  <div className="micro">{rt.tags}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ background: "var(--ink)", color: "var(--paper)" }}>
        <div className="wide" style={{ textAlign: "center" }}>
          <BrandMark size={56} />
          <h2 className="h1" style={{ color: "var(--paper)", marginTop: 24 }}>
            Begin with a <em style={{ color: "var(--gold-2)" }}>consultation</em>.
          </h2>
          <p className="lede" style={{ color: "rgba(250,247,241,0.8)", marginTop: 18, maxWidth: 520, marginLeft: "auto", marginRight: "auto" }}>
            A 45-minute clinician conversation. No commitment. No price quoted online.
          </p>
          <div style={{ marginTop: 32 }}>
            <button className="btn btn-light btn-lg" onClick={() => { setBookingTreatment(t); openBooking(); }}>
              Book {t.name} consultation
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

function FAQItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="faq-item" onClick={() => setOpen(!open)}>
      <div className="faq-q">
        <span>{q}</span>
        <span className="faq-toggle">{open ? "–" : "+"}</span>
      </div>
      {open && <div className="faq-a fadein">{a}</div>}
    </div>
  );
}

Object.assign(window, { TreatmentsScreen, TreatmentDetailScreen, FAQItem });