/* ===== RIVERBANK (Direction 1 — safe/warm) — app ===== */
const { useState, useEffect } = React;
const D = DATA;

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

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 (
    <React.Fragment>
      <div className="topbar"><div className="wrap topbar-in">
        <span className="topbar-tag">Your Trusted Endodontist in Greater Pittsburgh</span>
        <div className="topbar-right"><Phone><I.phone /> {D.phone.main.label}</Phone></div>
      </div></div>
      <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} 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 an Appointment</a>
          <button className="hdr-ham" aria-label="Menu"><I.menu /></button>
        </div>
      </div></header>
    </React.Fragment>
  );
}

function Hero() {
  return (
    <section className="hero"><div className="wrap hero-in">
      <div className="hero-copy fade">
        <p className="eyebrow">Endodontic Specialists · Greater Pittsburgh</p>
        <h1 className="hero-title">Gentle root canal care that <em>saves your natural teeth</em></h1>
        <p className="hero-lede">No one is happy to hear they need a root canal. Our specialists make the experience as smooth and comfortable as possible — explaining every step, answering your questions, and helping you keep your tooth for a lifetime.</p>
        <div className="hero-actions">
          <a href="#/contact" className="btn btn-primary"><I.calendar /> Request an Appointment</a>
          <a href="#/referring-dentists" className="btn btn-outline"><I.doc /> Refer a Patient</a>
        </div>
        <Phone className="hero-call">
          <span className="ic"><I.phone /></span>
          <span><b>{D.phone.main.label}</b><em>Mon–Thu, 8am–4pm · call or tap</em></span>
        </Phone>
      </div>
      <div className="hero-figure fade" style={{ animationDelay: ".1s" }}>
        <div className="hero-photo">
          <img src={D.HERO} alt="The calm, modern reception at Three Rivers Endodontics"
            onError={(e) => { e.target.src = D.pgh.classic; }} />
        </div>
        <div className="hero-badge">
          <span className="b-ic"><I.tooth /></span>
          <span><b>Save your tooth</b><span>Specialized, microscope-assisted care</span></span>
        </div>
      </div>
    </div></section>
  );
}

function TrustBand() {
  const items = [
    { ic: <I.shield />, t: "Endodontic specialists", s: "Advanced training beyond dental school" },
    { ic: <I.pin />, t: D.locations.length + " Pittsburgh offices", s: "Care close to home, across the region" },
    { ic: <I.card />, t: "Most insurance accepted", s: "We'll help verify your benefits" },
    { ic: <I.heart />, t: "Flexible financing", s: "Cherry & CareCredit options" },
  ];
  return (
    <div className="trust"><div className="wrap trust-in">
      {items.map((x, i) => (
        <div key={i} className="trust-item"><span className="trust-ic">{x.ic}</span>
          <div><b>{x.t}</b><em>{x.s}</em></div></div>
      ))}
    </div></div>
  );
}

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

