/* ===== MERIDIAN (Direction 2 — medium/modern clinical) — 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", 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 (
    <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 Appointment</a>
        <button className="hdr-ham" aria-label="Menu"><I.menu /></button>
      </div>
    </div></header>
  );
}

function Hero() {
  return (
    <section className="hero"><div className="wrap">
      <div className="hero-in">
        <div className="fade">
          <span className="hero-tag"><b>NEW</b> Fifth office opening in Harmar · July 2026</span>
          <h1 className="hero-title">Precision endodontics, <span className="hl">a calmer kind of care</span></h1>
          <p className="hero-lede">Root canal specialists using modern microscopes and gentle technique — so treatment is precise, comfortable, and saves your natural tooth.</p>
          <div className="hero-actions">
            <a href="#/contact" className="btn btn-primary"><I.calendar /> Request an Appointment</a>
            <a href="#/doctors" className="btn btn-outline"><I.users /> Meet the doctors</a>
          </div>
          <div className="hero-meta"><I.micro /> Microscope-assisted · {D.locations.length} Greater Pittsburgh locations</div>
        </div>
        <div className="hero-figure fade" style={{ animationDelay: ".1s" }}>
          <div className="hero-img"><img src={D.HERO} alt="Modern treatment suite" onError={(e) => { e.target.src = D.pgh.classic; }} /></div>
          <div className="hero-stat s1"><b>{D.doctors.length}</b><span>specialist doctors</span></div>
          <div className="hero-stat s2"><b>100%</b><span>focused on endodontics</span></div>
        </div>
      </div>
    </div>
    <div className="hero-band"><div className="wrap"><div className="hero-band-in">
      {[{ic:<I.shield/>,t:"Board-trained specialists",s:"Beyond general dentistry"},
        {ic:<I.micro/>,t:"Microscope precision",s:"See more, treat gently"},
        {ic:<I.card/>,t:"Most insurance accepted",s:"Benefits verified for you"},
        {ic:<I.heart/>,t:"Cherry & CareCredit",s:"Flexible financing options"}].map((x,i)=>(
        <div key={i} className="hb-item"><span className="ic">{x.ic}</span><b>{x.t}</b><span>{x.s}</span></div>
      ))}
    </div></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">
      <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>
      <div className="bento">
        <a href={"#/services/" + feat.slug} className="svc feat card-hover card">
          <span className="svc-tag">{feat.tag}</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">
      <div className="sec-head">
        <span className="kicker">How It Works</span>
        <h2 className="heading">A clear, four-step path to relief</h2>
      </div>
      <div className="process">
        {steps.map((s, i) => (
          <div key={i} className="pstep"><span className="pn">{String(i + 1).padStart(2, "0")}</span>
            <h4>{s[0]}</h4><p>{s[1]}</p></div>
        ))}
      </div>
    </div></section>
  );
}

function WhyUs() {
  return (
    <section className="section"><div className="wrap split">
      <div>
        <span className="kicker">Why See An Endodontist</span>
        <h2 className="heading" style={{ marginTop: 16 }}>Anxious about a root canal? You're in expert hands.</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"><b>{D.doctors.length}</b><span>specialists</span></div>
          <div className="split-stat"><b>{D.locations.length}</b><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>
      <div className="split-img"><img src={D.HERO} alt="Treatment room" onError={(e) => { e.target.src = D.pgh.rivers; }} /></div>
    </div></section>
  );
}

function Pittsburgh() {
  return (
    <section className="pgh">
      <div className="pgh-bg"><img src={D.pgh.skyline} alt="" loading="lazy" /></div>
      <div className="pgh-scrim"></div>
      <div className="wrap"><div className="pgh-in">
        <span className="kicker on-dark">Proudly Pittsburgh</span>
        <h2 className="heading" style={{ marginTop: 16 }}>Named for the three rivers</h2>
        <p>The Allegheny, the Monongahela, and the Ohio. We're proud to be Pittsburgh's own endodontic specialists, caring for neighbors across the region.</p>
      </div></div>
    </section>
  );
}

function Locations() {
  return (
    <section className="section bg-fog"><div className="wrap">
      <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>
      <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>
        ))}
      </div>
    </div></section>
  );
}

function Testimonials() {
  return (
    <section className="section"><div className="wrap">
      <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>
      <div className="tst-grid">
        {D.testimonials.map((t, i) => (
          <figure key={i} 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>
        ))}
      </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} 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 /><Services /><Process /><WhyUs /><Pittsburgh /><Locations /><Testimonials /><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"><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>
  );
}

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 }}>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.</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 2 — Meridian</span>
    <span className="pr-tag">Modern &amp; clinical · bright, structured</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 />);