/* ===== BEACON (Direction 5 — guided confidence) — 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" },
];

/* Counts up from 0 when scrolled into view; instant if reduced motion. */
function CountUp({ to, suffix }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setN(to); return; }
    let raf, started = false;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        started = true;
        const t0 = performance.now(), dur = 950;
        const tick = (t) => {
          const p = Math.min(1, (t - t0) / dur);
          setN(Math.round(to * (1 - Math.pow(1 - p, 3))));
          if (p < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
      }
    }, { threshold: 0.5 });
    io.observe(el);
    return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); };
  }, [to]);
  return <b ref={ref}>{n}{suffix || ""}</b>;
}

/* Fades content up the first time it scrolls into view. */
function Reveal({ children, delay, className }) {
  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 " + (className || "")} 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" aria-label="Three Rivers Endodontics — home"><img src={D.LOGO_REVERSED} alt="Three Rivers Endodontics" className="brand-logo" /></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>
        <MobileNav links={NAV} />
      </div>
    </div></header>
  );
}

function FocusMark() {
  return (
    <svg className="focus-mark" viewBox="0 0 520 520" aria-hidden="true" focusable="false">
      <circle className="focus-ring ring-one" cx="260" cy="260" r="224" />
      <circle className="focus-ring ring-two" cx="260" cy="260" r="176" />
      <circle className="focus-ring ring-three" cx="260" cy="260" r="128" />
      <path className="focus-tick" d="M260 14v52M260 454v52M14 260h52M454 260h52" />
      <path className="focus-sweep" d="M260 260 427 113" />
      <circle className="focus-dot" cx="260" cy="260" r="7" />
    </svg>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-aurora" aria-hidden="true"></div>
      <div className="wrap hero-in">
        <div className="hero-copy fade">
          <span className="hero-tag"><b>3RE</b> Endodontic specialists · Greater Pittsburgh</span>
          <h1 className="hero-title">Expert care. <span className="hl">A clear way forward.</span></h1>
          <p className="hero-lede">A root canal can feel uncertain. We make the next step clear — explaining what is happening, answering your questions, and focusing on saving 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-outline"><I.phone /> {D.phone.main.label}</Phone>
          </div>
          <a className="hero-referral" href="#/referring-dentists"><I.doc /> Referring a patient? Start here <I.arrow /></a>
          <div className="hero-meta">
            <span><I.micro /> Microscope-assisted</span>
            <span><I.card /> Most insurance accepted</span>
          </div>
        </div>
        <div className="hero-figure fade" style={{ animationDelay: ".12s" }}>
          <FocusMark />
          <div className="hero-img"><img src={D.pgh.bridgeNight} alt="The Roberto Clemente Bridge and downtown Pittsburgh at night" onError={(e) => { e.target.src = D.pgh.night; }} /></div>
          <div className="hero-stat s1">
            <span className="face-stack">{D.doctors.slice(0, 4).map((d) => <img key={d.slug} src={d.photo} alt="" />)}</span>
            <span><CountUp to={D.doctors.length} /> specialist doctors</span>
          </div>
          <div className="hero-stat s2"><I.pin /><span><b>{D.locations.length} offices</b> across Greater Pittsburgh</span></div>
        </div>
      </div>
      <div className="hero-signal" aria-hidden="true"><span></span></div>
    </section>
  );
}

function AudiencePaths() {
  const paths = [
    { n: "01", title: "I need an appointment", body: "Choose the office that works for you and tell us how to reach you.", to: "/contact", cta: "Request care" },
    { n: "02", title: "I was referred", body: "Find insurance guidance, patient forms, financing, and after-care instructions.", to: "/patients", cta: "Patient resources" },
    { n: "03", title: "I'm referring a patient", body: "Send referral information and case materials to our specialist team.", to: "/referring-dentists", cta: "Referral resources" },
  ];
  return (
    <section className="audience"><div className="wrap">
      <div className="audience-intro"><span className="kicker">Start here</span><p>Choose the path that fits you. Every next step is designed to be clear.</p></div>
      <div className="audience-grid">{paths.map((item, i) => (
        <Reveal key={item.n} delay={(i * .07) + "s"}><a href={"#" + item.to} className="audience-card">
          <span className="audience-no">{item.n}</span><div><h2>{item.title}</h2><p>{item.body}</p><span className="audience-link">{item.cta} <I.arrow /></span></div>
        </a></Reveal>
      ))}</div>
    </div></section>
  );
}

