/* HomePage — landing page: split hero with phone+watch, features grid,
   how-it-works, coach spotlight. */
window.HomePage = function HomePage() {
  const DS = window.PacerDesignSystem_355fab;
  const { Badge, Button, ReadinessRing, ChatBubble, BrandMark, ProgressBar } = DS;
  const { WatchFace } = window;

  const features = [
    { tint: "var(--pac-tint-accent)", icon: <BrandMark size={15} />, title: "On-device coach", body: "A local model reads your Health data and writes your plan. Nothing is uploaded — your training stays yours." },
    { tint: "var(--pac-tint-success)", icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8.5" stroke="var(--pac-success)" strokeWidth="2.2"/><circle cx="12" cy="12" r="4" stroke="var(--pac-success)" strokeWidth="2.2" opacity=".5"/></svg>, title: "Readiness rings", body: "Calm, recovery, and sleep, every morning. Green light or back off — the coach decides the day around it." },
    { tint: "var(--pac-tint-warning)", icon: <svg width="20" height="22" viewBox="0 0 24 24" fill="none"><rect x="5" y="3" width="14" height="18" rx="4" stroke="var(--pac-warning)" strokeWidth="2.2"/><path d="M12 8v4l2.5 1.5" stroke="var(--pac-warning)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>, title: "Live on Apple Watch", body: "Interval timers, HR-zone bar, and pace targets on your wrist. Send the session from your phone and just run." },
    { tint: "var(--pac-tint-volt)", icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 19V5" stroke="var(--pac-volt)" strokeWidth="2.2" strokeLinecap="round"/><path d="M5 5.5h10l-1.8 2.8L15 11H5" stroke="var(--pac-volt)" strokeWidth="2.2" strokeLinejoin="round" fill="none"/></svg>, title: "Race countdown", body: "Set your A-race and the plan periodizes backward — peak, taper, and goal pace, counted down to the day." },
    { tint: "var(--pac-tint-aerobic)", icon: <svg width="22" height="20" viewBox="0 0 24 24" fill="none"><path d="M3 16l4-7 3 4 3.5-9 3.5 12 4-6" stroke="var(--pac-aerobic)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>, title: "Intensity by feel", body: "Every workout is colored by family — recovery to VO₂ — so you read the week's load at a glance." },
    { tint: "var(--pac-tint-strength)", icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v7A2.5 2.5 0 0117.5 16H9l-4 3.5V16H6.5A2.5 2.5 0 014 13.5z" stroke="var(--pac-strength)" strokeWidth="2.2" strokeLinejoin="round"/></svg>, title: "Chat your coach", body: "Ask why a session changed, how you're trending, what to do about tired legs. It answers with your numbers." },
  ];

  const steps = [
    ["01", "Connect Apple Health", "Link your watch data — HR, sleep, runs. One tap, on-device."],
    ["02", "Coach builds your plan", "It periodizes the block around your race and your readiness."],
    ["03", "Run with your watch", "Targets, intervals, and zones live on your wrist as you go."],
    ["04", "Debrief & adapt", "Log effort and feel — tomorrow adjusts before you wake up."],
  ];

  return (
    <div>
      {/* HERO (split) */}
      <div style={{ background: "var(--pac-ink)" }}>
        <div className="pac-wrap pac-row" style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 52px 76px", display: "flex", gap: 56, alignItems: "center", position: "relative", overflow: "hidden" }}>
        <div style={{ flex: "1 1 0", maxWidth: 560 }}>
          <Badge tone="onDark" dot>On-device AI · Apple Watch</Badge>
          <h1 style={{ fontSize: 62, lineHeight: 1.02, fontWeight: 700, letterSpacing: "-3px", color: "#fff", margin: "22px 0 0" }}>A running coach that <span style={{ color: "var(--pac-accent)" }}>reads your body</span>.</h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--pac-text-on-dark-muted, #a9a9b2)", margin: "22px 0 0", maxWidth: 480 }}>Pacer reads your Apple Health data, schedules every workout, and adapts in real time — coaching that lives on your wrist and never leaves your phone.</p>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 32 }}>
            <Button size="lg" icon={<svg width="17" height="17" 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>}>App Store</Button>
            <span onClick={() => document.getElementById("how-it-works")?.scrollIntoView({ behavior: "smooth" })} style={{ cursor: "pointer", display: "inline-flex" }}><Button size="lg" variant="outline" onDark>See how it works</Button></span>
          </div>
          <div style={{ display: "flex", gap: 30, marginTop: 38 }}>
            {[["100%", "on-device"], ["8", "workout families"], ["0", "data leaves device"]].map(([n, l], i) => (
              <React.Fragment key={i}>
                {i > 0 && <div style={{ width: 1, background: "rgba(255,255,255,.1)" }} />}
                <div><div style={{ fontSize: 26, fontWeight: 700, color: "#fff", letterSpacing: "-1px", fontVariantNumeric: "tabular-nums" }}>{n}</div><div style={{ fontSize: 12.5, color: "#80808a", marginTop: 2 }}>{l}</div></div>
              </React.Fragment>
            ))}
          </div>
        </div>
        {/* phone */}
        <div style={{ flex: "0 0 auto", position: "relative" }}>
          <div style={{ position: "relative", width: 300, height: 612, background: "#000", borderRadius: 46, padding: 9, boxShadow: "0 2px 4px rgba(0,0,0,.4), 0 40px 80px -28px rgba(14,14,18,.55)" }}>
            <div style={{ width: "100%", height: "100%", background: "var(--pac-ash)", borderRadius: 38, overflow: "hidden", display: "flex", flexDirection: "column" }}>
              <div style={{ height: 40, display: "flex", alignItems: "flex-end", justifyContent: "space-between", padding: "0 24px 7px", position: "relative" }}>
                <span style={{ fontSize: 13, fontWeight: 600, color: "var(--pac-ink)", fontVariantNumeric: "tabular-nums" }}>9:41</span>
                <div style={{ position: "absolute", left: "50%", top: 7, transform: "translateX(-50%)", width: 84, height: 23, background: "#000", borderRadius: 14 }} />
                <span style={{ fontSize: 11, color: "var(--pac-ink)", fontWeight: 600 }}>▮▮▮</span>
              </div>
              <div style={{ flex: 1, overflow: "hidden", padding: "8px 15px 0" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div>
                    <div style={{ fontSize: 11, color: "var(--pac-grey-400)", fontWeight: 500 }}>Good afternoon</div>
                    <div style={{ fontSize: 23, fontWeight: 700, letterSpacing: "-.8px", color: "var(--pac-ink)", marginTop: 1 }}>Workouts</div>
                  </div>
                  <span style={{ fontSize: 9, fontWeight: 700, color: "var(--pac-success-ink)", background: "var(--pac-tint-success)", padding: "3px 8px", borderRadius: 999, marginTop: 4 }}>● synced just now</span>
                </div>
                <div style={{ background: "#fff", borderRadius: 16, padding: "11px 12px", marginTop: 10, boxShadow: "0 10px 24px -18px rgba(14,14,18,.3)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}><span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: ".5px", color: "var(--pac-grey-300)" }}>READINESS</span><span style={{ fontSize: 10, fontWeight: 700, color: "var(--pac-accent)" }}>● Steady</span></div>
                  <div style={{ display: "flex", justifyContent: "space-around", marginTop: 9 }}>
                    <ReadinessRing value={57} label="Calm" color="var(--pac-success)" size={46} />
                    <ReadinessRing value={55} label="Recovery" color="var(--pac-accent)" size={46} />
                    <ReadinessRing value={74} label="Sleep" color="var(--pac-aerobic)" size={46} />
                  </div>
                  <div style={{ display: "flex", gap: 6, marginTop: 9 }}>
                    <span style={{ color: "var(--pac-accent)", fontWeight: 800, fontSize: 11, lineHeight: 1.3 }}>›››</span>
                    <span style={{ fontSize: 10.5, lineHeight: 1.38, color: "var(--pac-grey-600)" }}>You're in a steady zone. Today's session is on — keep the warm-up honest and let the pace come to you.</span>
                  </div>
                </div>
                <div style={{ background: "var(--pac-ink)", borderRadius: 16, padding: "12px 13px", marginTop: 10, boxShadow: "0 12px 26px -18px rgba(14,14,18,.4)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}><span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: ".6px", color: "var(--pac-accent-soft)", textTransform: "uppercase" }}>Goal · Half</span><span style={{ fontSize: 10.5, color: "#9b9ba4", fontVariantNumeric: "tabular-nums" }}>Oct 12 · 38 days out</span></div>
                  <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-1.8px", color: "#fff", marginTop: 6, lineHeight: .95, fontVariantNumeric: "tabular-nums" }}>Sub-1:50</div>
                  <div style={{ fontSize: 10.5, color: "#9b9ba4", marginTop: 3, fontVariantNumeric: "tabular-nums" }}>Best 1:54:30 · needs 5:12/km</div>
                  <div style={{ marginTop: 11 }}><ProgressBar value={68} onDark startLabel="1:54:30" midLabel="On track" endLabel="1:50:00" /></div>
                </div>
                <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: ".5px", color: "var(--pac-grey-300)", margin: "13px 0 6px" }}>TODAY</div>
                <div style={{ background: "#fff", borderRadius: 13, padding: "11px 12px", borderLeft: "3px solid var(--pac-aerobic)", boxShadow: "0 10px 24px -18px rgba(14,14,18,.3)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}><span style={{ fontSize: 9, fontWeight: 700, color: "var(--pac-aerobic)", background: "var(--pac-tint-aerobic)", padding: "2px 7px", borderRadius: 6 }}>Aerobic</span><span style={{ fontSize: 10, color: "var(--pac-grey-400)", fontVariantNumeric: "tabular-nums" }}>8:00 AM</span></div>
                  <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: "-.5px", color: "var(--pac-ink)", marginTop: 7 }}>Easy 6 km <span style={{ fontSize: 11, fontWeight: 500, color: "var(--pac-grey-400)" }}>@ easy</span></div>
                  <div style={{ fontSize: 10.5, color: "var(--pac-grey-500)", marginTop: 2 }}>Z2, HR 148–160 · comfortable mid-week run</div>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: "var(--pac-success-ink)", background: "var(--pac-tint-success)", borderRadius: 9, padding: "7px 0", textAlign: "center", marginTop: 8 }}>✓ On Apple Watch</div>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", margin: "13px 0 6px" }}><span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: ".5px", color: "var(--pac-grey-300)" }}>UPCOMING</span><span style={{ fontSize: 9.5, fontWeight: 700, color: "var(--pac-grey-300)" }}>4</span></div>
                {[["Easy 7 km + 4 strides", "Tomorrow"], ["Easy 5 km (pre-long)", "Fri"]].map(([t, d], i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", background: "#fff", borderRadius: 11, padding: "9px 11px", marginBottom: 6, boxShadow: "0 8px 20px -18px rgba(14,14,18,.25)" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--pac-aerobic)" }} /><span style={{ fontSize: 12, fontWeight: 600, color: "var(--pac-ink)" }}>{t}</span></div>
                    <span style={{ fontSize: 10, color: "var(--pac-grey-400)" }}>{d}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div style={{ position: "absolute", right: -44, bottom: 34 }}><WatchFace width={128} height={154} /></div>
        </div>
        </div>
      </div>

      {/* FEATURES */}
      <div style={{ background: "var(--pac-ash)" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "72px 52px" }}>
        <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto" }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent)", textTransform: "uppercase" }}>Everything the coach does</div>
          <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: "-1.8px", color: "var(--pac-ink)", margin: "12px 0 0" }}>One coach. Your whole training block.</h2>
        </div>
        <div className="pac-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 48 }}>
          {features.map((f, 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: f.tint, display: "flex", alignItems: "center", justifyContent: "center" }}>{f.icon}</span>
              <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-.4px", color: "var(--pac-ink)", margin: "18px 0 0" }}>{f.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--pac-grey-500)", margin: "9px 0 0" }}>{f.body}</p>
            </div>
          ))}
        </div>
        </div>
      </div>

      {/* HOW IT WORKS */}
      <div id="how-it-works" style={{ background: "#fff" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "72px 52px" }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent)", textTransform: "uppercase" }}>How it works</div>
          <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: "-1.8px", color: "var(--pac-ink)", margin: "12px 0 0" }}>Four steps, then just run.</h2>
        </div>
        <div className="pac-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, marginTop: 48 }}>
          {steps.map(([n, t, b], i) => (
            <div key={i}>
              <div style={{ fontSize: 13, fontWeight: 800, color: "var(--pac-accent)", fontVariantNumeric: "tabular-nums" }}>{n}</div>
              <h3 style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-.3px", color: "var(--pac-ink)", margin: "10px 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>

      {/* COACH SPOTLIGHT */}
      <div style={{ background: "var(--pac-ink)" }}>
        <div className="pac-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "72px 52px" }}>
        <div style={{ display: "flex", gap: 56, alignItems: "center" }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "1px", color: "var(--pac-accent-soft)", textTransform: "uppercase" }}>The coach, in conversation</div>
            <h2 style={{ fontSize: 40, fontWeight: 700, letterSpacing: "-1.6px", color: "#fff", margin: "12px 0 0", maxWidth: 440 }}>It explains the plan in your own data.</h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "#a9a9b2", margin: "18px 0 0", maxWidth: 430 }}>No generic advice. Ask anything — the coach replies with your mileage, your drift, your sleep, and adjusts the week on the spot.</p>
          </div>
          <div style={{ flex: "0 0 420px", display: "flex", flexDirection: "column", gap: 12 }}>
            <ChatBubble from="coach" text="HR drift on Monday's tempo was just 4.2% — your aerobic base is holding well through this block." 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 — I've softened tomorrow to a true easy 8 km under 142 bpm so we protect Thursday's threshold." />
          </div>
        </div>
        </div>
      </div>
    </div>
  );
};