/* ===== STILLWATER (Direction 4 — calm / boutique, anxiety-first) — app ===== */
const { useState, useEffect, useRef } = React;
const D = DATA;

const NAV = [
  { label: "Services", to: "/services" },
  { label: "Our Doctors", to: "/doctors" },
  { label: "Locations", to: "/locations" },
  { label: "Patients", to: "/patients" },
  { label: "Referring", to: "/referring-dentists" },
  { label: "Contact", to: "/contact" },
];

/* The signature: a waterline that breathes. Two gentle waves, out of
   phase, drifting slowly. Still water — nothing on this page hurries. */
function Waterline({ className }) {
  return (
    <svg className={"waterline breathe " + (className || "")} viewBox="0 0 1200 54" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path className="w2" d="M0 30 C 100 22, 200 38, 300 30 S 500 22, 600 30 S 800 38, 900 30 S 1100 22, 1200 30" />
      <path className="w1" d="M0 26 C 100 34, 200 18, 300 26 S 500 34, 600 26 S 800 18, 900 26 S 1100 34, 1200 26" />
    </svg>
  );
}

function Reveal({ children, delay }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { el.classList.add("in"); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.classList.add("in"); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className="reveal" style={delay ? { transitionDelay: delay } : undefined}>{children}</div>;
}

function Header({ path }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const active = (to) => path === to || (to !== "/" && path.startsWith(to));
  return (
    <header className={"hdr" + (scrolled ? " is-scrolled" : "")}><div className="wrap hdr-in">
      <a href="#/" className="brand-word" aria-label="Three Rivers Endodontics — home">Three Rivers <em>Endodontics</em></a>
      <nav className="nav" aria-label="Primary">{NAV.map((n, i) => <a key={i} href={"#" + n.to} className={active(n.to) ? "active" : ""}>{n.label}</a>)}</nav>
      <div className="hdr-cta">
        <Phone className="hdr-call"><I.phone /> {D.phone.main.label}</Phone>
        <a href="#/contact" className="btn btn-primary btn-sm"><I.calendar /> Request Appointment</a>
        <button className="hdr-ham" aria-label="Menu"><I.menu /></button>
      </div>
    </div></header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="wrap hero-in fade">
        <span className="eyebrow center" style={{ textAlign: "center" }}>Endodontic Specialists · Greater Pittsburgh</span>
        <h1 className="hero-title">A root canal, <em>without the dread.</em></h1>
        <p className="hero-lede">No one is happy to hear they need a root canal. Our specialists take the time to explain every step, answer every question, and make treatment as smooth and comfortable as possible — so you keep your natural tooth.</p>
        <div className="hero-actions">
          <a href="#/contact" className="btn btn-primary"><I.calendar /> Request an Appointment</a>
          <Phone className="btn btn-quiet"><I.phone /> {D.phone.main.label}</Phone>
        </div>
        <p className="hero-note"><b>{D.doctors.length} specialist doctors</b> · {D.locations.length} offices across Greater Pittsburgh · Most insurance accepted</p>
      </div>
      <Waterline />
    </section>
  );
}

function Promises() {
  const items = [
    { ic: <I.heart />, t: "We listen first", s: "Your doctor explains what's happening and answers every question before anything begins." },
    { ic: <I.micro />, t: "Gentle, precise care", s: "Modern anesthetics and microscope-assisted technique — most patients say it feels like a routine filling." },
    { ic: <I.tooth />, t: "Your tooth, saved", s: "Our single focus is helping you keep your natural teeth for a lifetime." },
  ];
  return (
    <section className="section"><div className="wrap">
      <div className="promises">
        {items.map((x, i) => (
          <Reveal key={i} delay={(i * 0.12) + "s"}><div className="promise">
            <span className="p-ic">{x.ic}</span>
            <h3>{x.t}</h3><p>{x.s}</p>
          </div></Reveal>
        ))}
      </div>
    </div></section>
  );
}

function Services() {
  return (
    <section className="section bg-mist"><div className="wrap">
      <Reveal><div style={{ textAlign: "center", marginBottom: 52 }}>
        <span className="eyebrow center">What We Treat</span>
        <h2 className="heading">Specialized care, <em className="soft">one focus</em> — saving your tooth</h2>
      </div></Reveal>
      <div className="svc-list">
        {D.services.map((s, i) => (
          <Reveal key={s.slug} delay={(i * 0.05) + "s"}><a href={"#/services/" + s.slug} className="svc-row">
            <div><h3>{s.title}</h3><p>{s.summary}</p></div>
            <span className="svc-go"><I.arrowUR /></span>
          </a></Reveal>
        ))}
      </div>
    </div></section>
  );
}

function Doctors() {
  return (
    <section className="section"><div className="wrap">
      <Reveal><div style={{ textAlign: "center", marginBottom: 48 }}>
        <span className="eyebrow center">Who You'll Meet</span>
        <h2 className="heading">{D.doctors.length} specialists, here to put you at ease</h2>
        <p className="lede" style={{ maxWidth: "56ch", margin: "18px auto 0" }}>Every doctor at Three Rivers Endodontics completed years of specialty training beyond dental school — and each one knows that calm, unhurried care matters as much as expertise.</p>
      </div></Reveal>
      <div className="docs-strip">
        {D.doctors.map((d, i) => (
          <Reveal key={d.slug} delay={(i * 0.04) + "s"}><a href={"#/doctors/" + d.slug} className="docface">
            <span className="df-photo"><img src={d.photo} alt={d.name} loading="lazy" /></span>
            <b>{d.name}</b><span>{d.credLine}</span>
          </a></Reveal>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 44 }}>
        <a href="#/doctors" className="btn btn-quiet">Meet all the doctors <I.arrow /></a>
      </div>
    </div></section>
  );
}

function Locations() {
  return (
    <section className="section bg-mist"><div className="wrap">
      <Reveal><div style={{ textAlign: "center", marginBottom: 52 }}>
        <span className="eyebrow center">Where We Are</span>
        <h2 className="heading">Care close to home</h2>
      </div></Reveal>
      <div className="loc-grid">
        {D.locations.map((l, i) => (
          <Reveal key={l.id} delay={(i * 0.06) + "s"}><div className="loc">
            <h3>{l.name}</h3>
            {l.statusNote && <span className="hours">{l.statusNote}</span>}
            <p className="addr">{l.addr1}<br />{l.addr2}</p>
            <p className="area">{l.area}</p>
            <OfficePhone loc={l} className="ph" icon={true} />
            <div className="loc-actions">
              <a href={"#/contact?office=" + l.id} className="btn btn-primary btn-sm">Request appt.</a>
              <a href={"#/locations/" + l.id} className="btn btn-quiet btn-sm">Details</a>
            </div>
          </div></Reveal>
        ))}
        {D.comingSoon && (
          <Reveal delay=".24s"><div className="loc loc-soon">
            <span className="hours">Coming soon</span>
            <h3>{D.comingSoon.name}</h3>
            <p className="area" style={{ marginBottom: 0 }}>{D.comingSoon.note}</p>
          </div></Reveal>
        )}
      </div>
    </div></section>
  );
}

function Testimonial() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % D.testimonials.length), 8000);
    return () => clearInterval(id);
  }, []);
  const t = D.testimonials[i];
  return (
    <section className="section"><div className="wrap">
      <div className="pull" key={i}>
        <span className="stars">{Array.from({ length: t.stars }).map((_, j) => <I.star key={j} />)}</span>
        <q>{t.quote}</q>
        <p className="by">{t.who} · {t.loc} Office</p>
      </div>
    </div></section>
  );
}

