/* SiteShell — shared marketing-site chrome: browser frame, Nav, Footer,
   and the reusable WatchFace / PhoneMini device mocks. Window globals. */

window.BrowserChrome = function BrowserChrome({ url = "basepace.ai", children }) {
  return (
    <div style={{ width: 1280, maxWidth: "100%", borderRadius: 16, overflow: "hidden", boxShadow: "var(--sh-hero)", background: "#fff" }}>
      <div style={{ height: 40, background: "#1b1b1f", display: "flex", alignItems: "center", gap: 7, padding: "0 16px" }}>
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#FF5F57" }} />
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#FEBC2E" }} />
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#28C840" }} />
        <div style={{ marginLeft: 14, flex: 1, maxWidth: 340, height: 24, background: "#2c2c32", borderRadius: 7, display: "flex", alignItems: "center", padding: "0 12px", gap: 7 }}>
          <svg width="10" height="13" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="9" rx="2" stroke="#7a7a82" strokeWidth="2"/><path d="M8 11V8a4 4 0 018 0v3" stroke="#7a7a82" strokeWidth="2"/></svg>
          <span style={{ fontSize: 11.5, color: "#8a8a92" }}>{url}</span>
        </div>
      </div>
      {children}
    </div>
  );
};

window.Nav = function Nav({ active = "home", onNav = () => {} }) {
  const DS = window.PacerDesignSystem_355fab;
  const { Logo, Button } = DS;
  const items = [["coach", "Coach"], ["training", "Training"], ["watch", "Watch"], ["pricing", "Pricing"]];
  return (
    <div style={{ background: "var(--pac-ink)" }}>
      <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "20px 52px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <div onClick={() => onNav("home")} style={{ cursor: "pointer" }}><Logo size={24} onDark /></div>
      <div className="pac-navlinks" style={{ display: "flex", alignItems: "center", gap: 34 }}>
        {items.map(([k, label]) => (
          <span key={k} onClick={() => onNav(k)} style={{ fontSize: 14.5, color: active === k ? "var(--pac-accent)" : "#c5c5cc", fontWeight: active === k ? 600 : 500, cursor: "pointer" }}>{label}</span>
        ))}
        <Button size="sm">Download</Button>
      </div>
      </div>
    </div>
  );
};

window.SiteFooter = function SiteFooter({ surface = "ash", headline = "Train smarter. Run by feel, backed by data.", cta = "Download on the App Store" }) {
  const DS = window.PacerDesignSystem_355fab;
  const { Button, BrandMark } = DS;
  const bg = surface === "ink" ? "var(--pac-ink)" : surface === "white" ? "#fff" : "var(--pac-ash)";
  const ink = surface === "ink";
  const line = ink ? "rgba(255,255,255,.12)" : "#DAD9D4";
  return (
    <div style={{ background: bg }}>
      <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "80px 52px 40px", textAlign: "center" }}>
      <span style={{ display: "inline-flex", marginBottom: 22 }}><BrandMark size={32} color={ink ? "var(--pac-accent)" : "var(--pac-accent)"} /></span>
      <h2 style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-2px", color: ink ? "#fff" : "var(--pac-ink)", margin: "0 auto", maxWidth: 600, lineHeight: 1.06 }}>{headline}</h2>
      <div style={{ marginTop: 30 }}>
        <Button size="lg" icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M17 12.5c0-2 1.6-3 1.7-3.1-1-1.4-2.4-1.6-2.9-1.6-1.2-.1-2.4.7-3 .7s-1.6-.7-2.6-.7c-1.3 0-2.6.8-3.2 2-1.4 2.4-.4 6 1 8 .6 1 1.4 2 2.4 2s1.3-.6 2.5-.6 1.5.6 2.6.6 1.7-.9 2.3-1.9c.7-1 1-2 1-2.1-.1 0-2.3-.9-2.3-3.6zM15 6.3c.5-.7.9-1.6.8-2.5-.8 0-1.7.5-2.3 1.2-.5.6-.9 1.5-.8 2.4.9.1 1.8-.4 2.3-1.1z"/></svg>}>{cta}</Button>
      </div>
      <div style={{ marginTop: 48, paddingTop: 26, borderTop: `1px solid ${line}`, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
        <span style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-1.2px", color: ink ? "#fff" : "var(--pac-ink)" }}>basepace</span>
        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <a href="/privacy" style={{ fontSize: 13, color: ink ? "#c5c5cc" : "var(--pac-grey-500)", textDecoration: "none" }}>Privacy</a>
          <a href="/terms" style={{ fontSize: 13, color: ink ? "#c5c5cc" : "var(--pac-grey-500)", textDecoration: "none" }}>Terms</a>
          <span style={{ fontSize: 12.5, color: "var(--pac-grey-300)" }}>On-device AI · iPhone + Apple Watch</span>
        </div>
      </div>
      </div>
    </div>
  );
};

