/* SubPages — Coach / Training / Watch / Pricing marketing pages. */

window.CoachPage = function CoachPage() {
  const DS = window.PacerDesignSystem_355fab;
  const { ChatBubble, StatTile } = DS;
  const check = <svg width="20" height="20" viewBox="0 0 24 24" style={{ flex: "0 0 20px" }}><circle cx="12" cy="12" r="11" fill="var(--pac-success)"/><path d="M7 12.5l3.2 3.2L17 9" stroke="#fff" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>;
  const reads = [["7h 42m", "Sleep", "var(--pac-aerobic)"], ["66", "Calm / HRV", "var(--pac-success)"], ["76", "Recovery", "var(--pac-accent)"], ["78 km", "7-day load", "var(--pac-ink)"], ["38d", "To race", "var(--pac-volt)"]];
  return (
    <div>
      <div style={{ background: "var(--pac-ash)" }}>
        <div className="pac-wrap pac-row" style={{ maxWidth: 1280, margin: "0 auto", padding: "60px 48px", display: "flex", gap: 48, alignItems: "center" }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent)", textTransform: "uppercase" }}>The coach</div>
          <h1 style={{ fontSize: 50, lineHeight: 1.04, fontWeight: 700, letterSpacing: "-2.4px", color: "var(--pac-ink)", margin: "12px 0 0" }}>A coach that thinks in your data.</h1>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--pac-grey-500)", margin: "18px 0 0", maxWidth: 440 }}>Not chat with a generic bot. A local model that knows your last 90 days — your sleep, your drift, your load — and turns it into the right session for today.</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 11, marginTop: 24 }}>
            {["Explains every decision in your own numbers", "Adjusts tomorrow when today goes sideways", "Runs entirely on-device — nothing uploaded"].map((t, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 11 }}>{check}<span style={{ fontSize: 15, color: "var(--pac-grey-700)" }}>{t}</span></div>
            ))}
          </div>
        </div>
        <div style={{ flex: "0 0 400px", display: "flex", flexDirection: "column", gap: 11 }}>
          <ChatBubble from="coach" text="HR drift on Monday's tempo was just 4.2% — your aerobic base is holding well." analytics={["📊 78 km · 7-day", "1 quality session"]} />
          <ChatBubble from="me" text="Legs felt heavy on the warm-up though." />
          <ChatBubble from="coach" text="Noted — softened tomorrow to an easy 8 km under 142 bpm so we protect Thursday's threshold." />
        </div>
        </div>
      </div>
      <div style={{ background: "#fff" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "56px 48px" }}>
        <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-1.4px", color: "var(--pac-ink)", margin: 0, textAlign: "center" }}>What the coach reads</h2>
        <div className="pac-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14, marginTop: 34 }}>
          {reads.map(([v, l, c], i) => (
            <div key={i} style={{ background: "var(--pac-ash)", borderRadius: "var(--r-card)", padding: "20px 16px", textAlign: "center" }}>
              <div style={{ fontSize: 26, fontWeight: 700, color: c, fontVariantNumeric: "tabular-nums" }}>{v}</div>
              <div style={{ fontSize: 12.5, color: "var(--pac-grey-500)", marginTop: 5, fontWeight: 600 }}>{l}</div>
            </div>
          ))}
        </div>
        </div>
      </div>
      <div style={{ background: "var(--pac-ink)" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "52px 48px", textAlign: "center" }}>
        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 52, height: 52, borderRadius: 14, background: "rgba(52,196,107,.16)", marginBottom: 18 }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z" stroke="var(--pac-success)" strokeWidth="2" strokeLinejoin="round"/><path d="M9 12l2 2 4-4" stroke="var(--pac-success)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </span>
        <h2 style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-1.6px", color: "#fff", margin: "0 auto", maxWidth: 520, lineHeight: 1.1 }}>Runs on-device. Always.</h2>
        <p style={{ fontSize: 16, lineHeight: 1.55, color: "#a9a9b2", margin: "14px auto 0", maxWidth: 460 }}>The model lives on your phone. Your Health data is never uploaded, never sold, never leaves your hand.</p>
        </div>
      </div>
    </div>
  );
};