function FinalCTA() {
  return (
    <section className="cta-final">
      <Waterline />
      <div className="wrap">
        <Reveal>
          <h2>Whenever you're ready, <em style={{ fontStyle: "italic" }}>we're here.</em></h2>
          <p className="lede">Request an appointment at any of our {D.locations.length} offices, or call and talk it through with a real person first.</p>
          <div className="actions">
            <a href="#/contact" className="btn btn-white"><I.calendar /> Request an Appointment</a>
            <Phone className="btn btn-quiet"><I.phone /> {D.phone.main.label}</Phone>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer"><div className="wrap">
      <div className="footer-top">
        <div>
          <p className="footer-word">Three Rivers <em>Endodontics</em></p>
          <p className="footer-tag">Your Trusted Endodontist in Greater Pittsburgh. Saving natural teeth with gentle, specialized care across {D.locations.length} offices.</p>
          <Phone className="footer-bigcall"><I.phone /> {D.phone.main.label}</Phone>
          <div className="footer-actions">
            <a href="#/contact" className="btn btn-primary btn-sm"><I.calendar /> Request Appointment</a>
            <a href="#/referring-dentists" className="btn btn-quiet btn-sm"><I.doc /> Refer a Patient</a>
          </div>
        </div>
        <div className="footer-locs">
          {D.locations.map((l) => (
            <div key={l.id}>
              <a href={"#/locations/" + l.id} className="footer-loc-name">{l.name}</a>
              <p className="footer-loc-addr">{l.addr1}<br />{l.addr2}</p>
              <OfficePhone loc={l} className="footer-loc-phone" icon={false} />
            </div>
          ))}
        </div>
      </div>
      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} Three Rivers Endodontics. All rights reserved.</span>
        <nav className="footer-legal"><a href="#/">Accessibility</a><a href="#/">Privacy</a><a href="#/contact">Contact</a></nav>
      </div>
    </div></footer>
  );
}

