// Treatments index + treatment detail page

function DSCTreatmentsIndex({ navigate }) {
  const d = window.DSC_DATA;
  const [filter, setFilter] = useState("All");
  const categories = ["All", ...Array.from(new Set(d.treatments.map((t) => t.category)))];
  const visible = filter === "All" ? d.treatments : d.treatments.filter((t) => t.category === filter);

  return (
    <div className="dsc-page" data-screen-label="02 Treatments">
      <section className="dsc-page-header">
        <div className="dsc-container">
          <div className="dsc-page-eyebrow" style={{marginBottom: "1.5rem"}}>
            <span className="dsc-eyebrow">Our treatments</span>
            <span className="dsc-mono" style={{color: "var(--ink-mute)"}}>12 disciplines · 107 areas of expertise</span>
          </div>
          <h1 className="dsc-h1" style={{maxWidth: "16ch", textWrap: "balance"}}>
            From a routine clean<br/>to a full <em>smile makeover.</em>
          </h1>
          <p className="dsc-lede" style={{marginTop: "1.75rem"}}>
            Every page below leads to the dentist who performs that work, the technology behind it, and how to book a consultation. No invented prices — we give a written quote in clinic.
          </p>
        </div>
      </section>

      <section className="dsc-section" style={{paddingTop: "2.5rem"}}>
        <div className="dsc-container">
          <div style={{display: "flex", gap: "0.5rem", flexWrap: "wrap", marginBottom: "2.5rem"}}>
            {categories.map((c) => (
              <button key={c}
                      onClick={() => setFilter(c)}
                      className="dsc-btn"
                      style={{
                        background: filter === c ? "var(--ink)" : "transparent",
                        color: filter === c ? "var(--bg)" : "var(--ink-soft)",
                        borderColor: filter === c ? "var(--ink)" : "var(--rule)",
                        fontSize: "0.84rem",
                        padding: "0.55rem 1rem",
                      }}>
                {c} <span style={{opacity: 0.6, marginLeft: 4}}>{c === "All" ? d.treatments.length : d.treatments.filter((t) => t.category === c).length}</span>
              </button>
            ))}
          </div>
          <div className="dsc-treat-list">
            {visible.map((t) => (
              <DSCTreatmentCard key={t.slug} t={t}
                onClick={(e) => { e.preventDefault(); navigate("treatments", { slug: t.slug }); }} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- Implants detail page (representative) ---------------- */

function DSCTreatmentDetail({ navigate, slug }) {
  const d = window.DSC_DATA;
  const t = d.treatments.find((x) => x.slug === slug);
  if (!t) {
    return (
      <div className="dsc-container dsc-section">
        <h1 className="dsc-h2">Treatment not found.</h1>
        <a className="dsc-btn-link" href="#/treatments" onClick={(e) => { e.preventDefault(); navigate("treatments"); }}>Back to all treatments</a>
      </div>
    );
  }

  // The Implants page is the fully written treatment detail; other pages render a generic but complete shell using the same data.
  const isImplants = slug === "dental-implants";
  const detail = isImplants ? d.implantsPage : null;

  // Map dentists who perform this treatment
  const performers = d.dentists.filter((dd) => (dd.treatments || []).includes(slug));

  return (
    <div className="dsc-page" data-screen-label={`03 Treatment · ${t.name}`}>
      <section className="dsc-page-header">
        <div className="dsc-container">
          <div className="dsc-breadcrumb" style={{marginBottom: "1.5rem"}}>
            <a href="#/" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Home</a>
            <span style={{margin: "0 0.5rem"}}>/</span>
            <a href="#/treatments" onClick={(e) => { e.preventDefault(); navigate("treatments"); }}>Treatments</a>
            <span style={{margin: "0 0.5rem"}}>/</span>
            <span style={{color: "var(--ink)"}}>{t.name}</span>
          </div>
          <div className="dsc-page-eyebrow" style={{marginBottom: "0.5rem"}}>
            <span className="dsc-eyebrow">{t.category}</span>
          </div>
          <h1 className="dsc-h1" style={{maxWidth: "14ch", textWrap: "balance"}}>{t.name}.</h1>
          {detail && (
            <p className="dsc-lede" style={{marginTop: "1.75rem", maxWidth: "60ch"}}>{detail.lede}</p>
          )}
          {!detail && (
            <p className="dsc-lede" style={{marginTop: "1.75rem", maxWidth: "60ch"}}>{t.blurb} A full page is being prepared — meanwhile, book a consultation and we will walk you through the approach in person.</p>
          )}
          <div style={{marginTop: "2.25rem", display: "flex", gap: "0.75rem", flexWrap: "wrap"}}>
            <a className="dsc-btn dsc-btn-primary" href="#/book" onClick={(e) => { e.preventDefault(); navigate("book", { treatment: slug }); }}>
              Book a consultation →
            </a>
            <a className="dsc-btn dsc-btn-ghost" href={d.clinic.whatsapp} target="_blank" rel="noreferrer">WhatsApp the clinic</a>
          </div>
        </div>
      </section>

      {/* APPROACH (implants only — others fall back to a financing teaser) */}
      {detail && (
        <section className="dsc-section">
          <div className="dsc-container">
            <DSCSectionHead
              eyebrow="Our approach"
              title={<>Planned in software, <em>placed once.</em></>}
            />
            <div className="dsc-approach">
              {detail.approach.map((a, i) => (
                <div key={i} className="dsc-approach-cell">
                  <div className="dsc-approach-num">0{i+1} · {String(a.h).toUpperCase()}</div>
                  <div className="dsc-approach-title">{a.h}</div>
                  <div className="dsc-approach-body">{a.b}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* DENTISTS WHO PERFORM */}
      {performers.length > 0 && (
        <section className="dsc-section dsc-section--surface">
          <div className="dsc-container">
            <DSCSectionHead
              eyebrow={`Who performs ${t.name.toLowerCase()}`}
              title={<>Trained where it counts.</>}
            />
            <div className="dsc-dent-grid">
              {performers.slice(0, 4).map((doc) => (
                <DSCDentistCard key={doc.slug} d={doc}
                  onClick={(e) => { e.preventDefault(); navigate("dentists", { slug: doc.slug }); }} />
              ))}
            </div>
          </div>
        </section>
      )}

      {/* BEFORE / AFTER PLACEHOLDER */}
      <section className="dsc-section">
        <div className="dsc-container">
          <DSCSectionHead
            eyebrow="Before & after"
            title={<>Real patients, with consent.</>}
          />
          <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1rem"}}>
            {[0,1,2].map((i) => (
              <div key={i} style={{
                aspectRatio: "4/3",
                background: "var(--surface-2)",
                border: "1px dashed var(--rule)",
                borderRadius: 2,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "var(--ink-mute)",
                fontFamily: "var(--mono)",
                fontSize: "0.78rem",
                letterSpacing: "0.06em",
              }}>
                <span>before · after · placeholder</span>
              </div>
            ))}
          </div>
          <p className="dsc-flag" style={{marginTop: "1.25rem"}}>
            We do not publish before/after imagery without explicit patient consent. Client to supply consented gallery.
          </p>
        </div>
      </section>

      {/* FINANCING */}
      <section className="dsc-section dsc-section--surface">
        <div className="dsc-container-tight">
          <div className="dsc-callout">
            <div>
              <div className="dsc-eyebrow" style={{marginBottom: "1rem"}}>Cost & financing</div>
              <h2 className="dsc-h2">Quoted in clinic. <em>Never on the internet.</em></h2>
              <p className="dsc-lede" style={{marginTop: "1.5rem"}}>
                {isImplants
                  ? "Implant cases vary by bone, units, and crown specification. We give a written quote at consultation, then Tabby splits it into four."
                  : "We quote in clinic, after assessment. Tabby instalments are available on higher-ticket treatment."}
              </p>
            </div>
            <div>
              <DSCTabbyStrip />
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      {detail && (
        <section className="dsc-section">
          <div className="dsc-container-tight">
            <DSCSectionHead
              eyebrow="Questions, answered"
              title={<>Most people ask <em>this.</em></>}
            />
            <DSCFaqList items={detail.faqs} />
          </div>
        </section>
      )}

      {/* BOOKING CTA */}
      <section className="dsc-section dsc-section--ink">
        <div className="dsc-container-tight" style={{textAlign: "center"}}>
          <div className="dsc-eyebrow" style={{color: "color-mix(in oklab, var(--bg) 60%, transparent)", marginBottom: "1.25rem"}}>
            Next step
          </div>
          <h2 className="dsc-h2" style={{color: "var(--bg)", textWrap: "balance"}}>
            Book a consultation. <em style={{color: "var(--accent)"}}>That's it.</em>
          </h2>
          <p className="dsc-lede" style={{color: "color-mix(in oklab, var(--bg) 75%, transparent)", marginTop: "1.5rem", margin: "1.5rem auto 0"}}>
            45 minutes at Burjuman. A scan, a written plan, an honest quote — no commitment.
          </p>
          <div style={{marginTop: "2.25rem", display: "inline-flex", gap: "0.75rem", flexWrap: "wrap", justifyContent: "center"}}>
            <a className="dsc-btn dsc-btn-primary" href="#/book"
               onClick={(e) => { e.preventDefault(); navigate("book", { treatment: slug }); }}>
              Book a consultation →
            </a>
            <a className="dsc-btn dsc-btn-ghost" href={d.clinic.whatsapp} target="_blank" rel="noreferrer"
               style={{color: "var(--bg)", borderColor: "color-mix(in oklab, var(--bg) 40%, transparent)"}}>
              WhatsApp instead
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

function DSCFaqList({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="dsc-faq">
      {items.map((f, i) => (
        <div key={i} className={`dsc-faq-item ${open === i ? "open" : ""}`}>
          <button className="dsc-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span className="dsc-faq-q-text">{f.q}</span>
            <span className="dsc-faq-q-toggle">{open === i ? "— close" : "+ open"}</span>
          </button>
          <div className="dsc-faq-a">
            <div className="dsc-faq-a-inner">{f.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

window.DSCTreatmentsIndex = DSCTreatmentsIndex;
window.DSCTreatmentDetail = DSCTreatmentDetail;