/* ===== CONFLUENCE (Direction 3 — bold/editorial Pittsburgh) — app ===== */
const { useState, useEffect } = React;
const D = DATA;

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

function Header({ path }) {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const f = () => setSolid(window.scrollY > 80);
    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" + (solid ? " solid" : "")}><div className="wrap hdr-in">
      <a href="#/" className="brand" aria-label="Three Rivers Endodontics — home"><img src={D.LOGO} 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-sage btn-sm"><I.calendar /> Request</a>
        <button className="hdr-ham" aria-label="Menu"><I.menu /></button>
      </div>
    </div></header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg"><img src={D.pgh.night} alt="" onError={(e) => { e.target.src = D.pgh.skyline; }} /></div>
      <div className="hero-scrim"></div>
      <div className="hero-side">Greater Pittsburgh<span style={{ width: 30, height: 1, background: "currentColor", display: "inline-block" }}></span>Three Rivers</div>
      <div className="wrap hero-in fade">
        <p className="label hero-eyebrow">Endodontic Specialists</p>
        <h1 className="hero-title">Keep the teeth <span className="it">the rivers</span> gave you.</h1>
        <div className="hero-foot">
          <p className="hero-lede">No one is happy to hear they need a root canal. Our specialists make it calm, precise, and gentle — saving your natural tooth for a lifetime.</p>
          <div className="hero-actions">
            <a href="#/contact" className="btn btn-sage"><I.calendar /> Request an Appointment</a>
            <Phone className="btn btn-outline-light"><I.phone /> {D.phone.main.label}</Phone>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const words = ["Root Canal Therapy", "Retreatment", "Endodontic Surgery", "Cracked Teeth", "Traumatic Injuries", "Microscope-Assisted Care"];
  const run = (
    <span>{words.map((w, i) => <React.Fragment key={i}>{w} <b>✦</b> </React.Fragment>)}</span>
  );
  return (<div className="marquee" aria-hidden="true"><div className="marquee-in">{run}{run}</div></div>);
}

function Statement() {
  return (
    <section className="section bg-ivory"><div className="wrap statement">
      <div>
        <p className="label dark">Why See An Endodontist</p>
        <p className="big" style={{ marginTop: 26 }}>An endodontist is a dentist who has chosen to do <em>one thing</em> — save teeth — and to do it every single day.</p>
      </div>
      <div className="statement-side">
        <p className="lede">At Three Rivers Endodontics, your well-being is our primary concern. Using modern microscopes and gentle, up-to-date technique, we make root canal treatment as smooth and comfortable as possible — taking the time to explain each step and put anxious patients at ease.</p>
        <p>Our goal is simple: help you keep your natural teeth, comfortably, close to home.</p>
        <div className="stat-row">
          <div className="stat"><b>{D.doctors.length}</b><span>Specialist doctors</span></div>
          <div className="stat"><b>{D.locations.length}</b><span>Pittsburgh offices</span></div>
          <div className="stat"><b>1925</b><span>Microscope precision</span></div>
        </div>
      </div>
    </div></section>
  );
}