function HomePage() { return (<main><Hero /><Promises /><Services /><Doctors /><Locations /><Testimonial /><FinalCTA /></main>); }

function DoctorsIndex() {
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Our Doctors</span></nav>
        <span className="eyebrow center">Meet Your Endodontist</span>
        <h1 className="display">Our doctors</h1>
        <p className="lede">Three Rivers Endodontics is home to a team of endodontic specialists, each dedicated to comfortable, expert care. Get to know the doctors who will help you keep your natural smile.</p>
      </div></section>
      <section className="section"><div className="wrap">
        <div className="doc-grid">
          {D.doctors.map((d) => (
            <a key={d.slug} href={"#/doctors/" + d.slug} className="doc-card">
              <div className="doc-photo"><img src={d.photo} alt={d.name} loading="lazy" /></div>
              <div className="doc-body"><h2 className="doc-name">{d.name}</h2>
                <span className="doc-cred">{d.role ? d.role : (d.credLine === "Endodontist" ? "Endodontist" : d.credLine + " · Endodontist")}</span>
                <span className="doc-view">View profile <I.arrow /></span></div>
            </a>
          ))}
        </div>
      </div></section>
      <section className="section bg-mist"><div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="eyebrow center">The People Behind Your Care</span>
          <h2 className="heading">Meet our team</h2>
        </div>
        <div className="team-grid">
          {D.team.map((m, i) => {
            const office = m.locationId ? D.officeById(m.locationId) : null;
            return (<div key={i} className="team">
              {m.photo ? <span className="av av-photo"><img src={m.photo} alt={m.name} loading="lazy" /></span> : <span className="av"><I.users /></span>}
              <div><b>{m.name}</b><span className="tt">{m.title}</span>
                <span className="to">{office ? office.name : "All offices"}</span></div></div>);
          })}
        </div>
      </div></section>
      <FinalCTA />
    </main>
  );
}