function ServiceIcon({ s }) {
  if (s.icon) return <img src={s.icon} alt="" aria-hidden="true" />;
  const map = { "cracked-teeth": <I.tooth />, "traumatic-dental-injuries": <I.shield /> };
  return map[s.slug] || <I.tooth />;
}

function Services() {
  const [feat, ...rest] = D.services;
  return (
    <section className="section"><div className="wrap">
      <Reveal><div className="sec-head">
        <span className="kicker">What We Treat</span>
        <h2 className="heading">Specialized care, one focus — saving your tooth</h2>
        <p className="lede">Endodontists perform these procedures every day. That repetition, plus modern imaging and microscopes, makes treatment precise and predictable.</p>
      </div></Reveal>
      <div className="bento">
        <a href={"#/services/" + feat.slug} className="svc feat card-hover card">
          <span className="svc-tag">Most common</span>
          <span className="svc-ic"><ServiceIcon s={feat} /></span>
          <h3>{feat.title}</h3><p>{feat.summary}</p>
          <span className="svc-link">Learn more <I.arrow /></span>
        </a>
        {rest.map((s) => (
          <a key={s.slug} href={"#/services/" + s.slug} className="svc card card-hover">
            <span className="svc-ic"><ServiceIcon s={s} /></span>
            <h3>{s.title}</h3><p>{s.summary}</p>
            <span className="svc-link">Learn more <I.arrow /></span>
          </a>
        ))}
      </div>
    </div></section>
  );
}

function Process() {
  const steps = [
    ["Schedule with ease", "Call or request online. We find a time and the office most convenient for you."],
    ["We listen first", "Your doctor reviews your situation and answers every question before we begin."],
    ["Comfortable treatment", "Modern anesthetics and microscope precision — most say it feels like a routine filling."],
    ["Back to your dentist", "We coordinate your final restoration so the tooth is fully protected."],
  ];
  return (
    <section className="section bg-fog"><div className="wrap">
      <Reveal><div className="sec-head">
        <span className="kicker">How care works</span>
        <h2 className="heading">No mystery. Just a clear path through treatment.</h2>
      </div></Reveal>
      <div className="process">
        {steps.map((s, i) => (
          <Reveal key={i} delay={(i * 0.07) + "s"}><div className="pstep"><span className="pn">{String(i + 1).padStart(2, "0")}</span>
            <h4>{s[0]}</h4><p>{s[1]}</p></div></Reveal>
        ))}
      </div>
    </div></section>
  );
}

function DoctorsRow() {
  return (
    <section className="section"><div className="wrap">
      <Reveal><div className="sec-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", maxWidth: "none", gap: 24, flexWrap: "wrap" }}>
        <div>
          <span className="kicker">Meet Your Endodontist</span>
          <h2 className="heading" style={{ marginTop: 16 }}>{D.doctors.length} specialists. One focus.</h2>
        </div>
        <a href="#/doctors" className="btn btn-outline btn-sm">All doctors <I.arrow /></a>
      </div></Reveal>
      <div className="facewall">
        {D.doctors.map((d, i) => (
          <Reveal key={d.slug} delay={(i * 0.04) + "s"}>
            <a href={"#/doctors/" + d.slug} className="face">
              <span className="face-photo"><img src={d.photo} alt={d.name} loading="lazy" /></span>
              <b>{d.name}</b>
              <span className="face-cred">{d.credLine}</span>
            </a>
          </Reveal>
        ))}
      </div>
    </div></section>
  );
}

function WhyUs() {
  return (
    <section className="section bg-fog"><div className="wrap split">
      <Reveal><div>
        <span className="kicker">Why see an endodontist</span>
        <h2 className="heading" style={{ marginTop: 16 }}>Most patients arrive with questions. We start with answers.</h2>
        <p className="lede" style={{ marginTop: 16 }}>Your well-being is our primary concern. Our goal is simple — help you keep your natural teeth, comfortably.</p>
        <div className="split-stats">
          <div className="split-stat"><CountUp to={D.doctors.length} /><span>specialists</span></div>
          <div className="split-stat"><CountUp to={D.locations.length} /><span>offices</span></div>
          <div className="split-stat"><b>1</b><span>goal: save it</span></div>
        </div>
        <a href="#/services/root-canal-therapy" className="btn btn-primary">What to expect <I.arrow /></a>
      </div></Reveal>
      <Reveal delay=".1s"><div className="split-img"><img src={D.HERO} alt="A Three Rivers Endodontics waiting room" onError={(e) => { e.target.src = D.pgh.rivers; }} /></div></Reveal>
    </div></section>
  );
}