function Services() {
  return (
    <section className="section bg-navy"><div className="wrap">
      <div className="svc-head">
        <div><p className="label">What We Treat</p>
          <h2 className="heading" style={{ marginTop: 22, maxWidth: "16ch" }}>Specialized care, focused on saving your tooth</h2></div>
        <a href="#/services" className="btn btn-outline-light btn-sm">All services <I.arrow /></a>
      </div>
      <div className="svc-list">
        {D.services.map((s, i) => (
          <a key={s.slug} href={"#/services/" + s.slug} className="svc-row">
            <span className="svc-no">{String(i + 1).padStart(2, "0")}</span>
            <div className="svc-mid"><h3>{s.title}</h3><p>{s.summary}</p></div>
            <span className="svc-go"><I.arrowUR /></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-bone"><div className="wrap">
      <p className="label dark">The Experience</p>
      <h2 className="heading" style={{ marginTop: 22, maxWidth: "20ch" }}>Four steps, from anxious to at ease</h2>
      <div className="proc-grid">
        {steps.map((s, i) => (
          <div key={i} className="proc"><span className="pn">{String(i + 1).padStart(2, "0")} / 04</span>
            <h4>{s[0]}</h4><p>{s[1]}</p></div>
        ))}
      </div>
    </div></section>
  );
}

function Pittsburgh() {
  return (
    <section className="pgh">
      <div className="pgh-bg"><img src={D.pgh.classic} alt="" loading="lazy" onError={(e) => { e.target.src = D.pgh.skyline; }} /></div>
      <div className="pgh-scrim"></div>
      <div className="wrap"><div className="pgh-in fade">
        <p className="label">Proudly Pittsburgh</p>
        <h2 className="heading" style={{ marginTop: 22, maxWidth: "14ch" }}>Named for the three rivers</h2>
        <p className="lede">We're proud to be Pittsburgh's own endodontic specialists — caring for neighbors across every corner of the region the rivers built.</p>
        <div className="rivers">
          <div className="river">Allegheny<span>From the north</span></div>
          <div className="river">Monongahela<span>From the south</span></div>
          <div className="river">Ohio<span>The confluence</span></div>
        </div>
      </div></div>
    </section>
  );
}

function Locations() {
  return (
    <section className="section bg-ivory"><div className="wrap">
      <div className="svc-head">
        <div><p className="label dark">Our Offices</p>
          <h2 className="heading" style={{ marginTop: 22 }}>{D.locations.length} locations across the region</h2></div>
        <a href="#/locations" className="btn btn-outline-dark btn-sm">All locations <I.arrow /></a>
      </div>
      <div className="loc-grid" style={{ marginTop: 14 }}>
        {D.locations.map((l, i) => (
          <div key={l.id} className="loc">
            <div className="loc-top"><span className="loc-no">{String(i + 1).padStart(2, "0")}</span>{l.statusNote && <span className="loc-badge">{l.statusNote}</span>}</div>
            <h3>{l.name}</h3>
            <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={"#/locations/" + l.id} className="loc-link">Office details <I.arrow /></a>
              <a href={"#/contact?office=" + l.id} className="loc-link" style={{ color: "var(--blue)", borderColor: "var(--blue)" }}>Request appt.</a>
            </div>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function Testimonials() {
  const [i, setI] = useState(0);
  const t = D.testimonials[i];
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % D.testimonials.length), 7000);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section bg-navy"><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 className="pull-dots">
          {D.testimonials.map((_, j) => (
            <button key={j} className={"pull-dot" + (j === i ? " on" : "")} aria-label={"Testimonial " + (j + 1)} onClick={() => setI(j)}></button>
          ))}
        </div>
      </div>
    </div></section>
  );
}

function FinalCTA() {
  return (
    <section className="cta-final">
      <div className="cta-final-bg"><img src={D.pgh.rivers} alt="" loading="lazy" /></div>
      <div className="cta-final-scrim"></div>
      <div className="wrap"><div className="cta-final-in fade">
        <p className="label center">Schedule a Consultation</p>
        <h2 className="heading" style={{ marginTop: 22 }}>Relief is closer than you think.</h2>
        <div className="actions">
          <a href="#/contact" className="btn btn-sage"><I.calendar /> Request an Appointment</a>
          <Phone className="btn btn-outline-light"><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} 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 an Appointment</a>
            <a href="#/referring-dentists" className="btn btn-outline-light 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</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 /><Marquee /><Statement /><Services /><Process /><Pittsburgh /><Locations /><Testimonials /><FinalCTA /></main>); }

function DoctorsIndex() {
  return (
    <main>
      <section className="pagehead">
        <div className="pagehead-bg"><img src={D.pgh.rivers} alt="" onError={(e) => { e.target.src = D.pgh.skyline; }} /></div>
        <div className="pagehead-scrim"></div>
        <div className="wrap pagehead-in fade">
          <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Our Doctors</span></nav>
          <p className="label">Meet Your Endodontist</p>
          <h1 className="display" style={{ marginTop: 18 }}>The doctors</h1>
          <p className="lede">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 bg-navy"><div className="wrap">
        <div className="doc-grid">
          {D.doctors.map((d, i) => (
            <a key={d.slug} href={"#/doctors/" + d.slug} className="doc">
              <img src={d.photo} alt={d.name} loading="lazy" />
              <div className="doc-grad"></div>
              <div className="doc-info">
                <span className="doc-no">{String(i + 1).padStart(2, "0")}</span>
                <span className="doc-name">{d.name}</span>
                <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-ivory"><div className="wrap">
        <p className="label dark">The People Behind Your Care</p>
        <h2 className="heading" style={{ marginTop: 22, maxWidth: "16ch" }}>Meet our team</h2>
        <div className="team-grid">
          {D.team.map((m, i) => {
            const office = m.locationId ? D.officeById(m.locationId) : null;
            return (<div key={i} className="team"><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="docpage-hero-bg"><img src={D.pgh.classic} alt="" onError={(e) => { e.target.src = D.pgh.skyline; }} /></div>
        <div className="docpage-hero-scrim"></div>
        <div className="wrap">
          <nav className="crumbs"><a href="#/">Home</a><I.chevron /><a href="#/doctors">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>
              <p className="label">Meet Your Endodontist</p>
              <h1 className="display" style={{ fontSize: "clamp(40px,6vw,84px)", marginTop: 16 }}>{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-sage"><I.calendar /> Request an Appointment</a>
                <Phone className="btn btn-outline-light"><I.phone /> {D.phone.main.label}</Phone>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="detail section"><div className="wrap detail-in">
        <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-cta"><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-sage btn-block"><I.calendar /> Request an Appointment</a></div>
        </aside>
      </div></section>
      <FinalCTA />
    </main>
  );
}

function Placeholder() {
  return (<main><section className="section" style={{ minHeight: "70vh", display: "grid", placeItems: "center", textAlign: "center", paddingTop: 180 }}>
    <div className="wrap" style={{ maxWidth: 600 }}>
      <p className="label center">Design Preview</p>
      <h1 className="display" style={{ fontSize: "clamp(34px,6vw,60px)", marginTop: 18 }}>Not part of this preview</h1>
      <p className="lede" style={{ margin: "20px auto 32px", color: "var(--muted-light)" }}>This direction showcases the <em className="it">Home</em> and <em className="it">Meet the Doctors</em> experience.</p>
      <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
        <a href="#/" className="btn btn-sage">Back to Home</a><a href="#/doctors" className="btn btn-outline-light">Meet the Doctors</a></div>
    </div></section></main>);
}

function PreviewRibbon() {
  return (<div className="preview-ribbon"><span className="pr-name">Direction 3 — Confluence</span>
    <span className="pr-tag">Premium editorial · distinctly Pittsburgh</span>
    <a href="../../3RE Design Directions.html"><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 page = <Placeholder />;
  return (<React.Fragment><Header path={path} /><div key={path}>{page}</div><Footer /><PreviewRibbon /></React.Fragment>);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);