function DoctorPage({ slug }) {
  const d = D.doctors.find((x) => x.slug === slug);
  if (!d) return <Placeholder />;
  const locs = D.officesFor(d.locationIds);
  return (
    <main>
      <section className="docpage-hero"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><a href="#/doctors">Our Doctors</a><I.chevron /><span aria-current="page">{d.name}</span></nav>
        <div className="docpage-head">
          <div className="docpage-photo"><img src={d.photo} alt={d.name} /></div>
          <div>
            <span className="eyebrow">Meet Your Endodontist</span>
            <h1 className="display" style={{ fontSize: "clamp(38px,5vw,64px)" }}>{d.name}</h1>
            <p className="docpage-cred">{d.credLine === "Endodontist" ? "Endodontist" : d.credLine + " · Endodontist"}{d.role ? " · " + d.role : ""}</p>
            {locs.length > 0 && (<div className="docpage-chips"><span className="lbl">Practices at:</span>
              {locs.map((l) => <a key={l.id} href={"#/locations/" + l.id} className="chip"><I.pin /> {l.name}</a>)}</div>)}
            <div className="docpage-actions">
              <a href="#/contact" className="btn btn-primary"><I.calendar /> Request an Appointment</a>
              <Phone className="btn btn-quiet"><I.phone /> {D.phone.main.label}</Phone>
            </div>
          </div>
        </div>
      </div></section>
      <section className="section"><div className="wrap detail">
        <article className="detail-main">
          <h2>About {d.name.split(" ").slice(0, 2).join(" ")}</h2>
          {d.bioFull.map((p, i) => <p key={i}>{p}</p>)}
        </article>
        <aside>
          {d.education && (<div className="aside-card"><h4 className="aside-h">Education &amp; Training</h4>
            {d.education.map((e, i) => <div key={i} className="edu-item"><b>{e[0]}</b><span>{e[1]}</span></div>)}</div>)}
          {d.affiliations && (<div className="aside-card"><h4 className="aside-h">Affiliations</h4>
            <ul className="affil">{d.affiliations.map((a, i) => <li key={i}><I.check /> {a}</li>)}</ul></div>)}
          <div className="aside-card dark"><h3>Schedule with our team</h3>
            <p>Request an appointment and we'll match you with the right doctor and the most convenient office.</p>
            <a href="#/contact" className="btn btn-white btn-block"><I.calendar /> Request an Appointment</a></div>
        </aside>
      </div></section>
      <FinalCTA />
    </main>
  );
}

/* ---------- services ---------- */
function ServicesIndex() {
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Services</span></nav>
        <span className="eyebrow center">Our Services</span>
        <h1 className="display">What we treat</h1>
        <p className="lede">Everything we do has one focus — relieving your pain and saving your natural tooth. Take your time here; each page explains what to expect, in plain language.</p>
      </div></section>
      <section className="section"><div className="wrap">
        <div className="svc-list">
          {D.services.map((s, i) => (
            <Reveal key={s.slug} delay={(i * 0.05) + "s"}><a href={"#/services/" + s.slug} className="svc-row">
              <div><h3>{s.title}</h3><p>{s.summary}</p></div>
              <span className="svc-go"><I.arrowUR /></span>
            </a></Reveal>
          ))}
        </div>
      </div></section>
      <FinalCTA />
    </main>
  );
}

/* On service pages the "sidebar" content sits below the article —
   a side column would fight the centered calm of the reading measure. */
function ServiceAfterBlocks({ slug }) {
  const others = D.services.filter((x) => x.slug !== slug);
  return (
    <section className="section bg-mist"><div className="wrap">
      <div className="after-blocks">
        <div className="aside-card dark"><h3>Think you need this treatment?</h3>
          <p>Request an appointment and we'll match you with the right doctor and the most convenient office — and answer every question before anything begins.</p>
          <a href="#/contact" className="btn btn-white btn-block"><I.calendar /> Request an Appointment</a></div>
        <div className="aside-card"><h4 className="aside-h">Other services</h4>
          <ul className="affil">{others.map((o) => <li key={o.slug}><I.arrow /> <a href={"#/services/" + o.slug}>{o.title}</a></li>)}</ul></div>
        <div className="aside-card"><h4 className="aside-h">After your visit</h4>
          <p className="aside-foot" style={{ marginTop: 0, fontSize: "14.5px", color: "var(--ink-2)" }}>Post-treatment instructions, insurance, and payment options live on our <a href="#/patients">Patients page</a>.</p></div>
      </div>
    </div></section>
  );
}