window.TrainingPage = function TrainingPage() {
  const DS = window.PacerDesignSystem_355fab;
  const families = [
    ["recovery", "Recovery", "Flush easy, very low HR"], ["aerobic", "Aerobic", "Base miles, conversational"],
    ["long", "Long", "Endurance, progressive finish"], ["tempo", "Tempo", "Comfortably hard, steady"],
    ["threshold", "Threshold", "Lactate edge, controlled"], ["vo2", "VO₂", "Hard intervals, top end"],
    ["speed", "Speed", "Strides & neuromuscular"], ["strength", "Strength", "Hills & resistance"],
  ];
  const fc = { recovery: "var(--pac-recovery)", aerobic: "var(--pac-aerobic)", long: "var(--pac-long)", tempo: "var(--pac-tempo)", threshold: "var(--pac-accent)", vo2: "var(--pac-vo2)", speed: "var(--pac-speed)", strength: "var(--pac-strength)" };
  const week = [["Easy", 34, "var(--pac-aerobic)"], ["VO₂", 66, "var(--pac-vo2)"], ["Thresh", 78, "var(--pac-accent)"], ["Easy", 38, "var(--pac-aerobic)"], ["Rest", 22, "var(--pac-recovery)"], ["Long", 90, "var(--pac-long)"], ["Strides", 26, "var(--pac-speed)"]];
  return (
    <div>
      <div style={{ background: "var(--pac-ink)" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "60px 48px" }}>
        <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto" }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent-soft)", textTransform: "uppercase" }}>Training</div>
          <h1 style={{ fontSize: 52, lineHeight: 1.03, fontWeight: 700, letterSpacing: "-2.6px", color: "#fff", margin: "12px 0 0" }}>Training that periodizes itself.</h1>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "#a9a9b2", margin: "18px auto 0", maxWidth: 480 }}>Set your race. The coach builds the block backward — base, sharpening, peak, taper — and colors every session by what it's for.</p>
        </div>
        <div style={{ maxWidth: 760, margin: "38px auto 0", background: "rgba(255,255,255,.05)", borderRadius: "var(--r-hero)", padding: 22 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}><span style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".5px", color: "#80808a", textTransform: "uppercase" }}>Build week · 78 km</span><span style={{ fontSize: 12, color: "#9b9ba4" }}>Mon → Sun</span></div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 10, height: 90 }}>
            {week.map(([l, h, c], i) => (
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                <div style={{ width: "100%", height: h, borderRadius: 6, background: c }} />
                <span style={{ fontSize: 10, color: "#80808a", fontWeight: 600 }}>{l}</span>
              </div>
            ))}
          </div>
        </div>
        </div>
      </div>
      <div style={{ background: "var(--pac-ash)" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "56px 48px" }}>
        <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-1.4px", color: "var(--pac-ink)", margin: 0, textAlign: "center" }}>Eight workout families. One color each.</h2>
        <div className="pac-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14, marginTop: 34 }}>
          {families.map(([k, t, b], i) => (
            <div key={i} style={{ background: "#fff", borderRadius: "var(--r-card)", padding: 18, boxShadow: "var(--sh-card-sm)" }}>
              <span style={{ width: 13, height: 13, borderRadius: "50%", background: fc[k], display: "block" }} />
              <div style={{ fontSize: 16, fontWeight: 700, color: "var(--pac-ink)", marginTop: 11 }}>{t}</div>
              <div style={{ fontSize: 13, color: "var(--pac-grey-500)", marginTop: 3 }}>{b}</div>
            </div>
          ))}
        </div>
        </div>
      </div>
      <div style={{ background: "#fff" }}>
        <div className="pac-wrap pac-row" style={{ maxWidth: 1280, margin: "0 auto", padding: "56px 48px", display: "flex", gap: 44, alignItems: "center" }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent)", textTransform: "uppercase" }}>Readiness-driven</div>
          <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-1.4px", color: "var(--pac-ink)", margin: "12px 0 0", maxWidth: 380 }}>Slept badly? The plan already knows.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--pac-grey-500)", margin: "14px 0 0", maxWidth: 400 }}>Low recovery score in the morning and the coach quietly swaps intensity for volume — protecting the session that actually matters this week.</p>
        </div>
        <div style={{ flex: "0 0 420px", display: "flex", flexDirection: "column", gap: 11 }}>
          <div style={{ background: "var(--pac-ash)", borderRadius: "var(--r-card)", padding: 16, display: "flex", alignItems: "center", gap: 14 }}><span style={{ fontSize: 11, fontWeight: 700, color: "var(--pac-grey-300)", width: 56 }}>PLANNED</span><span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--pac-accent)" }} /><div style={{ flex: 1 }}><div style={{ fontSize: 15, fontWeight: 600, color: "#0E0E12" }}>Threshold 6×1 km</div><div style={{ fontSize: 12, color: "var(--pac-grey-400)", fontVariantNumeric: "tabular-nums" }}>@ 4:05/km</div></div></div>
          <div style={{ display: "flex", justifyContent: "center" }}><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M12 19l5-5M12 19l-5-5" stroke="#C9C9CC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
          <div style={{ background: "#fff", border: "2px solid var(--pac-success)", borderRadius: "var(--r-card)", padding: 16, display: "flex", alignItems: "center", gap: 14 }}><span style={{ fontSize: 11, fontWeight: 700, color: "var(--pac-success)", width: 56 }}>ADAPTED</span><span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--pac-aerobic)" }} /><div style={{ flex: 1 }}><div style={{ fontSize: 15, fontWeight: 600, color: "#0E0E12" }}>Easy aerobic 10 km</div><div style={{ fontSize: 12, color: "var(--pac-grey-400)", fontVariantNumeric: "tabular-nums" }}>under 142 bpm · recovery 58</div></div></div>
        </div>
        </div>
      </div>
    </div>
  );
};

