// sections.jsx — Nav, Hero, Channels, Locations, Personas, Compliance, Footer.

const { useState: useS } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Nav
// ─────────────────────────────────────────────────────────────────────────────

function Nav({ onBook }) {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "color-mix(in oklab, var(--bg) 80%, transparent)",
      backdropFilter: "blur(14px)",
      borderBottom: "1px solid var(--rule)",
    }}>
      <div className="container-wide nav-row" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "14px 32px",
      }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{
            width: 36, height: 36, borderRadius: 10, overflow: "hidden",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            background: "var(--brand-soft)",
          }}>
            <img src="assets/maplesmile-logo.jpg" alt="maplesmile mark"
              style={{ width: 32, height: 32, objectFit: "cover", objectPosition: "center 38%", transform: "scale(1.6) translateY(-6px)" }} />
          </span>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-.01em" }}>
            maplesmile
          </span>
        </a>

        <nav className="nav-links" style={{ display: "flex", gap: 22 }}>
          <a className="nav-link" href="#locations">Clinics</a>
          <a className="nav-link" href="#care">Care</a>
          <a className="nav-link" href="#aria-why">ARIA Why</a>
          <a className="nav-link" href="#trust">Privacy &amp; trust</a>
          <a className="nav-link" href="tel:+12498000333">+1 249 800 0333</a>
        </nav>

        <div className="nav-cta" style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-ghost nav-cta-secondary" onClick={onBook}>Patient portal</button>
          <button className="btn btn-brand" onClick={onBook}>Book a visit</button>
        </div>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Hero
// ─────────────────────────────────────────────────────────────────────────────

function Hero({ onBook }) {
  return (
    <section id="top" data-screen-label="Hero" style={{ position: "relative", overflow: "hidden", padding: "72px 0 96px" }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 56, alignItems: "end" }}>
          {/* Left: type */}
          <div style={{ position: "relative", zIndex: 1 }}>
            <div className="section-mark"><span className="eyebrow">Four clinics · Manitoba · est. 2019</span></div>

            <h1 className="display" style={{ fontSize: "clamp(64px, 8vw, 132px)", margin: 0 }}>
              Dental care<br />
              that meets you<br />
              <em>where you are.</em>
            </h1>

            <p style={{
              fontSize: 19, lineHeight: 1.55, maxWidth: 520, color: "var(--ink-soft)",
              marginTop: 28,
            }}>
              Book by WhatsApp, SMS, Telegram, webchat or email — in English or French — and
              talk to a real clinician within hours. Four clinics across Manitoba,
              one patient record, zero repeating yourself.
            </p>

            <div style={{ display: "flex", gap: 10, marginTop: 36 }}>
              <button className="btn btn-brand" onClick={onBook}>Book a first visit</button>
              <a className="btn btn-ghost" href="tel:+12498000333">
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ok)" }} />
                Call +1 249 800 0333
              </a>
            </div>

            <div style={{ display: "flex", gap: 40, marginTop: 64, flexWrap: "wrap" }}>
              <Stat big="4" small="clinics" />
              <Stat big="11k+" small="patients" />
              <Stat big="<3h" small="median first reply" />
              <Stat big="EN · FR-CA" small="every channel" />
            </div>
          </div>

          {/* Right: editorial composition */}
          <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="photo-ph" style={{ aspectRatio: "4/5", minHeight: 420 }}>
              <span className="photo-label">Tuxedo clinic · reception</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="photo-ph" style={{ aspectRatio: "1/1", minHeight: 160 }}>
                <span className="photo-label">Dr. Chen</span>
              </div>
              <div style={{
                aspectRatio: "1/1", minHeight: 160,
                background: "var(--ink)", color: "var(--bg)",
                borderRadius: 18, padding: 22,
                display: "flex", flexDirection: "column", justifyContent: "space-between",
              }}>
                <span className="eyebrow" style={{ color: "rgba(244,238,230,.6)" }}>Outbound demo line</span>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1.1 }}>
                    +1 249<br />800 0333
                  </div>
                  <div style={{ fontSize: 12, color: "rgba(244,238,230,.6)", marginTop: 8 }}>
                    EN · appointments · recalls · after-hours triage
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ big, small }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <div className="stat-num">{big}</div>
      <div className="eyebrow" style={{ fontSize: 10 }}>{small}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Channels strip
// ─────────────────────────────────────────────────────────────────────────────