function ServicePage({ slug }) {
  const s = D.services.find((x) => x.slug === slug);
  const detail = D.servicesDetail[slug];
  if (!s || !detail) return <Placeholder />;
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><a href="#/services">Services</a><I.chevron /><span aria-current="page">{s.title}</span></nav>
        <span className="eyebrow center">Our Services</span>
        <h1 className="display" style={{ fontSize: "clamp(38px,5.4vw,68px)" }}>{s.title}</h1>
        <p className="lede">{detail.intro}</p>
      </div></section>
      <section className="section"><div className="wrap">
        <article className="prose">
          {detail.sections.map((sec, i) => (
            <Reveal key={i}><div className="prose-sec">
              <h2>{sec.h}</h2>
              {sec.body && <p>{sec.body}</p>}
              {sec.bullets && <ul className="soft-checks">{sec.bullets.map((b, j) => <li key={j}><I.check /> {b}</li>)}</ul>}
              {sec.items && <div className="soft-cards">{sec.items.map((it, j) => (
                <div key={j} className="soft-card"><b>{it[0]}</b><p>{it[1]}</p></div>
              ))}</div>}
            </div></Reveal>
          ))}
        </article>
      </div></section>
      <ServiceAfterBlocks slug={slug} />
      <FinalCTA />
    </main>
  );
}

/* ---------- locations ---------- */
function LocationsIndex() {
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Locations</span></nav>
        <span className="eyebrow center">Where We Are</span>
        <h1 className="display">Care close to home</h1>
        <p className="lede">{D.locations.length} offices across Greater Pittsburgh, with a fifth on the way. Choose whichever is easiest for you — every office offers the same calm, specialized care.</p>
      </div></section>
      <section className="section"><div className="wrap">
        <Reveal><div className="loc-photo-wide"><img src={D.pgh.pointSummer} alt="Point State Park and the Pittsburgh skyline on a calm summer day" loading="lazy" /></div></Reveal>
        <div className="loc-grid">
          {D.locations.map((l, i) => (
            <Reveal key={l.id} delay={(i * 0.06) + "s"}><div className="loc">
              <h3>{l.name}</h3>
              {l.statusNote && <span className="hours">{l.statusNote}</span>}
              <p className="addr">{l.addr1}<br />{l.addr2}</p>
              <p className="area">{l.area}</p>
              <OfficePhone loc={l} className="ph" icon={true} />
              <div className="loc-actions">
                <a href={"#/contact?office=" + l.id} className="btn btn-primary btn-sm">Request appt.</a>
                <a href={"#/locations/" + l.id} className="btn btn-quiet btn-sm">Details</a>
              </div>
            </div></Reveal>
          ))}
          {D.comingSoon && (
            <Reveal delay=".24s"><div className="loc loc-soon">
              <span className="hours">Coming soon</span>
              <h3>{D.comingSoon.name}</h3>
              <p className="area" style={{ marginBottom: 0 }}>{D.comingSoon.note}</p>
            </div></Reveal>
          )}
        </div>
      </div></section>
      <FinalCTA />
    </main>
  );
}

