// PRS 3.0 surface — real marketing copy, image slideshow, 🍅 logo
const { useState: useSt, useEffect: useEf } = React;
const useIsMobile = window.useIsMobile;

// ── Lightbox ─────────────────────────────────────────────────────────────
function Lightbox({ images, startIndex, onClose }) {
  const [idx, setIdx] = useSt(startIndex);
  const [zoom, setZoom] = useSt(1);
  const [pan, setPan] = useSt({ x: 0, y: 0 });
  const [dragging, setDragging] = useSt(false);
  const dragStart = React.useRef({ x: 0, y: 0, panX: 0, panY: 0 });

  const resetPan = () => setPan({ x: 0, y: 0 });

  useEf(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") { setZoom(1); resetPan(); setIdx(i => (i + 1) % images.length); }
      if (e.key === "ArrowLeft")  { setZoom(1); resetPan(); setIdx(i => (i - 1 + images.length) % images.length); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [images.length]);

  const prev = (e) => { e.stopPropagation(); setZoom(1); resetPan(); setIdx(i => (i - 1 + images.length) % images.length); };
  const next = (e) => { e.stopPropagation(); setZoom(1); resetPan(); setIdx(i => (i + 1) % images.length); };

  // Drag handlers (mouse)
  const onPointerDown = (e) => {
    if (zoom <= 1) return;
    e.preventDefault();
    setDragging(true);
    dragStart.current = { x: e.clientX, y: e.clientY, panX: pan.x, panY: pan.y };
  };
  const onPointerMove = (e) => {
    if (!dragging) return;
    setPan({
      x: dragStart.current.panX + (e.clientX - dragStart.current.x),
      y: dragStart.current.panY + (e.clientY - dragStart.current.y),
    });
  };
  const onPointerUp = () => setDragging(false);

  useEf(() => {
    if (dragging) {
      window.addEventListener("pointermove", onPointerMove);
      window.addEventListener("pointerup", onPointerUp);
      return () => {
        window.removeEventListener("pointermove", onPointerMove);
        window.removeEventListener("pointerup", onPointerUp);
      };
    }
  }, [dragging, pan]);

  const btnStyle = (extra) => ({
    background: "rgba(255,255,255,0.15)", backdropFilter: "blur(8px)",
    border: "1px solid rgba(255,255,255,0.22)", borderRadius: "50%",
    width: 48, height: 48, display: "flex", alignItems: "center", justifyContent: "center",
    cursor: "pointer", color: "#fff", fontSize: 22, fontWeight: 300, ...extra,
  });

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.92)", zIndex: 9999,
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      {/* Image */}
      <div onClick={e => e.stopPropagation()}
        onPointerDown={onPointerDown}
        style={{
          transition: dragging ? "none" : "transform 200ms ease",
          transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
          display: "flex", alignItems: "center", justifyContent: "center",
          cursor: zoom > 1 ? (dragging ? "grabbing" : "grab") : "default",
          touchAction: "none",
        }}>
        <img src={images[idx]} alt={`Image ${idx + 1}`}
          style={{ maxWidth: "88vw", maxHeight: "84vh", objectFit: "contain", borderRadius: 10, display: "block", userSelect: "none", pointerEvents: "none" }}/>
      </div>

      {/* Prev / Next */}
      {images.length > 1 && (
        <button onClick={prev} style={{ ...btnStyle({ position: "fixed", left: 20, top: "50%", transform: "translateY(-50%)" }) }}>‹</button>
      )}
      {images.length > 1 && (
        <button onClick={next} style={{ ...btnStyle({ position: "fixed", right: 20, top: "50%", transform: "translateY(-50%)" }) }}>›</button>
      )}

      {/* Top-right controls */}
      <div onClick={e => e.stopPropagation()} style={{ position: "fixed", top: 16, right: 16, display: "flex", gap: 8 }}>
        {[
          { label: "+", action: () => setZoom(z => Math.min(z + 0.25, 3)) },
          { label: "−", action: () => { const nz = Math.max(zoom - 0.25, 0.5); setZoom(nz); if (nz <= 1) resetPan(); } },
          { label: "✕", action: onClose },
        ].map(({ label, action }) => (
          <button key={label} onClick={action} style={{
            background: "rgba(255,255,255,0.15)", backdropFilter: "blur(8px)",
            border: "1px solid rgba(255,255,255,0.22)", borderRadius: 8,
            width: 36, height: 36, cursor: "pointer", color: "#fff", fontSize: 16,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>{label}</button>
        ))}
      </div>

      {/* Counter */}
      {images.length > 1 && (
        <div style={{
          position: "fixed", bottom: 20, left: "50%", transform: "translateX(-50%)",
          color: "rgba(255,255,255,0.55)", fontSize: 13, fontFamily: "var(--font-mono)", letterSpacing: "0.1em",
        }}>{idx + 1} / {images.length}</div>
      )}
    </div>
  );
}

// ── Slideshow — auto-advance, click to open lightbox ─────────────────────
function Slideshow({ images, alt, ratio = "16/10", interval = 3500, onImageClick }) {
  const [i, setI] = useSt(0);
  useEf(() => {
    const t = setInterval(() => setI(p => (p + 1) % images.length), interval);
    return () => clearInterval(t);
  }, [images.length, interval]);
  return (
    <div onClick={() => onImageClick && onImageClick(i)}
      style={{ position: "relative", width: "100%", aspectRatio: ratio, borderRadius: 20, border: "1px solid var(--border)", background: "var(--bg-muted)", overflow: "hidden", cursor: "zoom-in" }}>
      {images.map((src, idx) => (
        <img key={src} src={src} alt={`${alt} ${idx + 1}`}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
            opacity: i === idx ? 1 : 0, transition: "opacity 600ms ease" }}/>
      ))}
      <div onClick={e => e.stopPropagation()}
        style={{ position: "absolute", bottom: 12, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 6, zIndex: 2 }}>
        {images.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)} aria-label={`Slide ${idx + 1}`}
            style={{ width: i === idx ? 24 : 8, height: 8, borderRadius: 4, border: "none",
              background: i === idx ? "var(--brand-primary)" : "rgba(22,59,107,0.25)",
              cursor: "pointer", transition: "all 300ms ease", padding: 0 }}/>
        ))}
      </div>
    </div>
  );
}