function Pittsburgh() {
  return (
    <section className="pgh">
      <div className="pgh-bg"><img src={D.pgh.bridgeNight} alt="" loading="lazy" /></div>
      <div className="pgh-scrim"></div>
      <div className="wrap"><div className="pgh-in">
        <span className="kicker on-dark">Pittsburgh care, close to home</span>
        <h2 className="heading" style={{ marginTop: 16 }}>Specialists for every side of the city.</h2>
        <p>Four offices across Greater Pittsburgh, with a fifth opening in Harmar in Fall 2026.</p>
      </div></div>
    </section>
  );
}

function Locations() {
  return (
    <section className="section bg-fog"><div className="wrap">
      <Reveal><div className="sec-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", maxWidth: "none", gap: 24, flexWrap: "wrap" }}>
        <div><span className="kicker">Our Offices</span><h2 className="heading" style={{ marginTop: 16 }}>{D.locations.length} convenient locations</h2></div>
        <a href="#/locations" className="btn btn-outline btn-sm">All locations <I.arrow /></a>
      </div></Reveal>
      <div className="loc-grid">
        {D.locations.map((l, i) => (
          <Reveal key={l.id} delay={(i * 0.05) + "s"}><div className="loc card card-hover">
            <a href={"#/locations/" + l.id} className="loc-photo"><img src={l.photo} alt={l.name + " office"} loading="lazy" /><span>{l.statusNote}</span></a>
            <div className="loc-body">
              <div className="loc-top"><span className="loc-ic"><I.pin /></span><span className="loc-badge">{l.area}</span></div>
              <h3>{l.name}</h3>
              <p className="addr">{l.addr1}<br />{l.addr2}</p>
              <OfficePhone loc={l} className="ph" icon={true} />
              <div className="loc-actions">
                <a href={"#/locations/" + l.id} className="btn btn-sage btn-sm">Office details</a>
                <a href={"#/contact?office=" + l.id} className="btn btn-outline btn-sm">Request appt.</a>
              </div>
            </div>
          </div></Reveal>
        ))}
        {D.comingSoon && (
          <Reveal delay=".2s"><div className="loc loc-soon card">
            <div className="loc-top"><span className="loc-ic"><I.sparkle /></span><span className="loc-badge">Coming soon</span></div>
            <h3>{D.comingSoon.name}</h3>
            <p className="area">{D.comingSoon.note}</p>
          </div></Reveal>
        )}
      </div>
    </div></section>
  );
}

function ReferringFastTrack() {
  return (
    <section className="pro-track"><div className="wrap pro-track-in">
      <div><span className="kicker on-dark">For referring dentists</span><h2 className="heading">A direct handoff to the specialist team.</h2></div>
      <div><p>{D.referring.blurb}</p><div className="pro-actions">
        <a href="#/referring-dentists" className="btn btn-white"><I.doc /> Referral resources</a>
        <a href={"mailto:" + D.referring.email} className="btn btn-ghost"><I.arrow /> {D.referring.email}</a>
      </div></div>
    </div></section>
  );
}

function Testimonials() {
  return (
    <section className="section"><div className="wrap">
      <Reveal><div className="sec-head center"><span className="kicker center">What Patients Say</span>
        <h2 className="heading" style={{ marginTop: 16 }}>Real relief, from people who were nervous too</h2></div></Reveal>
      <div className="tst-grid">
        {D.testimonials.map((t, i) => (
          <Reveal key={i} delay={(i * 0.06) + "s"}><figure className="tst card" style={{ margin: 0 }}>
            <span className="stars">{Array.from({ length: t.stars }).map((_, j) => <I.star key={j} />)}</span>
            <q>{t.quote}</q>
            <figcaption className="by"><span className="av">{t.loc[0]}</span><span><b>{t.who}</b><span>{t.loc} Office</span></span></figcaption>
          </figure></Reveal>
        ))}
      </div>
    </div></section>
  );
}