function LocationPage({ id }) {
  const l = D.officeById(id);
  if (!l) return <Placeholder />;
  const docs = D.doctorsAt(id);
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><a href="#/locations">Locations</a><I.chevron /><span aria-current="page">{l.name}</span></nav>
        <span className="eyebrow center">Our Offices</span>
        <h1 className="display" style={{ fontSize: "clamp(38px,5.4vw,68px)" }}>{l.name}</h1>
        <p className="lede">Serving patients in {l.serving}</p>
      </div></section>
      <section className="section"><div className="wrap">
        <Reveal><div className="locpage-photo"><img src={l.photo} alt={l.name + " office"} /></div></Reveal>
        <div className="locpage-cards">
          <Reveal><div className="aside-card">
            <h4 className="aside-h">Visit us</h4>
            <p className="locpage-line"><I.pin /> <span>{l.addr1}<br />{l.addr2}</span></p>
            <p className="locpage-line"><I.phone /> <OfficePhone loc={l} icon={false} /></p>
            {l.fax && <p className="locpage-line"><I.doc /> <span>Fax: {l.fax}</span></p>}
            {l.email && <p className="locpage-line"><I.doc /> <a href={"mailto:" + l.email}>{l.email}</a></p>}
            {l.mapUrl && <a href={l.mapUrl} target="_blank" rel="noopener" className="btn btn-quiet btn-sm" style={{ marginTop: 12 }}><I.pin /> Open in Google Maps</a>}
          </div></Reveal>
          <Reveal delay=".08s"><div className="aside-card">
            <h4 className="aside-h">Office hours</h4>
            <table className="hours-table"><tbody>
              {(l.hours || []).map((h, i) => <tr key={i}><td>{h[0]}</td><td>{h[1]}</td></tr>)}
            </tbody></table>
            {l.parking && <p className="locpage-parking"><b>Parking:</b> {l.parking}</p>}
          </div></Reveal>
        </div>
      </div></section>
      {docs.length > 0 && (
        <section className="section bg-mist"><div className="wrap">
          <Reveal><div style={{ textAlign: "center", marginBottom: 48 }}>
            <span className="eyebrow center">Who You'll Meet Here</span>
            <h2 className="heading">Your doctors at {l.name}</h2>
          </div></Reveal>
          <div className="docs-strip centered">
            {docs.map((d, i) => (
              <Reveal key={d.slug} delay={(i * 0.04) + "s"}><a href={"#/doctors/" + d.slug} className="docface">
                <span className="df-photo"><img src={d.photo} alt={d.name} loading="lazy" /></span>
                <b>{d.name}</b><span>{d.credLine}</span>
              </a></Reveal>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 44 }}>
            <a href={"#/contact?office=" + l.id} className="btn btn-primary"><I.calendar /> Request an appointment here</a>
          </div>
        </div></section>
      )}
      <FinalCTA />
    </main>
  );
}