function Services() {
  return (
    <section className="section"><div className="wrap">
      <div className="sec-head">
        <div><p className="eyebrow">What We Treat</p>
          <h2 className="heading">Specialized care, focused on saving your tooth</h2></div>
        <p className="sec-head-lede lede">Endodontists are root canal experts. We perform these procedures every day, using modern technology to make treatment precise, gentle, and effective.</p>
      </div>
      <div className="svc-grid">
        {D.services.map((s) => (
          <a key={s.slug} href={"#/services/" + s.slug} className="svc-card 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 Reassure() {
  const steps = [
    ["You schedule with ease", "Call or request an appointment online. We'll find a time and the office most convenient for you."],
    ["We listen first", "Your doctor reviews your situation, explains what's happening, and answers every question before we begin."],
    ["Comfortable treatment", "With modern anesthetics and microscope-assisted precision, most patients say it feels much like a routine filling."],
    ["Back to your dentist", "We coordinate with your general dentist for your final restoration so your tooth is fully protected."],
  ];
  return (
    <section className="section bg-sage"><div className="wrap reassure">
      <div>
        <p className="eyebrow">Why See An Endodontist</p>
        <h2 className="heading">Anxious about a root canal? You're in good hands.</h2>
        <p className="lede" style={{ marginTop: 16 }}>At Three Rivers Endodontics, your well-being is our primary concern. Our goal is simple: help you keep your natural teeth, comfortably.</p>
        <div className="rstats">
          <div className="rstat"><b>{D.doctors.length}</b><em>specialist doctors</em></div>
          <div className="rstat"><b>{D.locations.length}</b><em>convenient offices</em></div>
          <div className="rstat"><b>1</b><em>goal: save your tooth</em></div>
        </div>
        <a href="#/services/root-canal-therapy" className="btn btn-primary">What to expect from a root canal <I.arrow /></a>
      </div>
      <ol className="steps">
        {steps.map((s, i) => (
          <li key={i} className="step"><span className="step-n">{i + 1}</span>
            <div><b>{s[0]}</b><p>{s[1]}</p></div></li>
        ))}
      </ol>
    </div></section>
  );
}

function PittsburghStrip() {
  return (
    <section className="pstrip">
      <div className="pstrip-bg"><img src={D.pgh.classic} alt="" loading="lazy" /></div>
      <div className="pstrip-scrim"></div>
      <div className="wrap"><div className="pstrip-in">
        <p className="eyebrow on-dark">Proudly Pittsburgh</p>
        <h2>Named for the three rivers — rooted in the city they made</h2>
        <p>The Allegheny, the Monongahela, and the Ohio. We're proud to be Pittsburgh's own endodontic specialists, caring for neighbors across every corner of the region.</p>
      </div></div>
    </section>
  );
}

function Locations() {
  const photos = [D.pgh.rivers, D.pgh.classic, D.pgh.night, D.pgh.skyline, D.pgh.rivers];
  return (
    <section className="section"><div className="wrap">
      <div className="sec-head">
        <div><p className="eyebrow">Our Offices</p>
          <h2 className="heading">{D.locations.length} convenient locations</h2></div>
        <a href="#/locations" className="btn btn-outline btn-sm">All locations <I.arrow /></a>
      </div>
      <div className="loc-grid">
        {D.locations.map((l, i) => (
          <div key={l.id} className="loc-card card card-hover">
            <div className="loc-photo">
              <img src={photos[i % photos.length]} alt="" loading="lazy" />
              {l.statusNote && <span className="ribbon">{l.statusNote}</span>}
            </div>
            <div className="loc-body">
              <h3>{l.name}</h3>
              <p className="loc-addr"><I.pin /> <span>{l.addr1}, {l.addr2}</span></p>
              <OfficePhone loc={l} className="loc-phone" icon={false} />
              <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>
        ))}
      </div>
    </div></section>
  );
}

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

function CTA() {
  return (
    <section className="cta">
      <div className="cta-bg"><img src={D.pgh.rivers} alt="" loading="lazy" /></div>
      <div className="cta-scrim"></div>
      <div className="wrap cta-in">
        <div><p className="eyebrow on-dark">Schedule a Consultation</p>
          <h2 className="heading">Schedule a consultation at one of our offices 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-light"><I.phone /> {D.phone.main.label}</Phone>
        </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} convenient 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-ghost-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. All rights reserved.</span>
        <nav className="footer-legal"><a href="#/">Accessibility</a><a href="#/">Privacy Policy</a><a href="#/contact">Contact</a></nav>
      </div>
    </div></footer>
  );
}

/* ---------- pages ---------- */
function HomePage() {
  return (<main><Hero /><TrustBand /><Services /><Reassure /><PittsburghStrip /><Locations /><Testimonials /><CTA /></main>);
}

function DoctorsIndex() {
  return (
    <main>
      <section className="pagehead">
        <div className="pagehead-bg"><img src={D.pgh.rivers} alt="" /></div>
        <div className="pagehead-scrim"></div>
        <div className="wrap pagehead-in">
          <nav className="crumbs"><a href="#/">Home</a><I.chevron /><span aria-current="page">Our Doctors</span></nav>
          <p className="eyebrow on-dark">Meet Your Endodontist</p>
          <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 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-cream"><div className="wrap">
        <div className="sec-head center-head">
          <p className="eyebrow center">The People Behind Your Care</p>
          <h2 className="heading">Meet our team</h2>
          <p className="lede" style={{ maxWidth: "52ch" }}>From your first phone call to your follow-up, our friendly team makes every visit smooth, welcoming, 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 card">
                <span className="team-av"><I.users /></span>
                <div><b>{m.name}</b><span className="t-title">{m.title}</span>
                  <span className="t-office">{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>
            <p className="eyebrow">Meet Your Endodontist</p>
            <h1 className="display">{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>
  );
}

function Placeholder() {
  return (
    <main><section className="section" style={{ minHeight: "52vh", display: "grid", placeItems: "center", textAlign: "center" }}>
      <div className="wrap" style={{ maxWidth: 540 }}>
        <p className="eyebrow center">Design Preview</p>
        <h1 className="display" style={{ fontSize: "clamp(30px,5vw,46px)" }}>This page isn't part of the preview</h1>
        <p className="lede" style={{ margin: "16px auto 28px" }}>This direction showcases the <b>Home</b> and <b>Meet the Doctors</b> experience. Explore those to feel the design.</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 1 — Riverbank</span>
      <span className="pr-tag">Warm &amp; reassuring · refined evolution</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 />);