function ChannelGlyph({ k }) {
  const sz = 22;
  const props = { width: sz, height: sz, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (k) {
    case "wa": return (
      <svg viewBox="0 0 24 24" {...props}>
        <path d="M3.5 20.5l1.4-4.8a8.5 8.5 0 1 1 3.6 3.4l-5 1.4z" />
        <path d="M8.3 9.2c.3-.8.6-.8.9-.8h.6c.2 0 .5 0 .8.7s.9 2.2.9 2.4-.1.3-.2.5-.3.4-.5.6-.4.4-.2.7c.2.3.9 1.4 1.9 2.3 1.3 1.1 2.4 1.5 2.7 1.6.3.1.5.1.7-.1.2-.3.8-.9 1-1.2.2-.3.4-.2.7-.1.3.1 1.8.9 2.2 1 .3.1.5.2.6.4.1.2.1 1-.2 2-.3.9-1.7 1.7-2.5 1.8s-1.8.1-2.9-.3c-.7-.2-1.6-.5-2.7-1-4.7-2-7.7-6.8-7.9-7.2-.2-.3-1.8-2.4-1.8-4.6 0-2.2 1.1-3.3 1.6-3.7.4-.4.9-.5 1.2-.5h.9c.3 0 .7-.1 1.1.8.4.9 1.4 3.1 1.5 3.3.1.2.2.5 0 .8z" strokeWidth="1.3" />
      </svg>
    );
    case "sms": return (
      <svg viewBox="0 0 24 24" {...props}>
        <path d="M21 12.5a8 8 0 0 1-12.4 6.7L4 20.5l1.3-4.4A8 8 0 1 1 21 12.5z" />
        <path d="M8.5 12h.01M12 12h.01M15.5 12h.01" strokeWidth="2.2" />
      </svg>
    );
    case "tg": return (
      <svg viewBox="0 0 24 24" {...props}>
        <path d="M21 4L2.5 11l5.5 2 2 6 3-3.5 5.5 4 2.5-15.5z" />
        <path d="M8 13l9-6-6 7" />
      </svg>
    );
    case "web": return (
      <svg viewBox="0 0 24 24" {...props}>
        <rect x="3" y="4" width="18" height="14" rx="2" />
        <path d="M7 18l-2 3h14l-2-3" />
        <path d="M7 9h10M7 12h6" />
      </svg>
    );
    case "email": return (
      <svg viewBox="0 0 24 24" {...props}>
        <rect x="3" y="5" width="18" height="14" rx="2" />
        <path d="M3 7l9 6 9-6" />
      </svg>
    );
    case "phone": return (
      <svg viewBox="0 0 24 24" {...props}>
        <path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z" />
      </svg>
    );
    default: return null;
  }
}

function ChannelsStrip() {
  return (
    <section data-screen-label="Channels" style={{ padding: "60px 0", background: "var(--bg-elev)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="container">
        <div className="section-head" style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 32, marginBottom: 32, flexWrap: "wrap" }}>
          <div>
            <div className="section-mark"><span className="eyebrow">Five channels · one record</span></div>
            <h2 className="display" style={{ fontSize: 40, margin: 0, maxWidth: 520 }}>
              Wherever patients reach us, <em>the conversation continues.</em>
            </h2>
          </div>
          <p style={{ color: "var(--ink-soft)", maxWidth: 360, fontSize: 14, margin: 0 }}>
            Inbound mix · last 30 days · across all four clinics. Every message lands in the
            same patient record, attributed and audited.
          </p>
        </div>

        <div className="channels-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", border: "1px solid var(--rule)", borderRadius: 18, overflow: "hidden", background: "var(--bg)" }}>
          {CHANNELS.map((c) => (
            <div key={c.key} className="channel-cell">
              <div style={{ color: "var(--brand)" }}><ChannelGlyph k={c.key} /></div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, lineHeight: 1 }}>{c.stat}</div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{c.label}</div>
              <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{c.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Care · simple feature triplet (book / triage / records)
// ─────────────────────────────────────────────────────────────────────────────

function Care() {
  return (
    <section id="care" data-screen-label="Care" style={{ padding: "100px 0" }}>
      <div className="container">
        <div className="section-mark"><span className="eyebrow">How we work</span></div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, maxWidth: 820 }}>
          A clinic that <em>holds the thread</em> — from your first message to your last filling.
        </h2>

        <div className="care-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginTop: 56 }}>
          <CareCard
            num="01"
            title="Reach out, in any language we cover"
            body="WhatsApp, SMS, Telegram, webchat, email. EN or FR-CA. We answer within hours; urgent pain within minutes."
            tag="Median first reply · under 3 hours"
          />
          <CareCard
            num="02"
            title="Triage by a clinician — assisted by ARIA"
            body="A real clinician decides what's urgent. ARIA only narrows the slot options and drafts the reply. You can ask Why? on any decision."
            tag="100% of urgent cases · clinician-reviewed"
          />
          <CareCard
            num="03"
            title="One record across four clinics"
            body="Visit Brandon today, Steinbach next month. Same chart, same allergies on file, same dentist if you ask."
            tag="PIPEDA · provincial data residency"
          />
        </div>
      </div>
    </section>
  );
}

function CareCard({ num, title, body, tag }) {
  return (
    <div className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14, minHeight: 280 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--brand)", letterSpacing: ".1em" }}>{num}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 26, lineHeight: 1.15 }}>{title}</div>
      <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 14.5, lineHeight: 1.55 }}>{body}</p>
      <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--rule)" }}>
        <span className="chip chip-brand">{tag}</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Locations