/* ---------- patients ---------- */
function PatientsPage() {
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Patients</span></nav>
        <span className="eyebrow center">Patient Information</span>
        <h1 className="display" style={{ fontSize: "clamp(38px,5.4vw,68px)" }}>Before &amp; after your visit</h1>
        <p className="lede">Insurance, payment options, forms, and what to expect after treatment — gathered in one calm place, so nothing feels like a surprise.</p>
      </div></section>
      <section className="section"><div className="wrap">
        <article className="prose">
          <Reveal><div className="prose-sec">
            <h2>Insurance</h2>
            <p>{D.insurance.body}</p>
          </div></Reveal>
          <Reveal><div className="prose-sec">
            <h2>Payment &amp; financing</h2>
            <p>{D.financial.intro}</p>
            <div className="soft-cards">
              <div className="soft-card"><b>{D.financial.cherry.title}</b>
                <ol className="fin-steps">{D.financial.cherry.steps.map((st, i) => <li key={i}>{st}</li>)}</ol></div>
              <div className="soft-card"><b>{D.financial.careCredit.title}</b><p>{D.financial.careCredit.body}</p></div>
            </div>
          </div></Reveal>
          <Reveal><div className="prose-sec">
            <h2>After your treatment</h2>
            <p>If anything feels off after your visit — or you just want to double-check something — call us. We'd rather hear from you.</p>
            {D.postOp.map((po) => (
              <details key={po.id} className="postop">
                <summary>{po.title}<I.chevron /></summary>
                <div className="postop-body">
                  {po.sections.map((sec, i) => (
                    <div key={i} className="postop-item"><b>{sec[0]}</b><p>{sec[1]}</p></div>
                  ))}
                </div>
              </details>
            ))}
          </div></Reveal>
        </article>
      </div></section>
      <section className="section bg-mist"><div className="wrap">
        <div className="after-blocks two">
          <div className="aside-card"><h4 className="aside-h">New patient forms</h4>
            <ul className="affil">{D.patientForms.map((f, i) => <li key={i}><I.doc /> {f}</li>)}</ul>
            <p className="aside-foot">Forms are available at every office and for download on our current site.</p></div>
          <div className="aside-card dark"><h3>Questions?</h3>
            <p>Call us — a real person will help you sort out insurance, financing, or anything else.</p>
            <Phone className="btn btn-white btn-block"><I.phone /> {D.phone.main.label}</Phone></div>
        </div>
      </div></section>
      <FinalCTA />
    </main>
  );
}

/* ---------- referring dentists ---------- */
function ReferringPage() {
  const steps = [
    ["Send the referral", "Use our Referral Card, or call the office most convenient for your patient."],
    ["Share records securely", "Email x-rays and patient information to our secure practice address, " + D.referring.email + "."],
    ["We take it from there", "We schedule your patient promptly and coordinate the final restoration back to your office."],
  ];
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Referring Dentists</span></nav>
        <span className="eyebrow center">For Dental Professionals</span>
        <h1 className="display" style={{ fontSize: "clamp(38px,5.4vw,68px)" }}>Referring dentists</h1>
        <p className="lede">{D.referring.blurb}</p>
      </div></section>
      <section className="section"><div className="wrap">
        <Reveal><div style={{ textAlign: "center", marginBottom: 52 }}>
          <span className="eyebrow center">Working Together</span>
          <h2 className="heading">How to refer a patient</h2>
        </div></Reveal>
        <div className="qsteps">
          {steps.map((s, i) => (
            <Reveal key={i} delay={(i * 0.08) + "s"}><div className="qstep">
              <span className="qn">{i + 1}</span>
              <div><h3>{s[0]}</h3><p>{s[1]}</p></div>
            </div></Reveal>
          ))}
        </div>
      </div></section>
      <section className="section bg-mist"><div className="wrap">
        <div className="after-blocks two">
          <div className="aside-card"><h4 className="aside-h">Referral forms</h4>
            <ul className="affil">{D.referring.forms.map((f, i) => <li key={i}><I.doc /> {f}</li>)}</ul>
            <p className="aside-foot">{D.referring.formsNote}</p></div>
          <div className="aside-card dark"><h3>Secure records email</h3>
            <p>{D.referring.email}</p>
            <Phone className="btn btn-white btn-block"><I.phone /> {D.phone.main.label}</Phone></div>
        </div>
      </div></section>
      <FinalCTA />
    </main>
  );
}