function CTA() {
  return (
    <section className="section" style={{ paddingTop: 0 }}><div className="wrap"><div className="cta">
      <div><span className="kicker on-dark">Schedule a Consultation</span>
        <h2 className="heading" style={{ marginTop: 14 }}>Ready when you are. Book at any office today.</h2></div>
      <div className="cta-actions">
        <a href="#/contact" className="btn btn-white"><I.calendar /> Request an Appointment</a>
        <Phone className="btn btn-ghost"><I.phone /> {D.phone.main.label}</Phone>
      </div>
    </div></div></section>
  );
}

function Footer() {
  return (
    <footer className="footer"><div className="wrap">
      <div className="footer-top">
        <div>
          <img src={D.LOGO_REVERSED} alt="Three Rivers Endodontics" className="footer-logo" />
          <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-sage btn-sm"><I.calendar /> Request Appointment</a>
            <a href="#/referring-dentists" className="btn btn-ghost 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 /><AudiencePaths /><Services /><Process /><DoctorsRow /><WhyUs /><Pittsburgh /><Locations /><ReferringFastTrack /><CTA /></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="kicker">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 card-hover">
              <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-fog"><div className="wrap">
        <div className="sec-head center"><span className="kicker center">The People Behind Your Care</span>
          <h2 className="heading" style={{ marginTop: 16 }}>Meet our team</h2>
          <p className="lede">From your first phone call to your follow-up, our friendly team makes every visit smooth and stress-free.</p></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 card">
              {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 ? <I.pin /> : <I.users />} {office ? office.name : "All offices"}</span></div></div>);
          })}
        </div>
      </div></section>
      <CTA />
    </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="kicker">Meet Your Endodontist</span>
            <h1 className="display" style={{ marginTop: 10 }}>{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-outline"><I.phone /> {D.phone.main.label}</Phone>
            </div>
          </div>
        </div>
      </div></section>
      <section className="section"><div className="wrap detail">
        <article className="detail-main">
          <h2 className="heading">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 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 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 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>
      <CTA />
    </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="kicker">Comprehensive Endodontic Services</span>
        <h1 className="display">What we treat</h1>
        <p className="lede">Three Rivers Endodontics provides endodontic treatments to patients across the Greater Pittsburgh area. Endodontists perform these procedures every day — that repetition, plus modern imaging and microscopes, makes treatment precise and predictable.</p>
      </div></section>
      <section className="section"><div className="wrap">
        <div className="bento">
          {D.services.map((s, i) => (
            <a key={s.slug} href={"#/services/" + s.slug} className={"svc card card-hover" + (i === 0 ? " feat" : "")}>
              {i === 0 && <span className="svc-tag">Most common</span>}
              <span className="svc-ic"><ServiceIcon s={s} /></span>
              <h3>{s.title}</h3><p>{s.summary}</p>
              <span className="svc-link">Learn more <I.arrow /></span>
            </a>
          ))}
        </div>
      </div></section>
      <CTA />
    </main>
  );
}