window.WatchPage = function WatchPage() {
  const { WatchFace } = window;
  const feats = [
    [<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="var(--pac-accent)" strokeWidth="2.2"/><path d="M12 7v5l3 2" stroke="var(--pac-accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>, "var(--pac-tint-accent)", "Interval timer", "Rep, recovery, and reps-remaining counted down — a haptic tells you when to surge and when to float."],
    [<svg width="22" height="20" viewBox="0 0 24 24" fill="none"><path d="M3 14h4l2-7 3 12 3-9 2 4h4" stroke="var(--pac-warning)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>, "var(--pac-tint-warning)", "HR-zone bar", "The same five-zone bar from the app, live on your wrist. Know instantly if you're drifting out of target."],
    [<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="var(--pac-success)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>, "var(--pac-tint-success)", "Pace targets", "Each rep carries its goal pace. Green when you're on it, so you can run the workout, not the math."],
  ];
  return (
    <div>
      <div style={{ background: "var(--pac-ink)" }}>
        <div className="pac-wrap pac-row" style={{ maxWidth: 1280, margin: "0 auto", padding: "60px 48px", display: "flex", gap: 48, alignItems: "center" }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent-soft)", textTransform: "uppercase" }}>Apple Watch</div>
          <h1 style={{ fontSize: 52, lineHeight: 1.03, fontWeight: 700, letterSpacing: "-2.6px", color: "#fff", margin: "12px 0 0" }}>Coaching on your wrist.</h1>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "#a9a9b2", margin: "18px 0 0", maxWidth: 420 }}>Send the session from your phone and leave it behind. Targets, intervals, and zones live on your watch — glanceable, mid-stride.</p>
        </div>
        <div style={{ flex: "0 0 auto" }}><WatchFace /></div>
        </div>
      </div>
      <div style={{ background: "var(--pac-ash)" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "56px 48px" }}>
        <div className="pac-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
          {feats.map(([icon, tint, t, b], i) => (
            <div key={i} style={{ background: "#fff", borderRadius: "var(--r-hero)", padding: 26, boxShadow: "var(--sh-raised)" }}>
              <span style={{ width: 46, height: 46, borderRadius: 13, background: tint, display: "flex", alignItems: "center", justifyContent: "center" }}>{icon}</span>
              <h3 style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-.3px", color: "var(--pac-ink)", margin: "16px 0 0" }}>{t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--pac-grey-500)", margin: "8px 0 0" }}>{b}</p>
            </div>
          ))}
        </div>
        </div>
      </div>
    </div>
  );
};