// ── Workflow image panel — hover scale + click to open lightbox ───────────
function WorkflowImage({ src, alt, onClick }) {
  const [hov, setHov] = useSt(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ background: "var(--bg-muted)", borderLeft: "1px solid var(--border)", padding: 12,
        display: "flex", alignItems: "center", justifyContent: "center", cursor: "zoom-in", overflow: "hidden" }}>
      <img src={src} alt={alt}
        style={{ width: "100%", height: "100%", objectFit: "contain", maxHeight: 200,
          transition: "transform 300ms ease, opacity 300ms ease",
          transform: hov ? "scale(1.06)" : "scale(1)",
          opacity: hov ? 0.85 : 1 }}/>
    </div>
  );
}

// ── Principle card with hover highlight ──────────────────────────────────
function PrincipleCard({ t, x, I }) {
  const [h, setH] = useSt(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        borderRadius: 20, border: "1px solid var(--border)",
        background: h ? "var(--brand-primary)" : "var(--bg-muted)",
        padding: 24, transition: "all 200ms ease", cursor: "default",
      }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{ width: 40, height: 40, borderRadius: 14, border: "1px solid var(--border)",
          background: h ? "rgba(255,255,255,0.15)" : "#fff",
          color: h ? "#fff" : "var(--brand-primary)",
          display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
          transition: "all 200ms ease" }}><I size={16}/></div>
        <h3 style={{ margin: 0, fontSize: 18, fontWeight: 500, letterSpacing: "-0.04em",
          color: h ? "#fff" : "var(--brand-primary)", transition: "color 200ms ease" }}>{t}</h3>
      </div>
      <p style={{ margin: 0, marginTop: 14, fontSize: 15, lineHeight: 1.7,
        color: h ? "rgba(255,255,255,0.72)" : "var(--fg-3)", transition: "color 200ms ease" }}>{x}</p>
    </div>
  );
}

