/* Tamarack Marketing kit — shared helpers.
   Loaded as a Babel script; reads DS components from the namespace and
   exposes helpers on window for the screen files. */
const TM = window.TamarackMedicalDesignSystem_c56b47;

/* Flat photo placeholder — the brand forbids gradients, so a soft daylight
   tint stands in for real photography. Pass shadow on imagery that rests on
   a surface (the system's single drop-shadow). */
function Photo({ label = "Photograph", tint = "#e8eef5", height = 320, shadow = false, radius = "var(--radius-lg)", style = {} }) {
  return (
    <div style={{
      height, background: tint, borderRadius: radius,
      boxShadow: shadow ? "var(--shadow-product)" : "none",
      display: "flex", alignItems: "center", justifyContent: "center",
      ...style,
    }}>
      <span style={{ fontFamily: "var(--font-text)", fontSize: 13, letterSpacing: "-0.2px", color: "var(--color-ink-muted-48)" }}>{label}</span>
    </div>
  );
}

const TINTS = ["#e8eef5", "#e9efe9", "#f1ece4", "#f2eaea", "#e7eaef", "#eaf0f0"];

/* ---- Icon set (Lucide-style, 2px round, currentColor) -------------- */
const _i = (paths, vb = "0 0 24 24") => ({ size = 22, stroke = 2, style = {} }) => (
  <svg width={size} height={size} viewBox={vb} fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>{paths}</svg>
);
const TMIcons = {
  phone: _i(<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />),
  pin: _i(<g><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></g>),
  clock: _i(<g><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 14" /></g>),
  globe: _i(<g><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z" /></g>),
  check: _i(<polyline points="20 6 9 17 4 12" />),
  search: _i(<g><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></g>),
  walk: _i(<g><circle cx="13" cy="4" r="2" /><path d="M7 21l3-6 2 2 1 4M10 15l-1-5 4 1 2 3M13 10l-2 1" /></g>),
  users: _i(<g><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" /></g>),
  heart: _i(<path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z" />),
  calendar: _i(<g><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></g>),
  mail: _i(<g><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 7-10 6L2 7" /></g>),
  stethoscope: _i(<g><path d="M4 3v6a5 5 0 0 0 10 0V3M6 3H3M12 3h-3M9 14v2a5 5 0 0 0 10 0v-1" /><circle cx="20" cy="14" r="2" /></g>),
  shield: _i(<g><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><polyline points="9 12 11 14 15 10" /></g>),
  baby: _i(<g><path d="M9 12h.01M15 12h.01M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5" /><path d="M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9z" /></g>),
  syringe: _i(<g><path d="m18 2 4 4M17 7 7 17l-4 1 1-4L14 4M9 11l4 4M5 19l-2 2" /></g>),
};

const HEADER_NAV = [
  { label: "Home", to: "home" },
  { label: "About Us", to: "about" },
  { label: "Services", to: "services" },
  { label: "Specialties", to: "specialties" },
  { label: "Contact", to: "contact" },
];

/* Left-aligned section header for internal pages. */
function SectionHead({ eyebrow, title, sub, align = "left", onDark = false, maxWidth = "52ch", style = {} }) {
  return (
    <div style={{ textAlign: align, marginInline: align === "center" ? "auto" : 0, maxWidth: align === "center" ? maxWidth : "none", ...style }}>
      {eyebrow && <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 700, letterSpacing: "0.4px", textTransform: "uppercase", color: "var(--color-green-deep)", marginBottom: 10 }}>{eyebrow}</div>}
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--type-display-md-size)", fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: onDark ? "var(--color-body-on-dark)" : "var(--color-ink)" }}>{title}</h2>
      {sub && <p style={{ fontFamily: "var(--font-text)", fontSize: 18, lineHeight: 1.5, letterSpacing: "-0.3px", color: onDark ? "var(--color-body-muted)" : "var(--color-ink-muted-80)", margin: "12px 0 0", maxWidth, marginInline: align === "center" ? "auto" : 0 }}>{sub}</p>}
    </div>
  );
}

/* The three clinic promises, with icons. variant: "light" | "navy". */
function FactStrip({ variant = "light" }) {
  const onDark = variant === "navy";
  const facts = [
    { Icon: TMIcons.walk, h: "Walk-ins welcome", p: "No appointment needed." },
    { Icon: TMIcons.users, h: "Accepting new patients", p: "Bring the whole family." },
    { Icon: TMIcons.shield, h: "On-site pharmacy", p: "Fill prescriptions in one stop." },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--gutter-grid)" }}>
      {facts.map(({ Icon, h, p }) => (
        <div key={h} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
          <span style={{
            flex: "none", width: 48, height: 48, borderRadius: "var(--radius-md)",
            display: "flex", alignItems: "center", justifyContent: "center",
            background: onDark ? "rgba(255,255,255,0.08)" : "var(--color-canvas-parchment)",
            color: "var(--color-green)",
          }}><Icon size={24} /></span>
          <div>
            <div style={{ fontFamily: "var(--font-text)", fontSize: 17, fontWeight: 600, letterSpacing: "-0.374px", color: onDark ? "var(--color-body-on-dark)" : "var(--color-ink)" }}>{h}</div>
            <div style={{ fontFamily: "var(--font-text)", fontSize: 15, letterSpacing: "-0.2px", color: onDark ? "var(--color-body-muted)" : "var(--color-ink-muted-80)", marginTop: 2 }}>{p}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* Single light header bar: Tamarack logo left, nav right.
   Active link is leaf-green with a green underline; the rest are navy. */

/* Clinic hours grid */
function HoursOfOperation({ variant = "white" }) {
  const onDark = variant === "navy";
  const bg = onDark ? "var(--color-navy)" : "var(--color-canvas)";
  const days = [
    { day: "Monday", hours: "9:00 am – 4:00 pm", open: true },
    { day: "Tuesday", hours: "9:00 am – 4:00 pm", open: true },
    { day: "Wednesday", hours: "9:00 am – 4:00 pm", open: true },
    { day: "Thursday", hours: "9:00 am – 4:00 pm", open: true },
    { day: "Friday", hours: "9:00 am – 4:00 pm", open: true },
    { day: "Saturday", hours: "10:00 am – 3:00 pm", open: true },
    { day: "Sunday", hours: "Closed", open: false },
  ];
  return (
    <section style={{ background: bg, padding: "var(--space-section) var(--space-lg)" }}>
      <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: "var(--space-xl)" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.374px", color: onDark ? "#fff" : "var(--color-navy)", margin: 0 }}>Clinic Hours</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 12, maxWidth: 980, margin: "0 auto" }}>
          {days.map((d) => (
            <div key={d.day} style={{
              textAlign: "center", padding: "16px 8px",
              background: onDark ? "rgba(255,255,255,0.06)" : "var(--color-canvas-parchment)",
              borderRadius: "var(--radius-md)",
              border: d.open ? "1px solid var(--color-hairline)" : "1px dashed var(--color-hairline)",
              opacity: d.open ? 1 : 0.6,
            }}>
              <div style={{ fontFamily: "var(--font-text)", fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-green)", marginBottom: 8 }}>{d.day.slice(0,3)}</div>
              <div style={{ fontFamily: "var(--font-text)", fontSize: 13, fontWeight: 600, color: onDark ? "#fff" : "var(--color-navy)", lineHeight: 1.4 }}>{d.open ? d.hours.replace(" – ", "–") : "Closed"}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SiteHeader({ route = "home", onNav, onBook }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="tmc-site-header" style={{ position: "sticky", top: 0, zIndex: 10 }}>
      <header style={{ background: "var(--color-canvas)", borderBottom: "1px solid var(--color-hairline)" }}>
        <div style={{
          maxWidth: "var(--container-grid)", margin: "0 auto",
          height: 72, padding: "0 var(--space-xl)",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-xl)",
        }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav && onNav("home"); }} style={{ display: "flex", alignItems: "center", flex: "none" }}>
            <img src="/ui_kits/marketing/assets/logo-tmc.png" height="52" alt="Tamarack Medical Clinic" />
          </a>
          <div style={{ display: "flex", alignItems: "center", gap: "var(--space-xl)" }}>
            <nav style={{ display: "flex", alignItems: "center", gap: "var(--space-xl)" }}>
              {HEADER_NAV.map((l) => {
                const active = l.to === route;
                return (
                  <a key={l.label} href="#"
                    onClick={(e) => { e.preventDefault(); onNav && onNav(l.to); }}
                    style={{
                      position: "relative", fontFamily: "var(--font-text)", fontSize: 15,
                      fontWeight: 600, letterSpacing: "-0.2px", textDecoration: "none",
                      color: active ? "var(--color-green)" : "var(--color-navy)", paddingBottom: 6,
                    }}>
                    {l.label}
                    {active && <span style={{ position: "absolute", left: 0, right: 0, bottom: -1, height: 3, background: "var(--color-green)", borderRadius: 2 }} />}
                  </a>
                );
              })}
            </nav>
            <TM.Button variant="primary" size="sm" className="tmc-header-book" onClick={onBook}>
              Book your appointment now
            </TM.Button>
            <button onClick={() => setOpen(o => !o)} className="tmc-hamburger"
              style={{ display: "none", background: "none", border: "none", cursor: "pointer", padding: 8, color: "var(--color-navy)" }}
              aria-label="Open menu">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                {open
                  ? <g><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></g>
                  : <g><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></g>
                }
              </svg>
            </button>
          </div>
        </div>
      </header>
      {open && (
        <div className="tmc-mobile-nav-menu">
          {HEADER_NAV.map((l) => (
            <a key={l.label} href="#" onClick={(e) => { e.preventDefault(); onNav && onNav(l.to); setOpen(false); }}>{l.label}</a>
          ))}
          <a href="#" onClick={(e) => { e.preventDefault(); setOpen(false); onBook && onBook(); }} style={{ color: "var(--color-primary)", fontWeight: 700 }}>Book your appointment now</a>
          <a href="tel:+17802442873" style={{ color: "var(--color-green)" }}>Call (780) 244-2873</a>
        </div>
      )}
    </div>
  );
}

function SiteFooter({ onNav, onBook }) {
  const go = (to) => (e) => { e.preventDefault(); onNav && onNav(to); };
  return (
    <div>
      <TM.Footer
        columns={[
          { heading: "Quick links", links: [
            { label: "Home", href: "#", onClick: go("home") },
            { label: "About us", href: "#", onClick: go("about") },
            { label: "Services", href: "#", onClick: go("services") },
            { label: "Book a visit", href: "#", onClick: (e) => { e.preventDefault(); onBook && onBook(); } },
          ] },
          { heading: "Care", links: [
            { label: "Private Medical Care", href: "#", onClick: go("services") },
            { label: "Refugee Health", href: "#", onClick: go("services") },
            { label: "WCB Injuries", href: "#", onClick: go("services") },
            { label: "Our doctors", href: "#", onClick: go("specialties") },
          ] },
          { heading: "Contact", links: [{ label: "2373 Maple Rd NW" }, { label: "Edmonton, AB T6T 0Y3" }, { label: "Tel: (780) 244-2873" }, { label: "Fax: (780) 249-2873" }, { label: "info@tamarackclinic.ca" }] },
          { heading: "Hours", links: [{ label: "Mon–Fri: 9am – 4pm" }, { label: "Saturday: 10am – 3pm" }, { label: "Sunday: Closed" }, { label: "We speak your language" }] },
          { heading: "Legal", links: [
            { label: "Privacy Policy", href: "#", onClick: go("privacy") },
            { label: "Terms & Conditions", href: "#", onClick: go("terms") },
            { label: "Cookie preferences", href: "#", onClick: (e) => { e.preventDefault(); window.tmcOpenCookiePreferences && window.tmcOpenCookiePreferences(); } },
          ] },
        ]}
        fine="Tamarack Medical Clinic is a physician-owned and operated family medicine practice with an on-site pharmacy, affiliated with the Southside Primary Care Network. Information on this site is for general purposes and is not a substitute for professional medical advice."
        legal="© 2026 Tamarack Medical Clinic. Compassionate Care. Trusted Doctors. Healthier You."
      />
      <div style={{ background: "var(--color-navy)", borderTop: "1px solid rgba(255,255,255,0.08)", padding: "12px var(--space-lg)", textAlign: "center" }}>
        <span style={{ fontFamily: "var(--font-text)", fontSize: 13, color: "rgba(255,255,255,0.4)", letterSpacing: "-0.2px" }}>
          Proudly Built and Managed by{" "}
          <a href="https://www.digitalodyssey.agency" target="_blank" rel="noopener noreferrer" style={{ color: "var(--color-green)", textDecoration: "none", fontWeight: 600 }}>
            Digital Odyssey
          </a>
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { TMPhoto: Photo, TMTints: TINTS, TMIcons, SectionHead, FactStrip, HoursOfOperation, SiteHeader, SiteFooter });