// ─────────────────────────────────────────────────────────────────────────────

function Locations() {
  const [active, setActive] = useS(LOCATIONS[0].id);
  const loc = LOCATIONS.find((l) => l.id === active);

  return (
    <section id="locations" data-screen-label="Locations" style={{ padding: "100px 0", background: "var(--bg-deep)" }}>
      <div className="container">
        <div className="section-head" style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 32, marginBottom: 36, flexWrap: "wrap" }}>
          <div>
            <div className="section-mark"><span className="eyebrow">Four clinics · Manitoba</span></div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0 }}>
              From Tuxedo to Steinbach,<br /><em>twenty-five chairs in all.</em>
            </h2>
          </div>
          <p style={{ color: "var(--ink-soft)", maxWidth: 320, fontSize: 14, margin: 0 }}>
            Each clinic is locally owned, with its own lead dentist and a roster of associates.
            All share one booking calendar, one patient record, one privacy policy.
          </p>
        </div>

        <div className="locations-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 24, alignItems: "stretch" }}>
          {/* List */}
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {LOCATIONS.map((l) => (
              <button key={l.id} onClick={() => setActive(l.id)}
                style={{
                  appearance: "none", cursor: "pointer",
                  textAlign: "left", padding: "20px 22px",
                  background: active === l.id ? "var(--ink)" : "var(--bg-elev)",
                  color: active === l.id ? "var(--bg)" : "var(--ink)",
                  border: "1px solid " + (active === l.id ? "var(--ink)" : "var(--rule)"),
                  borderRadius: 16,
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  transition: "all .15s ease",
                }}>
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 24, lineHeight: 1 }}>{l.neighborhood}</div>
                  <div style={{ fontSize: 12, opacity: .7, fontFamily: "var(--font-mono)", letterSpacing: ".04em" }}>{l.city.toUpperCase()} · {l.chairs} CHAIRS</div>
                </div>
                <div style={{ fontSize: 18, opacity: .5 }}>→</div>
              </button>
            ))}
          </div>

          {/* Detail */}
          <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
            <div className="photo-ph" style={{ height: 260, borderRadius: 0 }}>
              <span className="photo-label">{loc.photoNote}</span>
            </div>
            <div className="location-detail-inner" style={{ padding: 28, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 28, flex: 1 }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <div className="eyebrow">Maplesmile · {loc.city}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 36, lineHeight: 1 }}>{loc.neighborhood}</div>
                <div style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.55 }}>{loc.address}</div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 6 }}>
                  {loc.languages.map((l) => <span key={l} className="chip">{l}</span>)}
                </div>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <Field label="Lead dentist" value={loc.lead} />
                <Field label="Hours" value={loc.hours} />
                <Field label="Direct" value={loc.phone} />
                <Field label="Demo line · EN" value="+1 249 800 0333" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value }) {
  return (
    <div>
      <div className="eyebrow" style={{ fontSize: 10 }}>{label}</div>
      <div style={{ fontSize: 13.5, color: "var(--ink)", marginTop: 4 }}>{value}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Personas / patient stories
// ─────────────────────────────────────────────────────────────────────────────

function Personas({ onPersonaWhy }) {
  return (
    <section id="patients" data-screen-label="Personas" style={{ padding: "120px 0" }}>
      <div className="container">
        <div className="section-mark"><span className="eyebrow">Patient stories · 20 personas modeled</span></div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, maxWidth: 820 }}>
          Three patients. <em>One thread each.</em>
        </h2>
        <p style={{ color: "var(--ink-soft)", maxWidth: 540, fontSize: 16, marginTop: 18 }}>
          A snapshot from the twenty personas our care team trains against. Each is a real-shape
          patient arc: a first message, a triage, a chair, a follow-up. Every routing call has a Why?
        </p>

        <div className="personas-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginTop: 48 }}>
          {PERSONAS.map((p) => (
            <div key={p.id} className="persona-card">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14 }}>
                <div className="photo-ph" style={{ width: 64, height: 64, borderRadius: 999, flexShrink: 0 }} />
                <div style={{ display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 26, lineHeight: 1 }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{p.age} · {p.location}</div>
                </div>
              </div>

              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                <span className="chip chip-brand">{p.tag}</span>
                <span className="chip">{p.channel}</span>
              </div>

              <blockquote style={{
                margin: 0, padding: "12px 0 0", fontFamily: "var(--font-display)",
                fontSize: 19, lineHeight: 1.35, color: "var(--ink)",
                fontStyle: "italic", borderTop: "1px solid var(--rule)",
              }}>
                "{p.quote}"
              </blockquote>

              <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 10 }}>
                <div style={{ paddingTop: 12, borderTop: "1px solid var(--rule)" }}>
                  <div className="eyebrow" style={{ fontSize: 10 }}>History</div>
                  <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 4 }}>{p.history}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 8, fontStyle: "italic" }}>{p.arc}</div>
                </div>
                <button onClick={onPersonaWhy} className="btn btn-ghost" style={{ alignSelf: "flex-start", padding: "8px 14px", fontSize: 13 }}>
                  Why this routing? <span style={{ opacity: .5 }}>→</span>
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Trust / Privacy
// ─────────────────────────────────────────────────────────────────────────────