/* WatchFace — the Apple Watch active-run face, modeled 1:1 on the real app
   screenshot: time/Pacer stacked top-right, a cyan (Z2/aerobic-tinted)
   distance hero, "→ Easy", PACE + HR on one row, a horizontal 5-zone HR bar
   (Z2 active) with the zone label at its right end, then elapsed total. */
window.WatchFace = function WatchFace({ width = 248, height = 300 }) {
  const big = width > 180;
  const cyan = "#80D4EA";                   // bright sky-cyan Easy/Z2 tint (matches the watch OLED)
  const grey = "#7c7c82";
  const zones = ["var(--pac-speed)", "var(--pac-success)", "var(--pac-tempo)", "var(--pac-sun)", "var(--pac-vo2)"];
  const active = 1;                        // Z2 (aerobic, green)
  const f = (b, s) => (big ? b : s);
  return (
    <div style={{ position: "relative", width, height, boxSizing: "border-box", background: "#0E0E12", borderRadius: width * 0.23, padding: f("10px 9px", "7px 6px"), boxShadow: "0 30px 60px -28px rgba(0,0,0,.6)" }}>
      <div style={{ position: "absolute", right: -4, top: height * 0.30, width: 6, height: 50, background: "#1c1c20", borderRadius: 3 }} />
      <div style={{ width: "100%", height: "100%", boxSizing: "border-box", background: "#000", borderRadius: width * 0.17, overflow: "hidden", padding: f("12px 14px", "8px 9px"), color: "#fff", display: "flex", flexDirection: "column" }}>
        {/* header — time over Pacer, right aligned */}
        <div style={{ textAlign: "right", lineHeight: 1.04 }}>
          <div style={{ fontSize: f(12, 8), fontWeight: 600, color: cyan, fontVariantNumeric: "tabular-nums" }}>3:51</div>
          <div style={{ fontSize: f(12.5, 8), fontWeight: 700, color: cyan }}>Basepace</div>
        </div>
        <div style={{ flex: 0.45 }} />
        {/* WORK label + status dots */}
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
          <span style={{ fontSize: f(9, 6), fontWeight: 700, color: cyan, letterSpacing: ".6px" }}>WORK</span>
          <div style={{ display: "flex", flexDirection: "column", gap: f(2.5, 1.5), marginTop: f(2, 1) }}>
            <span style={{ width: f(3, 2), height: f(3, 2), borderRadius: "50%", background: grey }} />
            <span style={{ width: f(3, 2), height: f(3, 2), borderRadius: "50%", background: grey }} />
          </div>
        </div>
        {/* distance hero */}
        <div style={{ fontSize: f(41, 21), fontWeight: 700, color: cyan, letterSpacing: f("-2px", "-1px"), lineHeight: .9, marginTop: f(1, 0), fontVariantNumeric: "tabular-nums" }}>
          5.95<span style={{ fontSize: f(27, 14), fontWeight: 700, marginLeft: f(3, 1.5) }}>km</span>
        </div>
        {/* intensity */}
        <div style={{ fontSize: f(13.5, 8), color: "var(--pac-accent)", fontWeight: 600, marginTop: f(7, 4) }}>→ Easy</div>

        <div style={{ flex: 0.3 }} />

        {/* PACE + HR on one row */}
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: f(7, 4) }}>
          <div style={{ display: "flex", alignItems: "flex-end", gap: f(5, 3) }}>
            <span style={{ fontSize: f(8, 5.5), fontWeight: 700, color: grey, marginBottom: f(2, 1) }}>PACE</span>
            <span style={{ fontSize: f(16.5, 9), fontWeight: 700, color: "#fff", fontVariantNumeric: "tabular-nums" }}>7:55<span style={{ fontSize: f(11, 6), fontWeight: 600, color: "#d7d7db" }}>/km</span></span>
          </div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: f(5, 3) }}>
            <span style={{ fontSize: f(8, 5.5), fontWeight: 700, color: grey, marginBottom: f(2, 1) }}>HR</span>
            <span style={{ fontSize: f(16.5, 9), fontWeight: 700, color: "#FF4D8B", fontVariantNumeric: "tabular-nums" }}>115</span>
          </div>
        </div>
        {/* horizontal 5-zone HR bar + active zone label */}
        <div style={{ display: "flex", alignItems: "center", gap: f(6, 3.5) }}>
          <div style={{ flex: 1, display: "flex", alignItems: "center", gap: f(3, 2), height: f(8, 5) }}>
            {zones.map((c, i) => (
              <div key={i} style={{ flex: 1, height: i === active ? "100%" : "60%", borderRadius: 2, background: c, opacity: i === active ? 1 : 0.5 }} />
            ))}
          </div>
          <span style={{ fontSize: f(9, 6), fontWeight: 800, color: cyan }}>Z2</span>
        </div>
        {/* elapsed */}
        <div style={{ fontSize: f(10, 6.5), color: grey, fontVariantNumeric: "tabular-nums", marginTop: f(6, 3) }}>0:27 total</div>
        <div style={{ flex: 1 }} />
      </div>
    </div>
  );
};