function ServicePage({ slug }) {
  const s = D.services.find((x) => x.slug === slug);
  const detail = D.servicesDetail[slug];
  if (!s || !detail) return <Placeholder />;
  const others = D.services.filter((x) => x.slug !== slug);
  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="kicker">Our Services</span>
        <h1 className="display">{s.title}</h1>
        <p className="lede">{detail.intro}</p>
      </div></section>
      <section className="section"><div className="wrap detail">
        <article className="detail-main">
          {detail.sections.map((sec, i) => (
            <div key={i} className="svc-sec">
              <h2 className="heading" style={{ fontSize: "clamp(24px,3vw,34px)", marginBottom: 14 }}>{sec.h}</h2>
              {sec.body && <p>{sec.body}</p>}
              {sec.bullets && <ul className="svc-bullets">{sec.bullets.map((b, j) => <li key={j}><I.check /> {b}</li>)}</ul>}
              {sec.items && <div className="svc-items">{sec.items.map((it, j) => (
                <div key={j} className="svc-item card"><b>{it[0]}</b><p>{it[1]}</p></div>
              ))}</div>}
            </div>
          ))}
        </article>
        <aside>
          <div className="aside-card 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.</p>
            <a href="#/contact" className="btn btn-white btn-block"><I.calendar /> Request an Appointment</a></div>
          <div className="aside-card 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 card"><h4 className="aside-h">After your visit</h4>
            <p style={{ fontSize: 14.5, color: "var(--ink-2)" }}>Post-treatment instructions live on our <a href="#/patients">Patients page</a>.</p></div>
        </aside>
      </div></section>
      <CTA />
    </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="kicker">Our Offices</span>
        <h1 className="display">{D.locations.length} offices across Greater Pittsburgh</h1>
        <p className="lede">Care close to home — from the airport corridor to the East End, Zelienople to the South Hills. A fifth office opens in Harmar in Fall 2026.</p>
      </div></section>
      <section className="section"><div className="wrap">
        <div className="loc-grid">
          {D.locations.map((l) => (
            <div key={l.id} className="loc card card-hover">
              <div className="loc-top"><span className="loc-ic"><I.pin /></span>{l.statusNote && <span className="loc-badge">{l.statusNote}</span>}</div>
              <h3>{l.name}</h3>
              <p className="addr">{l.addr1}, {l.addr2}</p>
              <p className="area">{l.area}</p>
              <OfficePhone loc={l} className="ph" icon={true} />
              <div className="loc-actions">
                <a href={"#/locations/" + l.id} className="btn btn-sage btn-sm">Details</a>
                <a href={"#/contact?office=" + l.id} className="btn btn-outline btn-sm">Request appt.</a>
              </div>
            </div>
          ))}
          {D.comingSoon && (
            <div className="loc loc-soon card">
              <div className="loc-top"><span className="loc-ic"><I.sparkle /></span><span className="loc-badge">Coming soon</span></div>
              <h3>{D.comingSoon.name}</h3>
              <p className="area">{D.comingSoon.note}</p>
            </div>
          )}
        </div>
      </div></section>
      <CTA />
    </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="kicker">Our Offices</span>
        <h1 className="display">{l.name}</h1>
        <p className="lede">Serving patients in {l.serving}</p>
      </div></section>
      <section className="section"><div className="wrap locpage">
        <div className="locpage-photo card"><img src={l.photo} alt={l.name + " office"} onError={(e) => { e.target.src = D.HERO; }} /></div>
        <div className="locpage-info">
          <div className="aside-card card">
            <h4 className="aside-h">Contact</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-outline btn-sm" style={{ marginTop: 10 }}><I.pin /> Open in Google Maps</a>}
          </div>
          <div className="aside-card 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 style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 14 }}><b>Parking:</b> {l.parking}</p>}
          </div>
        </div>
      </div></section>
      {docs.length > 0 && (
        <section className="section bg-fog"><div className="wrap">
          <div className="sec-head"><span className="kicker">Your Doctors Here</span>
            <h2 className="heading">{docs.length} specialists at {l.name}</h2></div>
          <div className="facewall">
            {docs.map((d) => (
              <a key={d.slug} href={"#/doctors/" + d.slug} className="face">
                <span className="face-photo"><img src={d.photo} alt={d.name} loading="lazy" /></span>
                <b>{d.name}</b>
                <span className="face-cred">{d.credLine}</span>
              </a>
            ))}
          </div>
        </div></section>
      )}
      <CTA />
    </main>
  );
}

/* ---------- referring dentists ---------- */
function ReferringPage() {
  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="kicker">For Dental Professionals</span>
        <h1 className="display">Referring dentists</h1>
        <p className="lede">{D.referring.blurb}</p>
      </div></section>
      <section className="section"><div className="wrap detail">
        <article className="detail-main">
          <h2 className="heading" style={{ fontSize: "clamp(24px,3vw,34px)", marginBottom: 14 }}>How to refer a patient</h2>
          <div className="process" style={{ gridTemplateColumns: "1fr", gap: 18 }}>
            {[
              ["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 the patient promptly and coordinate the final restoration back to your office."],
            ].map((s, i) => (
              <div key={i} className="pstep" style={{ padding: 0, borderLeft: 0 }}><span className="pn">{String(i + 1).padStart(2, "0")}</span>
                <h4>{s[0]}</h4><p>{s[1]}</p></div>
            ))}
          </div>
        </article>
        <aside>
          <div className="aside-card 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 style={{ fontSize: 13.5, color: "var(--muted)", marginTop: 12 }}>{D.referring.formsNote}</p></div>
          <div className="aside-card 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>
        </aside>
      </div></section>
      <CTA />
    </main>
  );
}

