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

window.BrowserChrome = function BrowserChrome({ url = "pacer.run", 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)" }}>pacer</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 on the real app):
   distance-led, intensity, pace + HR, a vertical 5-zone HR bar (Z2 active). */
window.WatchFace = function WatchFace({ width = 248, height = 300 }) {
  const big = width > 180;
  const zones = ["var(--pac-recovery)", "var(--pac-aerobic)", "var(--pac-tempo)", "var(--pac-accent)", "var(--pac-vo2)"];
  const active = 1; // Z2 (aerobic)
  return (
    <div style={{ position: "relative", width, height, background: "#0E0E12", borderRadius: width * 0.23, padding: big ? "14px 12px" : "8px 7px", boxShadow: "0 30px 60px -28px rgba(0,0,0,.6)" }}>
      <div style={{ position: "absolute", right: -4, top: height * 0.32, width: 6, height: 52, background: "#1c1c20", borderRadius: 3 }} />
      <div style={{ width: "100%", height: "100%", background: "#000", borderRadius: width * 0.17, overflow: "hidden", padding: big ? "12px 13px" : "8px 9px", color: "#fff", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: big ? 11 : 7.5, fontWeight: 700, color: "var(--pac-accent)" }}>Pacer</span>
          <span style={{ fontSize: big ? 10 : 7, color: "#6c6c72", fontVariantNumeric: "tabular-nums" }}>3:51</span>
        </div>
        <div style={{ display: "flex", flex: 1, gap: big ? 9 : 5, marginTop: big ? 8 : 4 }}>
          {/* left — distance + intensity */}
          <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
            <span style={{ fontSize: big ? 8.5 : 6, fontWeight: 700, color: "#7a7a80", letterSpacing: ".5px" }}>WORK</span>
            <div style={{ fontSize: big ? 36 : 18, fontWeight: 700, letterSpacing: big ? "-2px" : "-1px", lineHeight: .92, marginTop: big ? 3 : 1, fontVariantNumeric: "tabular-nums" }}>5.95<span style={{ fontSize: big ? 15 : 8, fontWeight: 600, marginLeft: 2 }}>km</span></div>
            <div style={{ fontSize: big ? 11.5 : 7, color: "var(--pac-accent)", fontWeight: 600, marginTop: big ? 6 : 3 }}>→ Easy</div>
          </div>
          {/* right — pace/hr + vertical zone bar */}
          <div style={{ display: "flex", gap: big ? 7 : 4 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: big ? 8 : 4 }}>
              <div><div style={{ fontSize: big ? 7.5 : 5, color: "#7a7a80", fontWeight: 700 }}>PACE</div><div style={{ fontSize: big ? 15 : 8.5, fontWeight: 700, color: "var(--pac-success)", fontVariantNumeric: "tabular-nums" }}>7:55</div></div>
              <div><div style={{ fontSize: big ? 7.5 : 5, color: "#7a7a80", fontWeight: 700 }}>HR</div><div style={{ fontSize: big ? 15 : 8.5, fontWeight: 700, color: "var(--pac-aerobic)", fontVariantNumeric: "tabular-nums" }}>115</div></div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
              <span style={{ fontSize: big ? 8 : 5, fontWeight: 800, color: "var(--pac-aerobic)", marginBottom: 2 }}>Z2</span>
              <div style={{ flex: 1, display: "flex", flexDirection: "column-reverse", gap: 2, width: big ? 8 : 5 }}>
                {zones.map((c, i) => (
                  <div key={i} style={{ flex: 1, borderRadius: 2, background: c, opacity: i === active ? 1 : 0.28 }} />
                ))}
              </div>
            </div>
          </div>
        </div>
        <div style={{ fontSize: big ? 9.5 : 6, color: "#6c6c72", fontVariantNumeric: "tabular-nums", marginTop: big ? 4 : 2 }}>0:27 total</div>
      </div>
    </div>
  );
};