/* ---------- contact ---------- */
function ContactPage() {
  const { query } = parseHash();
  const [office, setOffice] = useState(query.office || "");
  const [sent, setSent] = useState(false);
  return (
    <main>
      <section className="pagehead"><div className="wrap">
        <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Contact</span></nav>
        <span className="eyebrow center">We're Here</span>
        <h1 className="display" style={{ fontSize: "clamp(38px,5.4vw,68px)" }}>Request an appointment</h1>
        <p className="lede">Send a request and we'll get back to you to find a time and office that works — or call and talk it through with a real person first. Either way is just fine.</p>
      </div></section>
      <section className="section"><div className="wrap contact-grid">
        <div className="contact-form">
          <span className="form-badge">Design preview — this form isn't wired up yet</span>
          {sent ? (
            <div className="form-done">
              <span className="done-ic"><I.check /></span>
              <h3>Request received <em>(preview)</em></h3>
              <p>Thank you. On the real site this will reach our scheduling team. For now, please call {D.phone.main.label} — a real person will help.</p>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="form-row">
                <label>Your name<input type="text" required placeholder="First and last name" /></label>
                <label>Phone<input type="tel" required placeholder="(412) 555-0100" /></label>
              </div>
              <div className="form-row">
                <label>Email<input type="email" placeholder="you@example.com" /></label>
                <label>Preferred office
                  <select value={office} onChange={(e) => setOffice(e.target.value)}>
                    <option value="">No preference</option>
                    {D.locations.map((l) => <option key={l.id} value={l.id}>{l.name}</option>)}
                  </select>
                </label>
              </div>
              <label>How can we help?<textarea rows="4" placeholder="Tell us briefly what's going on — there's no wrong way to say it." /></label>
              <p className="form-note">Please don't include detailed medical history here — we'll collect that securely at your visit.</p>
              <button type="submit" className="btn btn-primary btn-block"><I.calendar /> Send request</button>
            </form>
          )}
        </div>
        <div className="contact-offices">
          {D.locations.map((l) => (
            <div key={l.id} className="aside-card contact-office">
              <b className="co-name">{l.name}</b>
              <p className="locpage-line"><I.pin /> <span>{l.addr1}, {l.addr2}</span></p>
              <p className="locpage-line"><I.phone /> <OfficePhone loc={l} icon={false} /></p>
              <p className="locpage-line"><I.clock /> <span>{l.statusNote}</span></p>
            </div>
          ))}
        </div>
      </div></section>
      <FinalCTA />
    </main>
  );
}

function Placeholder() {
  return (<main><section className="section" style={{ minHeight: "52vh", display: "grid", placeItems: "center", textAlign: "center" }}>
    <div className="wrap" style={{ maxWidth: 560 }}>
      <span className="eyebrow center">Design Preview</span>
      <h1 className="display" style={{ fontSize: "clamp(30px,5vw,48px)" }}>This page isn't part of the preview</h1>
      <p className="lede" style={{ margin: "18px auto 30px" }}>Try the navigation above — Home, Services, Doctors, Locations, Patients, Referring, and Contact are all built out.</p>
      <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <a href="#/" className="btn btn-primary">Back to Home</a><a href="#/doctors" className="btn btn-quiet">Meet the Doctors</a></div>
    </div></section></main>);
}

function PreviewRibbon() {
  return (<div className="preview-ribbon"><span className="pr-name">Direction 4 — Stillwater</span>
    <span className="pr-tag">Calm &amp; boutique · designed for anxious patients</span>
    <a href="/"><I.arrow style={{ transform: "rotate(180deg)" }} /> All directions</a></div>);
}

function App() {
  const { path } = useRoute();
  const seg = path.split("/").filter(Boolean);
  let page;
  if (path === "/" || path === "") page = <HomePage />;
  else if (seg[0] === "doctors") page = seg[1] ? <DoctorPage slug={seg[1]} /> : <DoctorsIndex />;
  else if (seg[0] === "services") page = seg[1] ? <ServicePage slug={seg[1]} /> : <ServicesIndex />;
  else if (seg[0] === "locations") page = seg[1] ? <LocationPage id={seg[1]} /> : <LocationsIndex />;
  else if (seg[0] === "patients") page = <PatientsPage />;
  else if (seg[0] === "referring-dentists") page = <ReferringPage />;
  else if (seg[0] === "contact") page = <ContactPage />;
  else page = <Placeholder />;
  return (<React.Fragment><Header path={path} /><div key={path}>{page}</div><Footer /><PreviewRibbon /></React.Fragment>);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);