window.PricingPage = function PricingPage() {
  const DS = window.PacerDesignSystem_355fab;
  const { Button, Badge } = DS;
  const tick = (fill) => <svg width="17" height="17" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill={fill}/><path d="M7 12.5l3.2 3.2L17 9" stroke={fill === "#E7E6E2" ? "#86868B" : "#fff"} strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>;
  const faqs = [
    ["Is there a subscription?", "No. Starter is free forever, and Pro is a one-time purchase — because the coach runs on your device, not our servers."],
    ["Do I need an Apple Watch?", "It's recommended for live workouts and readiness, but the coach and plan work from any Apple Health data on your iPhone."],
    ["Where does my data go?", "Nowhere. Everything is processed on your phone. We never see your Health data."],
  ];
  return (
    <div>
      <div style={{ background: "var(--pac-ash)" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "60px 48px" }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent)", textTransform: "uppercase" }}>Pricing</div>
          <h1 style={{ fontSize: 48, lineHeight: 1.04, fontWeight: 700, letterSpacing: "-2.4px", color: "var(--pac-ink)", margin: "12px 0 0" }}>One coach. No surprises.</h1>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--pac-grey-500)", margin: "14px auto 0", maxWidth: 420 }}>The coach runs on your device, so there's no server bill to pass on. Start free, upgrade once.</p>
        </div>
        <div style={{ display: "flex", gap: 18, maxWidth: 720, margin: "40px auto 0" }}>
          <div style={{ flex: 1, background: "#fff", borderRadius: "var(--r-hero)", padding: 28, boxShadow: "var(--sh-raised)" }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: "var(--pac-ink)" }}>Starter</div>
            <div style={{ fontSize: 46, fontWeight: 700, letterSpacing: "-2.4px", color: "var(--pac-ink)", marginTop: 10, fontVariantNumeric: "tabular-nums" }}>Free</div>
            <div style={{ fontSize: 13, color: "var(--pac-grey-400)", marginTop: 4 }}>Everything to start training</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 22 }}>
              {["AI coach & daily plan", "Readiness rings", "Apple Watch workouts"].map((t, i) => <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>{tick("#E7E6E2")}<span style={{ fontSize: 14, color: "var(--pac-grey-700)" }}>{t}</span></div>)}
            </div>
            <Button variant="outline" fullWidth style={{ marginTop: 24 }}>Get started</Button>
          </div>
          <div style={{ flex: 1, background: "var(--pac-ink)", borderRadius: "var(--r-hero)", padding: 28, position: "relative", boxShadow: "var(--sh-raised)" }}>
            <div style={{ position: "absolute", top: 20, right: 20 }}><Badge tone="accent" solid>Most popular</Badge></div>
            <div style={{ fontSize: 14, fontWeight: 700, color: "var(--pac-accent-soft)" }}>Pro</div>
            <div style={{ fontSize: 46, fontWeight: 700, letterSpacing: "-2.4px", color: "#fff", marginTop: 10, fontVariantNumeric: "tabular-nums" }}>$49<span style={{ fontSize: 18, color: "#9b9ba4", letterSpacing: "-.5px", fontWeight: 600 }}> once</span></div>
            <div style={{ fontSize: 13, color: "#9b9ba4", marginTop: 4 }}>Lifetime · no subscription</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 22 }}>
              {["Everything in Starter", "Race periodization & taper", "Unlimited coach chat", "Full splits & HR analytics"].map((t, i) => <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>{tick("var(--pac-accent)")}<span style={{ fontSize: 14, color: "#e7e7ea" }}>{t}</span></div>)}
            </div>
            <Button fullWidth style={{ marginTop: 24 }}>Get Pro</Button>
          </div>
        </div>
        </div>
      </div>
      <div style={{ background: "#fff" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "56px 48px" }}>
        <h2 style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-1.4px", color: "var(--pac-ink)", margin: "0 0 28px", textAlign: "center" }}>Questions</h2>
        <div style={{ maxWidth: 680, margin: "0 auto", display: "flex", flexDirection: "column" }}>
          {faqs.map(([q, a], i) => (
            <div key={i} style={{ padding: "18px 0", borderTop: "1px solid #EEEDE9", borderBottom: i === faqs.length - 1 ? "1px solid #EEEDE9" : "none" }}>
              <div style={{ fontSize: 16, fontWeight: 600, color: "var(--pac-ink)" }}>{q}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--pac-grey-500)", margin: "7px 0 0" }}>{a}</p>
            </div>
          ))}
        </div>
        </div>
      </div>
    </div>
  );
};