function Trust() {
  return (
    <section id="trust" data-screen-label="Trust" style={{ padding: "120px 0", background: "var(--ink)", color: "var(--bg)" }}>
      <div className="container">
        <div className="trust-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="section-mark" style={{ color: "rgba(244,238,230,.6)" }}>
              <span className="eyebrow" style={{ color: "rgba(244,238,230,.6)" }}>Privacy &amp; trust</span>
            </div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: 0, color: "var(--bg)" }}>
              Your record is <em style={{ color: "var(--accent)" }}>yours.</em><br />
              We just hold it carefully.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, maxWidth: 480, color: "rgba(244,238,230,.78)", marginTop: 24 }}>
              Maplesmile operates under Canada's <strong style={{ color: "var(--bg)" }}>PIPEDA</strong> and
              follows <strong style={{ color: "var(--bg)" }}>HIPAA-adjacent</strong> safeguards for
              cross-border message handling. Your messages are encrypted in transit and at rest, redacted
              of identifiers before any model call, and never used to train third-party AI.
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <TrustRow k="PIPEDA"        v="Personal Information Protection &amp; Electronic Documents Act" note="Federal · in force" />
            <TrustRow k="HIPAA-adj."    v="Cross-border message handling · BAA-style controls" note="Operational policy" />
            <TrustRow k="Data residency" v="Provincial · Manitoba primary, Ontario warm-standby"   note="No US replication" />
            <TrustRow k="Model calls"    v="PII redacted before invocation · no third-party training" note="ARIA · v2026.04" />
            <TrustRow k="Right to delete" v="48-hour purge across systems · receipt emailed"          note="Patient self-serve" />
            <TrustRow k="Audit"          v="Every routing decision exportable as PDF · 50+ trajectories archived" note="Clinical lead reviewed" />
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustRow({ k, v, note }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "160px 1fr auto", gap: 18,
      alignItems: "baseline", padding: "16px 0",
      borderTop: "1px solid rgba(244,238,230,.14)",
    }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)", letterSpacing: ".06em", textTransform: "uppercase" }}>
        {k}
      </div>
      <div style={{ fontSize: 14.5, color: "var(--bg)" }} dangerouslySetInnerHTML={{ __html: v }} />
      <div style={{ fontSize: 12, color: "rgba(244,238,230,.5)" }}>{note}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Contact · all 6 channels with deep-links
// ─────────────────────────────────────────────────────────────────────────────

const CONTACT_CHANNELS = [
  { key: "wa",    label: "WhatsApp",  handle: "+1 249 800 0333", note: "Fastest reply · 24/7",          href: "https://wa.me/12498000333" },
  { key: "sms",   label: "Text us",   handle: "+1 249 800 0333", note: "EN appointments + recalls",     href: "sms:+12498000333" },
  { key: "tg",    label: "Telegram",  handle: "@maplesmile",     note: "FR-CA preferred",               href: "https://t.me/maplesmile" },
  { key: "web",   label: "Web chat",  handle: "Live on this page", note: "Median first reply · 14 min", href: "#chat", live: true },
  { key: "email", label: "Email",     handle: "hello@maplesmile.ca", note: "Treatment plans + invoices", href: "mailto:hello@maplesmile.ca" },
  { key: "phone", label: "Phone",     handle: "+1 249 800 0333", note: "After-hours triage line",       href: "tel:+12498000333", phone: true },
];

