// Dentists index + bio

function DSCDentistsIndex({ navigate }) {
  const d = window.DSC_DATA;
  return (
    <div className="dsc-page" data-screen-label="04 Dentists">
      <section className="dsc-page-header">
        <div className="dsc-container">
          <div className="dsc-page-eyebrow" style={{marginBottom: "1.5rem"}}>
            <span className="dsc-eyebrow">Our dentists</span>
            <span className="dsc-mono" style={{color: "var(--ink-mute)"}}>13 dentists · multilingual · DHA-regulated</span>
          </div>
          <h1 className="dsc-h1" style={{maxWidth: "16ch", textWrap: "balance"}}>
            Meet the people who will <em>actually treat you.</em>
          </h1>
          <p className="dsc-lede" style={{marginTop: "1.75rem"}}>
            We publish credentials we can verify, and clearly mark ones we cannot. We do not publish DHA license numbers we have not been given. You should always be able to look up your dentist before you sit in the chair.
          </p>
        </div>
      </section>

      <section className="dsc-section">
        <div className="dsc-container">
          <div className="dsc-dent-grid">
            {d.dentists.map((doc) => (
              <DSCDentistCard key={doc.slug} d={doc}
                onClick={(e) => { e.preventDefault(); navigate("dentists", { slug: doc.slug }); }} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

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

  const treatments = (doc.treatments || []).map((s) => d.treatments.find((t) => t.slug === s)).filter(Boolean);

  // Find reviews that name the dentist (fuzzy by surname)
  const surname = doc.name.replace(/^Dr\.?\s+/i, "").split(" ").pop().toLowerCase();
  const relatedReviews = d.reviews.filter((r) => r.quote.toLowerCase().includes(surname));

  return (
    <div className="dsc-page" data-screen-label={`05 Bio · ${doc.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="#/dentists" onClick={(e) => { e.preventDefault(); navigate("dentists"); }}>Dentists</a>
            <span style={{margin: "0 0.5rem"}}>/</span>
            <span style={{color: "var(--ink)"}}>{doc.name}</span>
          </div>

          <div className="dsc-bio-grid">
            <div>
              <div className="dsc-bio-photo">
                <img src={doc.photo} alt={doc.name} />
              </div>
              <div style={{marginTop: "1.25rem", display: "flex", gap: "0.5rem", flexWrap: "wrap"}}>
                {(doc.languages || []).map((l) => (
                  <span key={l} className="dsc-chip"><span className="dsc-chip-dot"></span>{l}</span>
                ))}
              </div>
            </div>

            <div>
              <div className="dsc-eyebrow" style={{marginBottom: "0.75rem"}}>{doc.role}</div>
              <h1 className="dsc-h1" style={{fontSize: "clamp(2.5rem, 5vw, 4.5rem)", lineHeight: "1.02", textWrap: "balance"}}>{doc.name}.</h1>

              {doc.verified ? (
                <>
                  <h3 className="dsc-eyebrow" style={{marginTop: "2.5rem", marginBottom: "0.5rem"}}>Credentials</h3>
                  <ul className="dsc-cred-list">
                    {(doc.credentials || []).map((c, i) => <li key={i}>{c}</li>)}
                  </ul>
                </>
              ) : (
                <div style={{marginTop: "2.5rem", padding: "1.25rem", border: "1px dashed var(--rule)", borderRadius: 2}}>
                  <p style={{color: "var(--ink-soft)", margin: 0, fontSize: "0.95rem"}}>
                    Detailed credentials are pending verification with the dentist before publication. We do not publish what we cannot verify.
                  </p>
                </div>
              )}

              <p className="dsc-flag" style={{marginTop: "1.5rem"}}>
                DHA registration number to be confirmed with the clinic. Schema.org <span className="dsc-mono">Physician</span> markup will reference only verified credentials.
              </p>

              <div style={{marginTop: "2.5rem", display: "flex", gap: "0.75rem", flexWrap: "wrap"}}>
                <a className="dsc-btn dsc-btn-primary" href="#/book"
                   onClick={(e) => { e.preventDefault(); navigate("book", { dentist: doc.slug }); }}>
                  Book with {doc.name.split(" ").slice(0, 2).join(" ")} →
                </a>
                <a className="dsc-btn dsc-btn-ghost" href={d.clinic.whatsapp} target="_blank" rel="noreferrer">
                  WhatsApp the clinic
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {treatments.length > 0 && (
        <section className="dsc-section">
          <div className="dsc-container">
            <DSCSectionHead
              eyebrow={`Treatments by ${doc.name.split(" ").slice(0,2).join(" ")}`}
              title={<>What they actually do.</>}
            />
            <div className="dsc-treat-list">
              {treatments.map((t) => (
                <DSCTreatmentCard key={t.slug} t={t}
                  onClick={(e) => { e.preventDefault(); navigate("treatments", { slug: t.slug }); }} />
              ))}
            </div>
          </div>
        </section>
      )}

      {relatedReviews.length > 0 && (
        <section className="dsc-section dsc-section--surface">
          <div className="dsc-container">
            <DSCSectionHead
              eyebrow="What patients have said"
              title={<>Reviews mentioning <em>this dentist.</em></>}
            />
            <div className="dsc-rev-list">
              {relatedReviews.map((r, i) => (
                <div key={i} className="dsc-rev-card">
                  <p className="dsc-rev-quote">&ldquo;{r.quote}&rdquo;</p>
                  <div className="dsc-rev-meta">
                    <span>{r.attribution} · {r.treatment}</span>
                    <span className="dsc-mono">{r.date} · {r.platform}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

window.DSCDentistsIndex = DSCDentistsIndex;
window.DSCDentistBio = DSCDentistBio;