/* ---------- patients (insurance / financing / forms / post-op) ---------- */
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="kicker">Patient Information</span>
        <h1 className="display">Before &amp; after your visit</h1>
        <p className="lede">Insurance, payment options, new-patient forms, and what to expect after treatment — all in one place.</p>
      </div></section>
      <section className="section"><div className="wrap detail">
        <article className="detail-main">
          <div className="svc-sec">
            <h2 className="heading" style={{ fontSize: "clamp(24px,3vw,34px)", marginBottom: 14 }}>Insurance</h2>
            <p>{D.insurance.body}</p>
          </div>
          <div className="svc-sec">
            <h2 className="heading" style={{ fontSize: "clamp(24px,3vw,34px)", marginBottom: 14 }}>Payment &amp; financing</h2>
            <p>{D.financial.intro}</p>
            <div className="svc-items">
              <div className="svc-item 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="svc-item card"><b>{D.financial.careCredit.title}</b><p>{D.financial.careCredit.body}</p></div>
            </div>
          </div>
          <div className="svc-sec">
            <h2 className="heading" style={{ fontSize: "clamp(24px,3vw,34px)", marginBottom: 14 }}>After your treatment</h2>
            {D.postOp.map((po) => (
              <details key={po.id} className="postop card">
                <summary>{po.title}<I.chevron /></summary>
                <div className="postop-body">
                  {po.sections.map((sec, i) => (
                    <div key={i}><b>{sec[0]}</b><p>{sec[1]}</p></div>
                  ))}
                </div>
              </details>
            ))}
          </div>
        </article>
        <aside>
          <div className="aside-card 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 style={{ fontSize: 13.5, color: "var(--muted)", marginTop: 12 }}>Forms are available at every office and for download on our current site.</p></div>
          <div className="aside-card 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>
        </aside>
      </div></section>
      <CTA />
    </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="kicker">Contact Our Offices</span>
        <h1 className="display">Request an appointment</h1>
        <p className="lede">Call any office directly, or send a request and we'll get back to you to find a time and location that works.</p>
      </div></section>
      <section className="section"><div className="wrap contact-grid">
        <div className="contact-form card">
          <span className="loc-badge" style={{ marginBottom: 18 }}>Design preview — this form isn't wired up yet</span>
          {sent ? (
            <div className="form-done">
              <span className="svc-ic" style={{ margin: "0 auto 16px" }}><I.check /></span>
              <h3 style={{ fontSize: 24, marginBottom: 8 }}>Request received (preview)</h3>
              <p style={{ color: "var(--ink-2)" }}>On the real site this will reach our scheduling team. For now, please call {D.phone.main.label}.</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 — e.g., referred by my dentist for a root canal on a back tooth." /></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 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>
    </main>
  );
}

function Placeholder() {
  return (<main><section className="section" style={{ minHeight: "52vh", display: "grid", placeItems: "center", textAlign: "center" }}>
    <div className="wrap" style={{ maxWidth: 540 }}>
      <span className="kicker center">Design Preview</span>
      <h1 className="display" style={{ fontSize: "clamp(30px,5vw,46px)", marginTop: 14 }}>Page not found in this preview</h1>
      <p className="lede" style={{ margin: "16px auto 28px" }}>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-outline">Meet the Doctors</a></div>
    </div></section></main>);
}

function PreviewRibbon() {
  return (<div className="preview-ribbon"><span className="pr-name">Direction 5 — Beacon</span>
    <span className="pr-tag">Guided confidence · patient-first clarity</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] === "referring-dentists") page = <ReferringPage />;
  else if (seg[0] === "patients") page = <PatientsPage />;
  else if (seg[0] === "contact") page = <ContactPage />;
  else page = <Placeholder />;
  return (<React.Fragment><Header path={path} /><div key={window.location.hash}>{page}</div><Footer /><PreviewRibbon /></React.Fragment>);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);