// ── Stack card with hover highlight ─────────────────────────────────────
function StackCard({ n, r }) {
  const [h, setH] = useSt(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        background: h ? "var(--brand-primary)" : "#fff",
        border: "1px solid var(--border)", borderRadius: 20, padding: 24,
        transition: "all 200ms ease", cursor: "default",
      }}>
      <p style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.03em", color: h ? "#fff" : "var(--brand-primary)", transition: "color 200ms ease" }}>{n}</p>
      <p style={{ marginTop: 6, fontSize: 14, color: h ? "rgba(255,255,255,0.72)" : "var(--fg-3)", lineHeight: 1.55, transition: "color 200ms ease" }}>{r}</p>
    </div>
  );
}

// ── PRS Surface ───────────────────────────────────────────────────────────
function PrsSurface({ goto }) {
  const isMobile = useIsMobile();
  const prsImages = [1,2,3,4].map(n => `../../assets/prs/main-${n}.png`).concat(["../../assets/prs/resting-tasks.png"]);
  const drsImages = [1,2,3,4,5].map(n => `../../assets/drs/main-${n}.png`);
  const wrsImages = [1,2,3,4,5,6,7].map(n => `../../assets/wrs/main-${n}.png`);

  const [lightbox, setLightbox] = useSt(null);
  const openLightbox = (images, index) => setLightbox({ images, index });
  const closeLightbox = () => setLightbox(null);

  const exp = [
    { title: "Session Tracker (PRS)", text: "Log every focus session with task, priority, energy, distractions, and time lost. Every Pomodoro becomes a data point.", Icon: Brain, images: prsImages },
    { title: "Daily Dashboard (DRS)", text: "Aggregates sessions, surfaces metrics, identifies patterns, and exports clean prompts you can hand to any AI for daily debriefs.", Icon: Chart, images: drsImages },
    { title: "Weekly Rewards (WRS)", text: "Track weekly totals against a 18–21h focus target and unlock guilt-free rewards based on what the data actually says.", Icon: Sparkles, images: wrsImages },
  ];

  const principles = [
    { t: "Data-driven accountability", x: "Stop guessing how much you focused. The system shows you exactly where the hours went.", I: Chart },
    { t: "Guilt-free rest", x: "Rewards are earned, not claimed. Once the weekly target is hit, rest is proof of progress.", I: Check },
    { t: "Pattern recognition", x: "Your best energy windows and worst distraction triggers stop being mysteries — they become visible.", I: Brain },
    { t: "Executive function support", x: "HMIT priorities reduce decision fatigue. The system tells you what to do next.", I: Zap },
  ];

  const gameFeatures = [
    { I: Sparkles, t: "Points per session", d: "Each completed Pomodoro earns points weighted by HMIT tier. Higher-priority work counts more." },
    { I: Zap, t: "Streak multipliers", d: "Daily focus streaks compound. Miss a day, the multiplier resets — but the lifetime score doesn't." },
    { I: Check, t: "Reward unlocks", d: "Hit the weekly threshold and the reward tier auto-unlocks. The system tells you what you've earned." },
    { I: Brain, t: "Resting tasks", d: "Low-effort, high-recovery tasks that count too — so rest stops feeling like cheating." },
  ];

  const workflowSteps = [
    { n: "01", t: "Capture",   d: "Tap the task. Timer starts. Distractions logged inline." },
    { n: "02", t: "Aggregate", d: "Make.com pulls every session into Notion at midnight." },
    { n: "03", t: "Analyze",   d: "Daily Dashboard surfaces patterns and AI-ready prompts." },
    { n: "04", t: "Reward",    d: "Weekly target hit — rest is earned, on the record, no guilt." },
  ];

  const videos = [
    { id: "oDzYk7klnCs", t: "Track every focus session in 10 seconds",
      d: "Tap. Type. Timer starts. Log distractions. Session ends. Data captured. Repeat for every task, every day." },
    { id: "KW0o6MHfAtc", t: "Automation turns data into insights",
      d: "Midnight: Make.com pulls every timer into Notion. Morning: AI shows me patterns I'd never see. No guessing." },
    { id: "ia55k7Y2rQM", t: "I earned 4 hours of Netflix this week",
      d: "21 hours of focus. The system calculated the reward tier. Not my mood, not my guilt — just data." },
    { id: "MmFptdn7F18", t: "Not all tasks are equal — HMIT ranking",
      d: "HMIT 1 moves the needle. HMIT 5 you timebox or lose your day. At day's end, you see where focus actually went." },
  ];

  return (
    <main style={{ background: "var(--bg)", color: "var(--fg-1)", minHeight: "100vh" }}>
      {lightbox && <Lightbox images={lightbox.images} startIndex={lightbox.index} onClose={closeLightbox}/>}

      {/* ── Hero ── */}
      <HeroBG>
        <Container pad="hero">
          <header style={{ display: "flex", alignItems: "center", paddingBottom: 20, borderBottom: "1px solid var(--border)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{ width: 48, height: 48, border: "1px solid var(--border)", borderRadius: 14, display: "flex", alignItems: "center", justifyContent: "center", background: "#fff", fontSize: 24 }}>🍅</div>
              <h1 style={{ fontSize: 16, fontWeight: 500, letterSpacing: "-0.04em", color: "var(--brand-primary)" }}>Pomodoro Reward System 3.0</h1>
            </div>
          </header>

          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.05fr 0.95fr", gap: 48, padding: isMobile ? "32px 0" : "56px 0", alignItems: "center" }}>
            <div style={{ maxWidth: 620 }}>
              <p style={{ fontSize: "0.78rem", fontWeight: 600, color: "var(--brand-primary)", letterSpacing: "0.2em", textTransform: "uppercase" }}>$5 · one-time · lifetime updates</p>
              <Hairline maxWidth={isMobile ? "100%" : 300}/>
              <h2 style={{ fontSize: isMobile ? 44 : 64, fontWeight: 500, letterSpacing: "-0.06em", color: "var(--brand-primary)", lineHeight: 1.02 }}>
                Track the truth.<br/>Earn your freedom.<br/>
                <span style={{ color: "var(--fg-4)" }}>Claim your reward.</span>
              </h2>
              <p style={{ marginTop: 20, color: "var(--fg-3)", fontSize: 18, lineHeight: 1.75, maxWidth: 540 }}>
                A Notion-based productivity OS built for deep work and absolute focus. 360+ days battle-tested. Zero data collection. Runs entirely on free tools.
              </p>
              
              <div style={{ marginTop: 28, display: "flex", flexDirection: isMobile ? "column" : "row", gap: 14, width: "100%" }}>
                <div style={{ width: isMobile ? "100%" : "auto" }}>
                  <Button href="https://zohaib26.gumroad.com/l/blvfug" size="lg" icon={<ArrowRight size={16}/>} style={isMobile ? { width: "100%", display: "flex", justifyContent: "center" } : {}}>Get PRS 3.0 — $5</Button>
                </div>
              </div>
              
              <div style={{ marginTop: 28, display: "flex", flexDirection: isMobile ? "column" : "row", gap: 10, width: "100%" }}>
                {["360+ days tested", "No subscriptions", "20-minute setup"].map(s => (
                  <div key={s} style={isMobile ? { width: "100%", display: "flex" } : {}}>
                    <StatPill style={isMobile ? { width: "100%", textAlign: "center", justifyContent: "center" } : {}}>{s}</StatPill>
                  </div>
                ))}
              </div>
              
              <div style={{ marginTop: 14, display: "flex", flexDirection: isMobile ? "column" : "row", gap: 8, width: "100%" }}>
                {[
                  { icon: <Check size={14}/>, text: "Zero data collection" },
                  { icon: <Zap size={14}/>, text: "Runs on free tools" },
                  { icon: <Brain size={14}/>, text: "ADHD-friendly" }
                ].map(c => (
                  <div key={c.text} style={isMobile ? { width: "100%", display: "flex" } : {}}>
                    <Chip icon={c.icon} style={isMobile ? { width: "100%", justifyContent: "center" } : {}}>{c.text}</Chip>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ borderRadius: 24, border: "1px solid var(--border)", overflow: "hidden", background: "#fff", boxShadow: "0 8px 32px rgba(22,59,107,0.10)", order: isMobile ? -1 : 0 }}>
              <img src="../../assets/cover/cover-1.jpeg" alt="PRS 3.0 cover" style={{ width: "100%", height: "auto", display: "block" }}/>
            </div>
          </div>
        </Container>
      </HeroBG>

      {/* ── Three Connected Systems ── */}
      <Container pad="section">
        <SectionHead kicker="Three connected systems" title="One ecosystem" description="PRS logs the session. DRS shows you the day. WRS turns the week into earned rest. Each layer feeds the next."/>
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 24 }}>
          {exp.map(c => {
            const I = c.Icon;
            return (
              <FolioCard key={c.title}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 14, border: "1px solid var(--border)", background: "var(--bg-muted)", color: "var(--brand-primary)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><I size={18}/></div>
                  <h3 style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.04em", color: "var(--brand-primary)" }}>{c.title}</h3>
                </div>
                <Slideshow images={c.images} alt={c.title} ratio="3/2" interval={3200 + Math.random() * 800}
                  onImageClick={(idx) => openLightbox(c.images, idx)}/>
                <p style={{ color: "var(--fg-3)", fontSize: 15, lineHeight: 1.7 }}>{c.text}</p>
              </FolioCard>
            );
          })}
        </div>
      </Container>

      {/* ── Priority Logic ── */}
      <Container pad="compact">
        <SectionHead kicker="Priority logic" title="Not all tasks are equal — meet HMIT" description="HMIT is the priority scale that drives every session. Five tiers, color-coded, applied at the moment you start a timer. At day's end, you can see exactly which tier ate your focus."/>
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.1fr", gap: 32, alignItems: "start" }}>
          <div style={{ borderRadius: 24, border: "1px solid var(--border)", background: "#fff", padding: 28, display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              { n: "HMIT 1", c: "#e63946", t: "Moves the needle",        d: "Direct work on your top goal. The stuff that, if missed for a week, costs you weeks of progress." },
              { n: "HMIT 2", c: "#0ea5e9", t: "Strategic support",        d: "Work that enables HMIT 1. Planning, research, prep that makes the needle move easier." },
              { n: "HMIT 3", c: "#f59e0b", t: "Maintenance mode",         d: "Things that have to happen — but don't grow anything. Email, admin, recurring chores." },
              { n: "HMIT 4", c: "#84cc16", t: "Low-friction wins",        d: "Quick, easy, satisfying. Use to build momentum on a bad day, not to fill a good one." },
              { n: "HMIT 5", c: "#9ca3af", t: "Timebox or lose your day", d: "Browsing, doomscrolling, low-value rabbit holes. Allowed — only inside a hard time-box." },
            ].map(h => (
              <div key={h.n} style={{ display: "flex", flexDirection: isMobile ? "column" : "row", gap: isMobile ? 8 : 16, alignItems: "flex-start", padding: "12px 0", borderBottom: "1px solid var(--border)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, width: isMobile ? "auto" : 114, flexShrink: 0, marginTop: isMobile ? 0 : 2 }}>
                  <span style={{ width: 14, height: 14, borderRadius: 4, background: h.c, flexShrink: 0 }}/>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 600, color: "var(--brand-primary)", letterSpacing: "0.1em" }}>{h.n}</span>
                </div>
                <div style={{ flex: 1 }}>
                  <p style={{ margin: 0, fontSize: 16, fontWeight: 500, color: "var(--brand-primary)", letterSpacing: "-0.02em", lineHeight: 1.2 }}>{h.t}</p>
                  <p style={{ margin: 0, marginTop: 4, fontSize: 13, color: "var(--fg-3)", lineHeight: 1.55 }}>{h.d}</p>
                </div>
              </div>
            ))}
            <p style={{ marginTop: 8, fontSize: 13, color: "var(--fg-4)", lineHeight: 1.55 }}>
              Set the tier when you start the timer. Done.
            </p>
          </div>
          <div style={{ borderRadius: 24, border: "1px solid var(--border)", background: "#fff", overflow: "hidden", padding: 16 }}>
            <img src="../../assets/energy-dominance-chart.png" alt="HMIT vs energy"
              style={{ width: "100%", height: "auto", display: "block", borderRadius: 12, transform: "scale(1.20)", transformOrigin: "center" }}/>
          </div>
        </div>
      </Container>

      {/* ── PRS Game — same style as Priority Logic: SectionHead + 2-col (text left, image right) ── */}
      <Container pad="compact">
        <SectionHead kicker="The PRS Game" title="Make the system feel like a game" description="The PRS Game is the gamified layer that sits on top of your tracking. Earn points per session, hit streak multipliers, unlock weekly reward tiers. The whiteboard view turns a productivity system into something you actually want to open every morning."/>
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.1fr", gap: 32, alignItems: "start" }}>
          {/* Left: feature list */}
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {gameFeatures.map(c => {
              const I = c.I;
              return (
                <div key={c.t} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <div style={{ width: 36, height: 36, borderRadius: 12, border: "1px solid var(--border)", background: "var(--bg-muted)", color: "var(--brand-primary)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><I size={16}/></div>
                  <div>
                    <p style={{ margin: 0, marginTop: 8, fontSize: 17, fontWeight: 500, color: "var(--brand-primary)", letterSpacing: "-0.02em", lineHeight: 1.2 }}>{c.t}</p>
                    <p style={{ margin: 0, marginTop: 6, fontSize: 14, color: "var(--fg-3)", lineHeight: 1.6 }}>{c.d}</p>
                  </div>
                </div>
              );
            })}
          </div>
          {/* Right: whiteboard image */}
          <div style={{ borderRadius: 24, border: "1px solid var(--border)", background: "#fff", overflow: "hidden", padding: 16 }}>
            <img src="../../assets/prs/whiteboard-game.png" alt="PRS Game whiteboard"
              style={{ width: "100%", height: "auto", display: "block", borderRadius: 12 }}/>
          </div>
        </div>
      </Container>

      {/* ── Why it works ── */}
      <Container pad="compact">
        <SectionHead kicker="Why it works" title="Built for the brain you actually have" description="Not another shame-driven productivity app. PRS 3.0 supports executive function, makes patterns visible, and turns rest into something you can prove you earned."/>
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 24 }}>
          {principles.map(c => <PrincipleCard key={c.t} t={c.t} x={c.x} I={c.I}/>)}
        </div>
      </Container>

      {/* ── The Stack ── */}
      <Container pad="tight">
        <SectionHead kicker="The stack" title="Built on tools you already use"/>
        <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 16 }}>
          {[
            { n: "Notion",      r: "Database & dashboards" },
            { n: "Toggl Track", r: "Pomodoro timer" },
            { n: "Make.com",    r: "Automation glue" },
            { n: "Any AI",      r: "Claude · ChatGPT · Gemini for debriefs" },
          ].map(t => <StackCard key={t.n} n={t.n} r={t.r}/>)}
        </div>
      </Container>

      {/* ── Workflow ── */}
      <Container pad="compact">
        <SectionHead kicker="The workflow" title="How a session moves through the system" description="Four steps. Same flow, every time. The system catches the data — your only job is to start the timer."/>
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 16 }}>
          {workflowSteps.map((s, idx) => {
            const imgSrc = `../../assets/workflow/${idx + 1}.png`;
            return (
              <div key={s.n} style={{ borderRadius: 20, border: "1px solid var(--border)", background: "#fff", overflow: "hidden", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr" }}>
                <div style={{ padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                  <div>
                    <p style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-4)", letterSpacing: "0.2em" }}>STEP {s.n}</p>
                    <h3 style={{ marginTop: 12, fontSize: 24, fontWeight: 500, letterSpacing: "-0.04em", color: "var(--brand-primary)" }}>{s.t}</h3>
                    <p style={{ marginTop: 10, color: "var(--fg-3)", fontSize: 14, lineHeight: 1.65 }}>{s.d}</p>
                  </div>
                </div>
                <WorkflowImage src={imgSrc} alt={`Workflow step ${s.n}`} onClick={() => openLightbox([imgSrc], 0)}/>
              </div>
            );
          })}
        </div>
      </Container>

      {/* ── Videos ── */}
      <Container pad="compact">
        <SectionHead kicker="See it in action" title="The system, on video" description="Four short clips of how I actually use PRS day to day — tracking, automation, weekly rewards, and HMIT priorities."/>
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 20 }}>
          {videos.map(v => (
            <div key={v.id} style={{ borderRadius: 24, border: "1px solid var(--border)", background: "#fff", overflow: "hidden", boxShadow: "0 1px 0 rgba(15,23,42,0.02)" }}>
              <div style={{ aspectRatio: "9/16", background: "#000", position: "relative" }}>
                <iframe
                  src={`https://www.youtube.com/embed/${v.id}?rel=0&modestbranding=1`}
                  title={v.t} loading="lazy"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}/>
              </div>
              <div style={{ padding: 20 }}>
                <h3 style={{ fontSize: 16, fontWeight: 500, letterSpacing: "-0.03em", color: "var(--brand-primary)", lineHeight: 1.3 }}>{v.t}</h3>
                <p style={{ marginTop: 8, color: "var(--fg-3)", fontSize: 13, lineHeight: 1.6 }}>{v.d}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>

      {/* ── CTA ── */}
      <Container pad="section">
        <div style={{ borderRadius: 32, padding: isMobile ? 32 : 56, position: "relative", overflow: "hidden",
          background: "linear-gradient(135deg,#ffffff 0%,#ffffff 46%,#f5f7fb 46%,#f5f7fb 100%)",
          textAlign: isMobile ? "center" : "left", display: "flex", flexDirection: "column", alignItems: isMobile ? "center" : "flex-start" }}>
          <h2 style={{ fontSize: isMobile ? 44 : 64, fontWeight: 500, letterSpacing: "-0.06em", color: "var(--brand-primary)", maxWidth: 900, lineHeight: 1.05 }}>
            Five dollars. One system.<br/><span style={{ color: "var(--fg-4)" }}>360+ days of evidence.</span>
          </h2>
          <p style={{ marginTop: 24, color: "var(--fg-3)", fontSize: 18, lineHeight: 1.75, maxWidth: 620 }}>
            For people who already know what to do — and are tired of not doing it. One-time purchase, no subscription, no dashboard you have to maintain.
          </p>
          <div style={{ marginTop: 36, display: "flex", flexDirection: isMobile ? "column" : "row", gap: 14, width: isMobile ? "100%" : "auto" }}>
            <Button href="https://zohaib26.gumroad.com/l/blvfug" size="lg" icon={<ArrowRight size={16}/>} style={isMobile ? { width: "100%", display: "flex", justifyContent: "center" } : {}}>Get PRS 3.0 — $5</Button>
          </div>
        </div>
      </Container>

      <Footer onNav={goto}/>
    </main>
  );
}
window.PrsSurface = PrsSurface;