function Contact() {
  return (
    <section id="contact" data-screen-label="Contact" style={{ padding: "120px 0", borderTop: "1px solid var(--rule)" }}>
      <div className="container">
        <div className="contact-head">
          <div>
            <div className="section-mark"><span className="eyebrow">Reach us · any channel</span></div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, maxWidth: 720 }}>
              Pick a channel. <em>We're already listening.</em>
            </h2>
          </div>
          <p style={{ color: "var(--ink-soft)", maxWidth: 360, fontSize: 14.5, lineHeight: 1.55, margin: 0 }}>
            Every channel lands in the same patient record. Reach us once and your next visit
            just gets booked — no repeating yourself.
          </p>
        </div>

        <div className="contact-grid">
          {CONTACT_CHANNELS.map((c) => (
            <a key={c.key} href={c.href}
               target={c.href.startsWith("http") ? "_blank" : undefined}
               rel={c.href.startsWith("http") ? "noopener noreferrer" : undefined}
               className="contact-card">
              <div className="contact-glyph"><ChannelGlyph k={c.key} /></div>
              <div className="contact-body">
                <div className="contact-label">
                  <span>{c.label}</span>
                  {c.live && <span style={{
                    width: 7, height: 7, borderRadius: 999, background: "var(--ok)",
                    boxShadow: "0 0 0 4px rgba(79,122,74,.18)",
                  }} />}
                </div>
                <div className="contact-handle">{c.handle}</div>
                <div className="contact-note">{c.note}</div>
              </div>
              <div className="contact-arrow">→</div>
            </a>
          ))}
        </div>

        <div className="contact-footnote">
          <span className="chip">PIPEDA · encrypted at rest</span>
          <span className="chip">No third-party AI training</span>
          <span className="chip chip-brand">Audit trail on every reply</span>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer data-screen-label="Footer" style={{ padding: "60px 0 36px", background: "var(--bg-deep)", borderTop: "1px solid var(--rule)" }}>
      <div className="container">
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 32, alignItems: "start" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{
                width: 36, height: 36, borderRadius: 10, overflow: "hidden",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                background: "var(--brand-soft)",
              }}>
                <img src="assets/maplesmile-logo.jpg" alt=""
                  style={{ width: 32, height: 32, objectFit: "cover", objectPosition: "center 38%", transform: "scale(1.6) translateY(-6px)" }} />
              </span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 24 }}>maplesmile</span>
            </div>
            <p style={{ color: "var(--ink-soft)", fontSize: 14, maxWidth: 340, marginTop: 14 }}>
              Patient-first dental care across Manitoba. Reach us on any channel — we'll
              keep the thread.
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
              <span className="chip">PIPEDA</span>
              <span className="chip">HIPAA-adj.</span>
              <span className="chip chip-brand">EU AI Act Art. 13</span>
            </div>
          </div>

          <FooterCol head="Clinics" links={LOCATIONS.map((l) => `${l.neighborhood} · ${l.city}`)} />
          <FooterCol head="Reach us" links={[
            "+1 249 800 0333 · EN demo",
            "WhatsApp",
            "Telegram",
            "hello@maplesmile.ca",
          ]} />
          <FooterCol head="Patients" links={[
            "Book a visit",
            "Patient portal",
            "Privacy notice",
            "Right to delete",
            "ARIA model card",
          ]} />
        </div>

        <div className="footer-bottom" style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, color: "var(--ink-mute)", gap: 16, flexWrap: "wrap" }}>
          <div>© 2026 Maplesmile Dental Group · Winnipeg · Brandon · Steinbach</div>
          <div style={{ fontFamily: "var(--font-mono)" }}>ARIA · v2026.04 · sha:7c1f0b</div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ head, links }) {
  return (
    <div>
      <div className="eyebrow" style={{ fontSize: 10 }}>{head}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14 }}>
        {links.map((l) => (
          <a key={l} href="#" style={{ fontSize: 13.5, color: "var(--ink-soft)" }}>{l}</a>
        ))}
      </div>
    </div>
  );
}

// Export
Object.assign(window, { Nav, Hero, ChannelsStrip, Care, Locations, Personas, Contact, Trust, Footer });
