/* global React, Glyph, ReoMark, SourceChip, AudienceTag, InsightCard, SkillCard,
   ChromeBar, ComplianceBadge, FAQItem, DemoModal, BuildYourOwn, HeroNav, DigestStill */
// reo-page.jsx — the committed full-bleed Reo landing page.
// 1366-wide canonical desktop. Renders inside a DCArtboard.

const { useState: useS } = React;

const PAGE_W = 1366;
const SECTION_PAD_X = 80;
const CONTAINER_MAX = 1206;

function Container({ children, style, className }) {
  return (
    <div className={`reo-section-container ${className || ""}`} style={{
      maxWidth: CONTAINER_MAX,
      margin: "0 auto",
      padding: `0 ${SECTION_PAD_X}px`,
      ...style
    }}>{children}</div>
  );
}

function Section({ eyebrow, eyebrowMeta, pad = [120, 120], bg, borderTop, borderBottom, children, id }) {
  return (
    <section id={id} style={{
      padding: `${pad[0]}px 0 ${pad[1]}px`,
      background: bg || "var(--paper)",
      borderTop: borderTop ? "1px solid var(--rule)" : "none",
      borderBottom: borderBottom ? "1px solid var(--rule)" : "none",
      position: "relative"
    }}>
      <Container>
        {(eyebrow || eyebrowMeta) && (
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            marginBottom: 28
          }}>
            {eyebrow && <span className="eyebrow">{eyebrow}</span>}
            {eyebrowMeta && (
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                color: "var(--ink-4)", letterSpacing: "0.06em"
              }}>{eyebrowMeta}</span>
            )}
          </div>
        )}
        {children}
      </Container>
    </section>
  );
}

/* ============================================================ Sections */

function PageNav({ onWaitlistClick }) {
  const goTo = (e, href) => {
    e.preventDefault();
    const el = document.querySelector(href);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  const navLinkStyle = {
    color: "var(--ink-3)",
    textDecoration: "none",
    fontFamily: "var(--font-mono)",
    fontSize: 11.5,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    whiteSpace: "nowrap",
    cursor: "pointer"
  };
  return (
    <header style={{
      borderBottom: "1px solid var(--rule)",
      background: "oklch(0.985 0.002 90 / 0.88)",
      backdropFilter: "blur(8px)",
      position: "sticky", top: 0, zIndex: 10
    }}>
      <div className="reo-section-container reo-nav-grid" style={{
        maxWidth: CONTAINER_MAX,
        margin: "0 auto",
        padding: `18px ${SECTION_PAD_X}px`,
        display: "grid",
        gridTemplateColumns: "1fr auto 1fr",
        alignItems: "center"
      }}>
        <div style={{ justifySelf: "start" }}>
          <ReoMark size={28} clickable/>
        </div>
        <nav className="reo-nav-links" style={{ display: "flex", gap: 44, justifySelf: "center" }}>
          {[
            {label: "How it works", href: "#how"},
            {label: "Agents",       href: "#skills"},
            {label: "Privacy",      href: "#privacy"},
            {label: "Security",     href: "#security"}
          ].map(item => (
            <a key={item.label} href={item.href}
              onClick={(e) => goTo(e, item.href)}
              style={navLinkStyle}>{item.label}</a>
          ))}
        </nav>
        <div style={{ justifySelf: "end" }}>
          <button onClick={onWaitlistClick}
            className="reo-nav-cta"
            style={{
              background: "var(--accent)",
              color: "var(--paper)",
              border: "1px solid var(--accent)",
              borderRadius: 999,
              padding: "11px 22px",
              fontFamily: "var(--font-mono)",
              fontSize: 11.5,
              letterSpacing: "0.16em",
              textTransform: "uppercase",
              cursor: "pointer",
              whiteSpace: "nowrap",
              fontWeight: 600,
              transition: "background 140ms, border-color 140ms, transform 140ms",
              boxShadow: "0 1px 0 var(--accent-tint-2)"
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--accent-2)";
              e.currentTarget.style.borderColor = "var(--accent-2)";
              e.currentTarget.style.transform = "translateY(-1px)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "var(--accent)";
              e.currentTarget.style.borderColor = "var(--accent)";
              e.currentTarget.style.transform = "translateY(0)";
            }}>
            Join Waitlist
          </button>
        </div>
      </div>
    </header>
  );
}

/* --- A. Hero (committed: "between" composition, refined) --- */
function Hero({ onWaitlistClick }) {
  return (
    <section id="top" style={{ padding: "72px 0 100px", background: "var(--paper)" }}>
      <Container style={{
        gap: 64, alignItems: "center", minHeight: 540,
        gridTemplateColumns: "minmax(440px, 510px) minmax(0, 1fr)"
      }} className="reo-section-container reo-hero-grid">
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <span className="eyebrow">Inference agents · for Gmail and Outlook</span>
          <h1 style={{
            fontSize: 64, lineHeight: 1.0,
            letterSpacing: "-0.03em", fontWeight: 450,
            margin: 0, color: "var(--ink)",
            textWrap: "balance"
          }}>
            Inference agents<br/>for your inbox.
          </h1>
          <p style={{
            fontSize: 22, lineHeight: 1.4,
            color: "var(--ink-2)", margin: 0,
            letterSpacing: "-0.012em", maxWidth: 500,
            textWrap: "pretty"
          }}>
            They read <em style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 500 }}>between</em> your emails — surfacing the patterns no single email reveals.
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 22, flexWrap: "wrap" }}>
            <button onClick={onWaitlistClick} className="reo-cta accent">
              Join the waitlist <span className="arrow"/>
            </button>
          </div>
          <div style={{
            display: "flex", alignItems: "center", gap: 16,
            paddingTop: 4, color: "var(--ink-4)",
            fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.04em"
          }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <GmailGlyph/> Works with Gmail
            </span>
            <span style={{ width: 1, height: 10, background: "var(--rule-2)" }}/>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <OutlookGlyph/> Works with Outlook
            </span>
          </div>
        </div>
        <BetweenComp/>
      </Container>
    </section>
  );
}

/* Tiny monochrome provider glyphs — not the trademarked colored marks */
function GmailGlyph() {
  return (
    <svg width="14" height="11" viewBox="0 0 24 18" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="1" y="1" width="22" height="16" rx="1"/>
      <path d="M1 1l11 9 11-9"/>
    </svg>
  );
}
function OutlookGlyph() {
  return (
    <svg width="14" height="11" viewBox="0 0 24 18" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="6" y="3" width="14" height="12" rx="1"/>
      <path d="M3 4l8 5 8-5"/>
      <rect x="3" y="3" width="8" height="12" rx="1" fill="currentColor" opacity="0.15"/>
    </svg>
  );
}

function BetweenComp() {
  // L1 experience: chip lives inline with the sender/timestamp row of a real
  // Gmail/Outlook thread. Clicking the chip reveals the inference popover.
  // We show both states at once — chip visible on the thread, popover open
  // beneath it — so the relationship reads in one glance.
  const threads = [
    {
      from: "Reza Karimi", co: "Acme",
      subj: "QBR Friday — quick SSO confirm?",
      excerpt: "Just prepping the deck for Friday — we're showing SSO live in Q4 to our security team. All good on your end?",
      date: "9:12 AM",
      unread: true,
      hasChip: true
    },
    {
      from: "You", to: "eng-leads",
      subj: "re: Q4 roadmap cuts",
      excerpt: "Approved. We're cutting SSO from Q4 to ship the export refactor first. SSO slides to Q1 at earliest.",
      date: "Sep 18",
      unread: false,
      hasChip: false
    },
    {
      from: "You", to: "Reza Karimi",
      subj: "re: expansion + SSO timeline",
      excerpt: "Yes, SSO is locked in for Q4 rollout — happy to put that in the renewal contract.",
      date: "Jul 14",
      unread: false,
      hasChip: false
    }
  ];

  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 720 }}>
      <div className="dotframe" style={{ padding: 22 }}>
        <span className="corner-bl"></span><span className="corner-br"></span>
        <span className="corner-label">INFERENCE · DRAWN FROM 3 THREADS</span>
        <span className="corner-meta">RENEWAL · AT RISK</span>

        {/* Gmail-style inbox surface */}
        <div style={{
          border: "1px solid var(--rule-2)",
          borderRadius: 6,
          background: "var(--paper)",
          overflow: "hidden",
          boxShadow: "0 1px 0 var(--rule)"
        }}>
          <ChromeBar title="Gmail · Inbox" right="12:47"/>
          <div style={{
            padding: "8px 16px",
            borderBottom: "1px solid var(--rule)",
            background: "var(--paper-2)",
            display: "flex", alignItems: "center", justifyContent: "space-between",
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--ink-3)", letterSpacing: "0.06em",
            textTransform: "uppercase"
          }}>
            <span>▾ Inbox</span>
            <span style={{ color: "var(--ink-4)" }}>3 of 47 today</span>
          </div>

          {threads.map((t, i) => (
            <div key={i} style={{
              padding: "12px 16px",
              borderBottom: i < threads.length - 1 ? "1px solid var(--rule)" : "none",
              background: t.unread ? "var(--paper)" : "var(--paper-2)",
              display: "flex", flexDirection: "column", gap: 4,
              position: "relative"
            }}>
              {/* sender + timestamp + L1 chip row */}
              <div style={{
                display: "flex", alignItems: "center", gap: 8
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: 50,
                  background: t.unread ? "var(--accent)" : "transparent",
                  border: t.unread ? "none" : "1px solid var(--rule-strong)",
                  flexShrink: 0
                }}/>
                <span style={{
                  fontSize: 13, color: "var(--ink)",
                  fontWeight: t.unread ? 600 : 500,
                  whiteSpace: "nowrap",
                  flexShrink: 0
                }}>
                  {t.from}
                  {t.co && <span style={{ color: "var(--ink-3)", fontWeight: 400 }}> · {t.co}</span>}
                  {t.to && <span style={{ color: "var(--ink-3)", fontWeight: 400 }}> → {t.to}</span>}
                </span>
                <span style={{ flex: 1 }}/>
                {t.hasChip && (
                  <span style={{
                    display: "inline-flex", alignItems: "center", gap: 5,
                    padding: "3px 8px",
                    background: "var(--accent-tint)",
                    border: "1px solid var(--accent-tint-2)",
                    borderRadius: 99,
                    fontFamily: "var(--font-mono)", fontSize: 10,
                    color: "var(--accent)", letterSpacing: "0.04em",
                    whiteSpace: "nowrap", flexShrink: 0, fontWeight: 600,
                    cursor: "pointer",
                    position: "relative"
                  }}>
                    <span style={{
                      width: 5, height: 5, borderRadius: 50, background: "var(--accent)"
                    }}/>
                    Reo
                  </span>
                )}
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 10.5,
                  color: "var(--ink-4)", letterSpacing: "0.02em",
                  whiteSpace: "nowrap", flexShrink: 0
                }}>{t.date}</span>
              </div>
              {/* subject */}
              <div style={{
                fontSize: 13, color: t.unread ? "var(--ink)" : "var(--ink-2)",
                fontWeight: t.unread ? 500 : 400, lineHeight: 1.35,
                paddingLeft: 14,
                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
              }}>{t.subj}</div>
              {/* preview */}
              <div style={{
                fontSize: 12, color: "var(--ink-3)", lineHeight: 1.4,
                paddingLeft: 14,
                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                fontStyle: "italic"
              }}>"{t.excerpt}"</div>
            </div>
          ))}
        </div>

        {/* dashed connector — chip → popover */}
        <svg width="100%" height="28" style={{ display: "block", marginTop: 2 }}
             viewBox="0 0 720 28" preserveAspectRatio="none">
          <path d="M 660 0 C 660 14, 360 14, 100 26"
            stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 3"
            fill="none" opacity="0.55"/>
          <circle cx="100" cy="26" r="2.5" fill="var(--accent)"/>
        </svg>

        {/* Inference popover — what appears when the chip is clicked */}
        <div style={{
          marginTop: 4,
          background: "var(--paper)",
          border: "1px solid var(--accent-tint-2)",
          borderRadius: 6,
          padding: "18px 20px",
          boxShadow: "0 0 0 4px var(--accent-tint), 0 8px 24px oklch(0.32 0.15 268 / 0.08)",
          position: "relative"
        }}>
          {/* tiny anchor triangle pointing up to the chip */}
          <span style={{
            position: "absolute", top: -6, left: 80,
            width: 10, height: 10,
            background: "var(--paper)",
            borderTop: "1px solid var(--accent-tint-2)",
            borderLeft: "1px solid var(--accent-tint-2)",
            transform: "rotate(45deg)"
          }}/>

          {/* agent badge row */}
          <div style={{
            display: "flex", alignItems: "center", gap: 10, marginBottom: 12
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 5,
              background: "var(--accent)", color: "var(--paper)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0
            }}>
              <Glyph name="clock" size={12} stroke={1.5}/>
            </span>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 10.5,
              color: "var(--accent)", letterSpacing: "0.08em",
              textTransform: "uppercase", fontWeight: 600
            }}>Reo</span>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 10.5,
              color: "var(--ink-3)", letterSpacing: "0.06em",
              textTransform: "uppercase"
            }}>Customer commitments tracker</span>
          </div>

          {/* inference headline */}
          <h3 style={{
            fontSize: 18, lineHeight: 1.35, margin: "0 0 12px 0",
            fontWeight: 500, letterSpacing: "-0.012em", color: "var(--ink)",
            textWrap: "pretty"
          }}>
            Acme expects SSO live in Q4 — your team cut it last week. Their QBR is Friday, and a <span style={{ color: "var(--accent)", fontWeight: 600 }}>$420K expansion</span> is on the line.
          </h3>

          {/* source chip */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }}>
            <SourceChip>3 threads · Jul 14 – today</SourceChip>
          </div>

          {/* footer: audience + actions */}
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 12, paddingTop: 12, borderTop: "1px dashed var(--rule)",
            flexWrap: "wrap"
          }}>
            <AudienceTag to="you only"/>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }}>
              <button style={{
                height: 30, padding: "0 14px",
                background: "transparent", color: "var(--ink-2)",
                border: "1px solid var(--rule-2)", borderRadius: 4,
                fontSize: 12, fontFamily: "var(--font-sans)", fontWeight: 500,
                cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0
              }}>Loop in eng</button>
              <button style={{
                height: 30, padding: "0 14px",
                background: "var(--ink)", color: "var(--paper)",
                border: "1px solid var(--ink)", borderRadius: 4,
                fontSize: 12, fontFamily: "var(--font-sans)", fontWeight: 500,
                cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0
              }}>Draft heads-up to Reza</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- A.5 Getting Started — three-step user journey, post-hero --- */
function GettingStarted({ onWaitlistClick }) {
  const steps = [
    {
      n: "01",
      title: "Sign in with Gmail or Outlook",
      body: "OAuth in two clicks. Reo asks for read access — never send-on-your-behalf. You can revoke it any time.",
      visual: <StepConnectVisual onClick={onWaitlistClick}/>,
      duration: "~ 10 seconds"
    },
    {
      n: "02",
      title: "Pick your scope and your agents",
      body: "Choose how far back Reo can read (up to 6 months) and assemble your team — from the library, with AI, or written by hand.",
      visual: <StepScopeVisual/>,
      duration: "~ 40 seconds"
    },
    {
      n: "03",
      title: "Reo surfaces inferences — you click to act",
      body: "Every inference comes with sources and one-click actions across the tools you already use. Reo also learns what you act on and suggests new agents.",
      visual: <StepInferenceVisual/>,
      duration: "ongoing"
    }
  ];

  return (
    <Section eyebrow="Getting started" eyebrowMeta="01 / 06" pad={[100, 100]} bg="var(--paper-2)" borderTop borderBottom>
      <div className="section-head">
        <h2 className="title">Up and running in 90 seconds.</h2>
        <span className="meta">Three steps · no configuration to write</span>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 24
      }}>
        {steps.map((s) => (
          <div key={s.n} style={{
            background: "var(--paper)",
            border: "1px solid var(--rule-2)",
            borderRadius: 6,
            padding: 0,
            display: "flex", flexDirection: "column",
            overflow: "hidden",
            position: "relative"
          }}>
            <div style={{
              padding: "24px 28px 16px",
              display: "flex", flexDirection: "column", gap: 10
            }}>
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between"
              }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 14,
                  color: "var(--accent)", letterSpacing: "0.08em",
                  fontWeight: 500
                }}>{s.n}</span>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 10,
                  color: "var(--accent)", letterSpacing: "0.06em",
                  textTransform: "uppercase"
                }}>{s.duration}</span>
              </div>
              <h3 style={{
                fontSize: 22, fontWeight: 450,
                letterSpacing: "-0.018em", margin: 0,
                color: "var(--ink)", textWrap: "balance"
              }}>{s.title}</h3>
              <p style={{
                fontSize: 16, lineHeight: 1.6, margin: 0,
                color: "var(--ink-2)", textWrap: "pretty"
              }}>{s.body}</p>
            </div>
            <div style={{
              padding: "12px 20px 20px",
              marginTop: "auto"
            }}>
              {s.visual}
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 32,
        display: "flex", alignItems: "center", gap: 16,
        flexWrap: "wrap"
      }}>
        <button onClick={onWaitlistClick} className="reo-cta accent"
          style={{ height: 44, padding: "0 22px", fontSize: 14 }}>
          Join the waitlist <span className="arrow"/>
        </button>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--ink-4)", letterSpacing: "0.04em"
        }}>
          Gmail and Outlook · cancel any time · data deleted within 30 days
        </span>
      </div>

      <ReoLearnsCallout/>
    </Section>
  );
}

/* --- Reo learns: shows how the agent suggests new agents + integrations
 * based on what the user acts on. Slim, sober, single horizontal row. */
function ReoLearnsCallout() {
  return (
    <div style={{
      marginTop: 56,
      border: "1px solid var(--rule-2)",
      borderRadius: 6,
      background: "var(--paper)",
      overflow: "hidden"
    }}>
      <div style={{
        padding: "14px 22px",
        borderBottom: "1px solid var(--rule)",
        background: "var(--paper-2)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 16, flexWrap: "wrap"
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{
            width: 22, height: 22, borderRadius: 5,
            background: "var(--accent-tint)",
            border: "1px solid var(--accent-tint-2)",
            color: "var(--accent)",
            display: "inline-flex", alignItems: "center", justifyContent: "center"
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/>
            </svg>
          </span>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 10,
              color: "var(--accent)", letterSpacing: "0.08em",
              textTransform: "uppercase"
            }}>And it learns</div>
            <div style={{
              fontSize: 16, color: "var(--ink)", marginTop: 2,
              letterSpacing: "-0.012em", fontWeight: 450
            }}>
              Reo watches what you act on — and quietly proposes new agents and tools.
            </div>
          </div>
        </div>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 10.5,
          color: "var(--ink-4)", letterSpacing: "0.06em",
          textTransform: "uppercase"
        }}>Inferred from week 03 · review weekly</span>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 0,
        borderBottom: "1px solid var(--rule)"
      }}>
        {/* Left: suggested new agent */}
        <div style={{
          padding: "18px 22px",
          borderRight: "1px solid var(--rule)",
          display: "flex", flexDirection: "column", gap: 10
        }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--ink-4)", letterSpacing: "0.06em",
            textTransform: "uppercase"
          }}>Suggested new agent</div>
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 12px",
            background: "var(--paper-2)",
            border: "1px dashed var(--ink-5)",
            borderRadius: 5
          }}>
            <span style={{
              width: 26, height: 26, borderRadius: 4,
              background: "var(--paper-3)", color: "var(--ink-2)",
              border: "1px solid var(--rule-2)",
              display: "inline-flex", alignItems: "center", justifyContent: "center"
            }}>
              <Glyph name="scale" size={13} stroke={1.4}/>
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink)", lineHeight: 1.25 }}>
                Pricing-discussion drift
              </div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.35, textWrap: "pretty" }}>
                You acted 4× on price-related threads this month.
              </div>
            </div>
            <span style={{
              padding: "3px 8px",
              background: "var(--accent)", color: "var(--paper)",
              borderRadius: 3, fontFamily: "var(--font-sans)", fontSize: 11,
              cursor: "pointer", whiteSpace: "nowrap"
            }}>+ Add</span>
          </div>
        </div>

        {/* Right: suggested integration */}
        <div style={{
          padding: "18px 22px",
          display: "flex", flexDirection: "column", gap: 10
        }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--ink-4)", letterSpacing: "0.06em",
            textTransform: "uppercase"
          }}>Suggested integration</div>
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 12px",
            background: "var(--paper-2)",
            border: "1px dashed var(--ink-5)",
            borderRadius: 5
          }}>
            <span style={{
              width: 26, height: 26, borderRadius: 4,
              background: "var(--paper-3)", color: "var(--ink-2)",
              border: "1px solid var(--rule-2)",
              display: "inline-flex", alignItems: "center", justifyContent: "center"
            }}>
              <ToolGlyph name="slack"/>
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink)", lineHeight: 1.25 }}>
                Loop the #cs-leads channel
              </div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.35, textWrap: "pretty" }}>
                You forward customer-risk threads to your team 2–3× per week.
              </div>
            </div>
            <span style={{
              padding: "3px 8px",
              background: "var(--accent)", color: "var(--paper)",
              borderRadius: 3, fontFamily: "var(--font-sans)", fontSize: 11,
              cursor: "pointer", whiteSpace: "nowrap"
            }}>+ Connect Slack</span>
          </div>
        </div>
      </div>

      {/* footer caption */}
      <div style={{
        padding: "10px 22px",
        background: "var(--paper-2)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 16, flexWrap: "wrap",
        fontFamily: "var(--font-mono)", fontSize: 10.5,
        color: "var(--ink-3)", letterSpacing: "0.04em"
      }}>
        <span>● Suggestions inferred locally · never sent until you approve</span>
        <span style={{ color: "var(--ink-4)" }}>
          You can dismiss any suggestion · Reo stops proposing it
        </span>
      </div>
    </div>
  );
}

/* --- step visuals --- */
function StepConnectVisual({ onClick }) {
  return (
    <div style={{
      border: "1px solid var(--rule)",
      background: "var(--paper-2)",
      borderRadius: 5, padding: "14px 16px"
    }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--ink-4)", letterSpacing: "0.06em",
        textTransform: "uppercase", marginBottom: 10
      }}>Continue with</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        <button onClick={onClick}
          style={{
            all: "unset", display: "flex", alignItems: "center", gap: 10,
            padding: "9px 12px",
            background: "var(--paper)",
            border: "1px solid var(--ink-2)",
            borderRadius: 4, cursor: "pointer",
            transition: "background 120ms, border-color 120ms"
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--paper-3)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "var(--paper)"; }}>
          <GmailGlyph/>
          <span style={{ fontSize: 13, color: "var(--ink)", flex: 1, fontFamily: "var(--font-sans)" }}>Continue with Google</span>
          <span style={{
            display: "inline-block", width: 8, height: 8,
            borderTop: "1px solid var(--ink-3)",
            borderRight: "1px solid var(--ink-3)",
            transform: "rotate(45deg)"
          }}/>
        </button>
        <button onClick={onClick}
          style={{
            all: "unset", display: "flex", alignItems: "center", gap: 10,
            padding: "9px 12px",
            background: "var(--paper)",
            border: "1px solid var(--rule-2)",
            borderRadius: 4, cursor: "pointer",
            transition: "background 120ms, border-color 120ms"
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ink-3)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--rule-2)"; }}>
          <OutlookGlyph/>
          <span style={{ fontSize: 13, color: "var(--ink-2)", flex: 1, fontFamily: "var(--font-sans)" }}>Continue with Microsoft</span>
          <span style={{
            display: "inline-block", width: 8, height: 8,
            borderTop: "1px solid var(--ink-4)",
            borderRight: "1px solid var(--ink-4)",
            transform: "rotate(45deg)"
          }}/>
        </button>
      </div>
      <div style={{
        marginTop: 10,
        fontFamily: "var(--font-mono)", fontSize: 9.5,
        color: "var(--ink-4)", letterSpacing: "0.04em"
      }}>
        ✓ Read-only · no send-on-your-behalf
      </div>
    </div>
  );
}

function StepScopeVisual() {
  const [mode, setMode] = useS("existing");
  const modes = [
    { id: "existing", label: "From library" },
    { id: "ai",       label: "Author with AI" },
    { id: "manual",   label: "Custom" }
  ];
  return (
    <div style={{
      border: "1px solid var(--rule)",
      background: "var(--paper-2)",
      borderRadius: 5, padding: "14px 16px",
      display: "flex", flexDirection: "column", gap: 10
    }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--ink-4)", letterSpacing: "0.06em",
        textTransform: "uppercase"
      }}>Historical scope</div>
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
        {[
          { label: "30 days", on: false },
          { label: "90 days", on: true,  note: "default" },
          { label: "6 months", on: false }
        ].map(o => (
          <span key={o.label} style={{
            padding: "4px 8px",
            background: o.on ? "var(--accent)" : "var(--paper)",
            color: o.on ? "var(--paper)" : "var(--ink-3)",
            border: `1px solid ${o.on ? "var(--accent)" : "var(--rule-2)"}`,
            borderRadius: 3,
            fontSize: 11, fontFamily: "var(--font-sans)",
            display: "inline-flex", alignItems: "center", gap: 4
          }}>
            {o.label}
            {o.note && (
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 8.5,
                opacity: 0.7, letterSpacing: "0.04em"
              }}>· {o.note}</span>
            )}
          </span>
        ))}
      </div>

      <div style={{ height: 1, background: "var(--rule)", margin: "2px 0" }}/>

      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--ink-4)", letterSpacing: "0.06em",
        textTransform: "uppercase"
      }}>Forward scope · which new emails</div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 6
      }}>
        {[
          { label: "Sent directly to me", on: true },
          { label: "Threads I've replied to", on: true },
          { label: "My sent mail",         on: true },
          { label: "Where I'm on CC",      on: false }
        ].map(o => (
          <span key={o.label} style={{
            display: "inline-flex", alignItems: "center", gap: 7,
            padding: "5px 9px",
            background: o.on ? "var(--accent-tint)" : "var(--paper)",
            border: `1px solid ${o.on ? "var(--accent-tint-2)" : "var(--rule-2)"}`,
            borderRadius: 4,
            fontSize: 11, color: o.on ? "var(--accent)" : "var(--ink-3)",
            fontFamily: "var(--font-sans)",
            cursor: "default", letterSpacing: "-0.005em",
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"
          }}>
            <span style={{
              width: 12, height: 12, borderRadius: 2,
              background: o.on ? "var(--accent)" : "var(--paper)",
              border: o.on ? "1px solid var(--accent)" : "1px solid var(--rule-strong)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0
            }}>
              {o.on && (
                <svg width="9" height="9" viewBox="0 0 10 10" fill="none">
                  <path d="M2 5l2 2 4-4" stroke="var(--paper)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
            </span>
            {o.label}
          </span>
        ))}
      </div>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--ink-4)", letterSpacing: "0.02em", lineHeight: 1.5,
        marginTop: 2
      }}>
        Newsletters, automated mail, and sensitive threads are auto-excluded.
      </div>

      <div style={{ height: 1, background: "var(--rule)", margin: "2px 0" }}/>

      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--ink-4)", letterSpacing: "0.06em",
        textTransform: "uppercase"
      }}>Add agents</div>
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
        {modes.map(m => (
          <button key={m.id}
            onClick={() => setMode(m.id)}
            style={{
              height: 28, padding: "0 10px",
              background: mode === m.id ? "var(--paper)" : "transparent",
              color: mode === m.id ? "var(--ink)" : "var(--ink-3)",
              border: `1px solid ${mode === m.id ? "var(--ink-5)" : "var(--rule-2)"}`,
              borderRadius: 3,
              fontFamily: "var(--font-sans)", fontSize: 11,
              cursor: "pointer", letterSpacing: "-0.005em",
              whiteSpace: "nowrap"
            }}>
            {m.label}
          </button>
        ))}
      </div>

      <div style={{
        padding: 10,
        background: "var(--paper)",
        border: "1px solid var(--rule-2)",
        borderRadius: 4,
        minHeight: 60,
        display: "flex", flexDirection: "column", gap: 6
      }}>
        {mode === "existing" && (
          <>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 9.5,
              color: "var(--ink-4)", letterSpacing: "0.04em"
            }}>● 5 starter agents selected</div>
            <div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
              {["Commitments", "Drift", "Cooling", "Quarantine", "Audit"].map(t => (
                <span key={t} style={{
                  padding: "2px 6px",
                  background: "var(--accent-tint)",
                  color: "var(--accent)",
                  border: "1px solid var(--accent-tint-2)",
                  borderRadius: 99,
                  fontFamily: "var(--font-mono)", fontSize: 9
                }}>{t}</span>
              ))}
            </div>
          </>
        )}
        {mode === "ai" && (
          <>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 9.5,
              color: "var(--ink-4)", letterSpacing: "0.04em"
            }}>You write</div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--ink-2)",
              padding: "4px 6px",
              background: "var(--paper-2)",
              borderRadius: 3, lineHeight: 1.4
            }}>"Flag any customer mentioning competitors"</div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 9.5,
              color: "var(--accent)", letterSpacing: "0.04em"
            }}>↳ Reo built: <span style={{ color: "var(--ink-2)" }}>Competitor mention watch</span></div>
          </>
        )}
        {mode === "manual" && (
          <>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 9.5,
              color: "var(--ink-4)", letterSpacing: "0.04em"
            }}>YAML editor</div>
            <pre style={{
              margin: 0,
              fontFamily: "var(--font-mono)", fontSize: 10,
              color: "var(--ink-2)", lineHeight: 1.5,
              padding: 4, whiteSpace: "pre-wrap"
            }}>{`name: SLA breach watch
match: subject ~ "urgent"
within: 4h response`}</pre>
          </>
        )}
      </div>
    </div>
  );
}

function StepInferenceVisual() {
  return (
    <div style={{
      border: "1px solid var(--rule)",
      background: "var(--paper-2)",
      borderRadius: 5, padding: "14px 16px",
      display: "flex", flexDirection: "column", gap: 10
    }}>
      {/* a new-email row + chip */}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "8px 10px",
        background: "var(--paper)",
        border: "1px solid var(--rule-2)",
        borderRadius: 4
      }}>
        <span style={{
          width: 5, height: 5, borderRadius: 50, background: "var(--accent)",
          flexShrink: 0
        }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 11.5, color: "var(--ink)", fontWeight: 500,
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
          }}>Reza · Acme</div>
          <div style={{
            fontSize: 10.5, color: "var(--ink-3)",
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
          }}>QBR Friday — quick SSO confirm?</div>
        </div>
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 4,
          padding: "2px 6px",
          background: "var(--accent-tint)",
          border: "1px solid var(--accent-tint-2)",
          borderRadius: 99,
          fontFamily: "var(--font-mono)", fontSize: 9,
          color: "var(--accent)", letterSpacing: "0.04em",
          whiteSpace: "nowrap", flexShrink: 0
        }}>● Reo · commitment</span>
      </div>

      {/* inference  */}
      <div style={{
        padding: "8px 10px",
        background: "var(--paper)",
        border: "1px solid var(--ink-5)",
        borderRadius: 4
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 9,
          color: "var(--accent)", letterSpacing: "0.06em",
          textTransform: "uppercase", marginBottom: 4
        }}>Reo infers</div>
        <div style={{ fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.4, textWrap: "pretty" }}>
          Acme expects SSO Q4 — eng cut it. <strong style={{ color: "var(--ink)" }}>$420K at risk.</strong>
        </div>
      </div>

      {/* action toolchain */}
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 9.5,
        color: "var(--ink-4)", letterSpacing: "0.06em",
        textTransform: "uppercase"
      }}>Suggested actions</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {[
          { glyph: "draft",    label: "Draft reply in your voice",  tool: "Gmail" },
          { glyph: "slack",    label: "Loop in eng via Slack",      tool: "Slack" },
          { glyph: "calendar", label: "Add 1:1 with Reza Thursday", tool: "Calendar" }
        ].map((a, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 8,
            padding: "5px 8px",
            background: "var(--paper)",
            border: "1px solid var(--rule-2)",
            borderRadius: 4
          }}>
            <ToolGlyph name={a.glyph}/>
            <span style={{
              flex: 1, fontSize: 11, color: "var(--ink-2)",
              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
            }}>{a.label}</span>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 8.5,
              color: "var(--ink-4)", letterSpacing: "0.04em",
              flexShrink: 0
            }}>{a.tool.toUpperCase()}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* Small monochrome tool icons used in Step 3 — never trademark colors */
function ToolGlyph({ name }) {
  const c = "var(--ink-2)";
  const s = { width: 13, height: 13, color: c, flexShrink: 0 };
  if (name === "draft") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={s}>
      <path d="M16.5 3.5l4 4L8 20l-5 1 1-5 12.5-12.5z" strokeLinejoin="round"/>
    </svg>
  );
  if (name === "slack") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={s}>
      <rect x="4" y="10" width="6" height="3" rx="1.5"/>
      <rect x="11" y="4" width="3" height="6" rx="1.5"/>
      <rect x="14" y="11" width="6" height="3" rx="1.5"/>
      <rect x="10" y="14" width="3" height="6" rx="1.5"/>
    </svg>
  );
  if (name === "calendar") return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={s}>
      <rect x="3.5" y="5.5" width="17" height="14" rx="1.5"/>
      <path d="M3.5 10h17M8 3.5v4M16 3.5v4"/>
    </svg>
  );
  return null;
}
function HowItWorks() {
  const layers = [
    {
      n: "L1", title: "Real-time",
      desc: "A silent chip on the emails you're responsible for. Click to see the inference, with sources.",
      visual: <GmailChipVisual/>
    },
    {
      n: "L2", title: "On-demand",
      desc: "Tag emails with @, attach a file, ask a sourced question. Reo's agents answer.",
      visual: <AtMentionVisual/>
    },
    {
      n: "L3", title: "Scheduled",
      desc: "A weekly digest of patterns no single email reveals.",
      visual: <DigestThumbVisual/>
    }
  ];
  return (
    <Section id="how" eyebrow="How it works" eyebrowMeta="02 / 05" borderTop borderBottom>
      <div className="section-head">
        <h2 className="title">Three ways your agents work.</h2>
        <span className="meta">Real-time · On-demand · Scheduled</span>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 0,
        borderTop: "1px solid var(--rule)"
      }}>
        {layers.map((l, i) => (
          <div key={l.n} style={{
            padding: "32px 36px",
            borderRight: i < 2 ? "1px solid var(--rule)" : "none",
            borderBottom: "1px solid var(--rule)",
            display: "flex", flexDirection: "column", gap: 16,
            minHeight: 460
          }}>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center"
            }}>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                padding: "3px 8px",
                background: "var(--accent-tint)",
                border: "1px solid var(--accent-tint-2)",
                borderRadius: 99,
                fontFamily: "var(--font-mono)", fontSize: 10.5,
                color: "var(--accent)", letterSpacing: "0.08em",
                fontWeight: 600
              }}>
                <span style={{
                  width: 4, height: 4, borderRadius: 50, background: "var(--accent)"
                }}/>
                {l.n}
              </span>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                color: "var(--ink-4)", letterSpacing: "0.08em"
              }}>0{i+1}</span>
            </div>
            <h3 style={{
              fontSize: 30, lineHeight: 1.1,
              letterSpacing: "-0.02em", fontWeight: 450,
              margin: 0, color: "var(--ink)"
            }}>{l.title}</h3>
            <p style={{
              fontSize: 16, lineHeight: 1.6,
              color: "var(--ink-2)", margin: 0,
              textWrap: "pretty"
            }}>{l.desc}</p>
            <div style={{ marginTop: "auto", paddingTop: 16 }}>
              {l.visual}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function GmailChipVisual() {
  return (
    <div style={{
      background: "var(--paper-2)",
      border: "1px solid var(--rule)",
      borderRadius: 4, overflow: "hidden"
    }}>
      <div style={{
        padding: "12px 14px", borderBottom: "1px solid var(--rule)",
        display: "flex", justifyContent: "space-between", alignItems: "center"
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink)" }}>Acme · Reza</div>
          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>re: Q3 plans</div>
        </div>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          background: "var(--paper)", border: "1px solid var(--accent-tint-2)",
          padding: "3px 8px", borderRadius: 99,
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--accent)", letterSpacing: "0.02em"
        }}>
          <span style={{ width: 5, height: 5, borderRadius: 50, background: "var(--accent)" }}/>
          Reo · commitment
        </div>
      </div>
      <div style={{ padding: "12px 14px" }}>
        <div style={{
          fontSize: 11, lineHeight: 1.5, color: "var(--ink-3)",
          fontFamily: "var(--font-mono)"
        }}>
          can we still count on the export work landing by end of september?
        </div>
      </div>
    </div>
  );
}

function AtMentionVisual() {
  return (
    <div style={{
      background: "var(--paper-2)",
      border: "1px solid var(--rule)",
      borderRadius: 4, overflow: "hidden",
      display: "flex", flexDirection: "column"
    }}>
      <div style={{
        padding: "12px 14px",
        display: "flex", alignItems: "center", gap: 8,
        borderBottom: "1px solid var(--rule)"
      }}>
        <span style={{
          width: 20, height: 20, borderRadius: 4,
          background: "var(--accent)", color: "var(--paper)",
          display: "inline-flex", alignItems: "center", justifyContent: "center"
        }}>
          <Glyph name="at" size={12} stroke={1.5}/>
        </span>
        <div style={{
          flex: 1, fontSize: 12, color: "var(--ink-2)",
          fontFamily: "var(--font-mono)"
        }}>
          @reo what did we tell Pier about SSO?
        </div>
      </div>
      <div style={{ padding: "10px 14px" }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 9,
          color: "var(--ink-4)", letterSpacing: "0.08em",
          textTransform: "uppercase", marginBottom: 6
        }}>Suggestions</div>
        {["pier · re: rollout plan", "pier · contract Q1", "pier · re: SSO timeline"].map((s, i) => (
          <div key={i} style={{
            padding: "5px 0",
            fontSize: 11.5, color: "var(--ink-2)",
            fontFamily: "var(--font-mono)",
            borderTop: i > 0 ? "1px solid var(--rule)" : "none"
          }}>{s}</div>
        ))}
      </div>
    </div>
  );
}

function DigestThumbVisual() {
  return (
    <div style={{
      background: "var(--paper-2)",
      border: "1px solid var(--rule)",
      borderRadius: 4, overflow: "hidden"
    }}>
      <div style={{
        padding: "10px 14px", borderBottom: "1px solid var(--rule)",
        display: "flex", justifyContent: "space-between"
      }}>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--ink-3)", letterSpacing: "0.04em"
        }}>FRIDAY · MAR 14</span>
        <span style={{ fontSize: 10, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>4 insights</span>
      </div>
      <div style={{ padding: "12px 14px", display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { g: "clock", l: "Commitment drift", t: "Acme export, Q3 → Q4" },
          { g: "cross-arrows", l: "Contradiction", t: "Voro / Beam · SSO date" },
          { g: "wave", l: "Cooling thread", t: "Pier · 3 quiet threads" }
        ].map((row, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 10,
            paddingBottom: 8,
            borderBottom: i < 2 ? "1px solid var(--rule)" : "none"
          }}>
            <Glyph name={row.g} size={12} stroke={1.4}/>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 9,
                color: "var(--ink-4)", letterSpacing: "0.06em",
                textTransform: "uppercase"
              }}>{row.l}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-2)" }}>{row.t}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- C. Agents teaser (library metaphor, not app-store grid) ---
 * Each agent carries a real-world example scenario users can click to see.
 * Examples are dollar-tied, calendar-urgent, and inference-true to the
 * promise of the hero — to make the agent's value obvious in 5 seconds. */
const ALL_SKILLS = [
  {
    cat: "patterns", glyph: "clock",
    name: "Customer commitments tracker",
    description: "Overdue and approaching — across every thread, not just the loud ones.",
    example: {
      headline: "Stripe renewal is in 4 weeks. You committed to audit logs at signing. We don't have them.",
      emails: [
        { from: "You → Stripe",          subj: "re: contract terms — audit logs",  date: "Apr 14, 2026 · 3:42 PM", excerpt: "Confirming: SSO and audit logs ready by October renewal. Happy to put both in the contract." },
        { from: "Priya → eng-leads",     subj: "Q3 sprint priorities",              date: "Aug 22, 2026 · 11:08 AM", excerpt: "Audit logs slipping — pushing to Q1 to make room for the Aurora migration." },
        { from: "Stripe procurement",    subj: "Renewal kickoff — Oct 14",          date: "Yesterday · 4:10 PM", excerpt: "We'll start the renewal review Monday. Anything we should be prepared to discuss?" }
      ],
      sources: ["3 threads · Apr 14 – yesterday"],
      audience: "you only",
      primary: "Loop in eng now",
      secondary: "Acknowledge to Stripe"
    }
  },
  {
    cat: "patterns", glyph: "cross-arrows",
    name: "Cross-customer contradictions",
    description: "Same feature, different stories. Reo flags when two customers were told different things.",
    example: {
      headline: "Voro and Beam are on the same plan — but you told them different things about SSO.",
      emails: [
        { from: "You → Voro",   subj: "re: SSO setup",          date: "Jul 8 · 2:14 PM",  excerpt: "SSO is available on your plan — just ping support and they'll flip it on." },
        { from: "You → Beam",   subj: "re: SSO availability",   date: "Sep 1 · 9:30 AM",  excerpt: "SSO is on the Enterprise tier — happy to put together pricing for the upgrade." },
        { from: "Voro · Reza",  subj: "re: SSO working great",  date: "Last week",        excerpt: "SSO's been live for a month — thanks for getting that done." }
      ],
      sources: ["3 threads · same product tier"],
      audience: "you only",
      primary: "Reply to Beam",
      secondary: "Open billing tier review"
    }
  },
  {
    cat: "patterns", glyph: "diverge",
    name: "Stakeholder alignment drift",
    description: "When two team members disagree silently through you, instead of with each other.",
    example: {
      headline: "Priya and Marcus disagree on the API change — both told you privately, neither told the other.",
      emails: [
        { from: "Priya · eng-lead",    subj: "re: API v2 timeline",       date: "Aug 12 · 10:14 AM", excerpt: "We can ship the v2 API by end of Q4. Auth changes are ready, just need design sign-off." },
        { from: "Marcus · design-lead", subj: "API v2 — needs another sprint", date: "Aug 12 · 4:20 PM",  excerpt: "Design isn't finalized yet — we need at least one more sprint before this is safe to ship." },
        { from: "You → product-leads", subj: "v2 status check",           date: "This morning",      excerpt: "Tomorrow's all-hands — what should I say about API v2 timing?" }
      ],
      sources: ["2 threads · same day, never crossed"],
      audience: "you only",
      primary: "Open a joint thread",
      secondary: "Defer the all-hands answer"
    }
  },
  {
    cat: "patterns", glyph: "wave",
    name: "Cooling counterparty threads",
    description: "Relationships going quiet that used to be warm. Catch them before they're cold.",
    example: {
      headline: "Pier renewed in February for $180K. They've gone from weekly chat to 32 days of silence.",
      emails: [
        { from: "Pier · Amanda",  subj: "re: contract signed!",       date: "Feb 4 · 2:10 PM",  excerpt: "Excited to keep working together. Looking forward to the audit-log work in Q2 — talk soon." },
        { from: "Pier · Amanda",  subj: "re: Q2 product update",      date: "May 18",           excerpt: "Thanks for the update — will pass along to the team." },
        { from: "Pier · procurement", subj: "Renewal options query", date: "32 days ago",      excerpt: "We're starting our 2027 budget planning — wanted to understand what renewal looks like." }
      ],
      sources: ["3 threads · Feb – today"],
      audience: "you only",
      primary: "Schedule a check-in",
      secondary: "Loop in CS lead"
    }
  },
  {
    cat: "patterns", glyph: "log",
    name: "Decision audit log",
    description: "What you've decided and why, captured from the threads where you actually decided it.",
    example: {
      headline: "On Tuesday you decided to defer the Postgres migration to Q1. Two team docs still show Q4.",
      emails: [
        { from: "You → eng-leads",    subj: "re: migration timing",     date: "Tuesday · 11:02 AM", excerpt: "Aligned — pushing Postgres-to-Aurora to Q1. We need to focus Q4 on SSO." },
        { from: "Priya · roadmap doc", subj: "[link] roadmap.md updated", date: "Wednesday",        excerpt: "Latest roadmap doc — still showing Postgres migration kicking off in Q4 week 4." },
        { from: "Marcus · eng-leads",  subj: "Q4 capacity planning",     date: "Thursday · 9:11 AM", excerpt: "Counting on Postgres team for Q4 — let me know if anything changes." }
      ],
      sources: ["3 threads · this week"],
      audience: "team · eng-leads",
      primary: "Send decision summary",
      secondary: "Pin to decision log"
    }
  },
  {
    cat: "safety", glyph: "shield",
    name: "Sensitive content quarantine",
    description: "HR, medical, legal, financial, privileged — auto-excluded by default. You opt in, never out.",
    example: {
      headline: "23 threads quarantined this week. Reo never read them, never indexed them, can't answer questions about them.",
      emails: [
        { from: "[QUARANTINED · HR]",      subj: "Sarah — performance review draft",     date: "This week", excerpt: "Contents not indexed. Reo does not analyze HR threads by default." },
        { from: "[QUARANTINED · MEDICAL]", subj: "2026 health insurance enrollment",     date: "This week", excerpt: "Contents not indexed. Reo does not analyze medical threads by default." },
        { from: "[QUARANTINED · LEGAL]",   subj: "re: NDA — outside counsel privileged", date: "This week", excerpt: "Contents not indexed. Reo does not analyze legal threads by default." }
      ],
      sources: ["23 threads · auto-detected · never opened"],
      audience: "you only · admins cannot view",
      primary: "Review quarantine list",
      secondary: "Adjust quarantine rules"
    }
  },
  {
    cat: "safety", glyph: "eye-off",
    name: "Privileged thread protection",
    description: "Attorney-client threads never analyzed. Detected and excluded at ingest, before reaching the inference layer.",
    example: {
      headline: "4 attorney-client threads detected and excluded at ingest. They are not in the index. They cannot be queried.",
      emails: [
        { from: "[EXCLUDED · ATTORNEY-CLIENT]", subj: "re: Walker v. Acme — strategy",          date: "Sep 24", excerpt: "Excluded by privilege detector. Not retrievable by any agent." },
        { from: "[EXCLUDED · ATTORNEY-CLIENT]", subj: "Walker matter — discovery review",        date: "Sep 30", excerpt: "Excluded by privilege detector. Not retrievable by any agent." },
        { from: "[EXCLUDED · ATTORNEY-CLIENT]", subj: "re: outside counsel — settlement framing", date: "Today",  excerpt: "Excluded by privilege detector. Not retrievable by any agent." }
      ],
      sources: ["4 threads · privilege detector · audit log"],
      audience: "you only",
      primary: "Open privilege audit",
      secondary: "View detection rules"
    }
  },
  {
    cat: "ops", glyph: "target",
    name: "Roadmap commitment conflicts",
    description: "Same feature window committed twice. Reo notices and surfaces it.",
    example: {
      headline: "Customer Portal is promised to Acme AND Beam in Q4. Engineering can only ship one.",
      emails: [
        { from: "You → Acme",            subj: "re: Customer Portal timing",          date: "Aug 14 · 10:08 AM", excerpt: "Confirming — Customer Portal will be live for you in Q4 this year. Plan around that." },
        { from: "You → Beam",            subj: "re: Q4 roadmap",                       date: "Sep 2 · 2:48 PM",  excerpt: "Customer Portal is locked in for Q4. Looking forward to the rollout with you." },
        { from: "Priya · capacity plan", subj: "Q4 engineering capacity",              date: "Sep 10",            excerpt: "Realistically we can ship Customer Portal for one of them, not both. Which?" }
      ],
      sources: ["3 threads · Aug 14 – Sep 10"],
      audience: "you only",
      primary: "Open conflict review",
      secondary: "Flag to product-leads"
    }
  },
  {
    cat: "ops", glyph: "bell",
    name: "SLA breach watch",
    description: "Service-level promises slipping toward their deadline, ranked by impact.",
    example: {
      headline: "Acme P0 has been open 25 hours. SLA is 4. You replied once, never followed up.",
      emails: [
        { from: "Acme · ops",   subj: "P0 — billing showing wrong amounts",  date: "Mon 9:30 AM",  excerpt: "Customers are seeing the wrong amounts on their invoices. This needs to be looked at urgently." },
        { from: "You → Acme",   subj: "re: P0",                              date: "Mon 12:15 PM", excerpt: "I'll get back to you with an update today — investigating with eng now." },
        { from: "Acme · ops",   subj: "re: P0 — any update?",                date: "Tue 11:08 AM", excerpt: "Following up — we still haven't heard back. Three more customer reports came in this morning." }
      ],
      sources: ["4 threads · SLA: 4h response"],
      audience: "you only",
      primary: "Escalate to on-call",
      secondary: "Draft status update"
    }
  },
  {
    cat: "ops", glyph: "ear",
    name: "Repeated question tracker",
    description: "When a customer asks the same thing twice in 30 days, you hear about it once.",
    example: {
      headline: "Beam has asked about API rate limits three times. You answered once. They're not sure they got an answer.",
      emails: [
        { from: "Beam · Priya", subj: "API rate limits — quick question",         date: "Aug 14", excerpt: "Hey — what's the rate limit on the /events endpoint? Trying to plan ingestion." },
        { from: "Beam · Priya", subj: "re: API limits (different question)",       date: "Aug 28", excerpt: "Wanted to confirm — does the rate limit reset per minute or per hour?" },
        { from: "Beam · Priya", subj: "Rate limits one more time",                 date: "Sep 22", excerpt: "Sorry to keep asking — what's the actual limit per minute? We're getting throttled in staging." }
      ],
      sources: ["3 threads · same question, different phrasings"],
      audience: "you only",
      primary: "Reply with the answer",
      secondary: "Pin to FAQ doc"
    }
  },
  {
    cat: "custom", glyph: "currency",
    name: "Price-change sentinel",
    description: "Vendor adjusts a price after sign-off — Reo catches the diff and flags it.",
    custom: true,
    prompt: "Notice when a vendor changes a price after we've signed off.",
    example: {
      headline: "AWS quoted $42K/mo on Jul 1. Latest invoice is $48K/mo. The 14% increase isn't explained anywhere.",
      emails: [
        { from: "AWS · account exec",   subj: "Aurora cluster — quote",            date: "Jul 1 · 11:30 AM", excerpt: "Quoted: $42,000/mo for the m7g.16xlarge Aurora cluster, committed annual. Term: 12 months." },
        { from: "You → AWS",            subj: "re: Aurora quote — accepted",       date: "Jul 8 · 9:14 AM",  excerpt: "Signed. Please bill against our standard PO. Expecting first invoice early August." },
        { from: "AWS · billing",        subj: "September invoice — Aurora cluster", date: "Sep 10",           excerpt: "September invoice: $48,000.00. Detail in attached PDF. Net 30." }
      ],
      sources: ["2 threads + 1 invoice · Jul 1 vs Sep 10"],
      audience: "you only",
      primary: "Reply to AWS — query the diff",
      secondary: "Loop in finance"
    }
  },
  {
    cat: "custom", glyph: "scale",
    name: "Competitor mention watch",
    description: "Surface when prospects or customers reference competitors by name in any thread.",
    custom: true,
    prompt: "Flag any customer email that mentions our competitors by name.",
    example: {
      headline: "Three prospects mentioned competitors this week. All in active evaluation. None aware you have the same feature.",
      emails: [
        { from: "Foundry · Dana",  subj: "re: trial extension request",     date: "Monday",   excerpt: "Loving the platform — though we're also looking at Notion AI for some of the same use cases." },
        { from: "Atlas · Sam",     subj: "Question on the search piece",   date: "Wednesday", excerpt: "We're seriously considering Glean for our internal search. Curious how you'd compare?" },
        { from: "Holos · Mia",     subj: "re: feature parity question",     date: "Friday",   excerpt: "Linear is launching a similar feature next month — would love to know how yours differs." }
      ],
      sources: ["3 threads · this week · prospects in evaluation"],
      audience: "you only",
      primary: "Draft positioning replies",
      secondary: "Add to BDR talk track"
    }
  }
];

function SkillsTeaser({ onWaitlistClick }) {
  const [filter, setFilter] = useS("all");
  const [exampleAgent, setExampleAgent] = useS(null);
  const visible = filter === "all" ? ALL_SKILLS : ALL_SKILLS.filter(s => s.cat === filter);

  const categories = [
    { id: "all",      label: "All agents",        count: ALL_SKILLS.length },
    { id: "patterns", label: "Patterns",          count: ALL_SKILLS.filter(s => s.cat === "patterns").length },
    { id: "safety",   label: "Privacy & safety",  count: ALL_SKILLS.filter(s => s.cat === "safety").length },
    { id: "ops",      label: "Operations",        count: ALL_SKILLS.filter(s => s.cat === "ops").length },
    { id: "custom",   label: "Custom",            count: ALL_SKILLS.filter(s => s.cat === "custom").length }
  ];

  return (
    <Section id="skills" eyebrow="Agents · the library" eyebrowMeta="04 / 06">
      <div className="section-head">
        <h2 className="title">Pick which agents watch your inbox.</h2>
        <span className="meta" style={{ textTransform: "none", letterSpacing: "0.02em" }}>
          12 inference agents · click any card to see a real example
        </span>
      </div>

      {/* library frame */}
      <div style={{
        border: "1px solid var(--rule-2)",
        borderRadius: 6,
        background: "var(--paper-2)",
        overflow: "hidden"
      }}>
        {/* shelf header */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "14px 20px",
          borderBottom: "1px solid var(--rule)",
          background: "var(--paper)",
          flexWrap: "wrap", gap: 10
        }}>
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
            {categories.map(c => {
              const active = filter === c.id;
              return (
                <button key={c.id}
                  onClick={() => setFilter(c.id)}
                  onMouseEnter={(e) => { if (!active) { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.background = "var(--accent-tint)"; } }}
                  onMouseLeave={(e) => { if (!active) { e.currentTarget.style.color = "var(--ink-3)"; e.currentTarget.style.background = "transparent"; } }}
                  style={{
                    background: active ? "var(--accent)" : "transparent",
                    color: active ? "var(--paper)" : "var(--ink-3)",
                    border: `1px solid ${active ? "var(--accent)" : "transparent"}`,
                    borderRadius: 4, padding: "5px 10px",
                    fontFamily: "var(--font-sans)", fontSize: 12.5,
                    cursor: "pointer", letterSpacing: "-0.005em",
                    fontWeight: active ? 500 : 400,
                    display: "inline-flex", alignItems: "center", gap: 6,
                    transition: "color 120ms, background 120ms"
                  }}>
                  {c.label}
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 10,
                    opacity: active ? 0.85 : 0.7,
                    fontWeight: 600
                  }}>{c.count}</span>
                </button>
              );
            })}
          </div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 7,
            fontFamily: "var(--font-mono)", fontSize: 10.5,
            color: "var(--accent)", letterSpacing: "0.06em",
            textTransform: "uppercase", fontWeight: 600
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 50, background: "var(--accent)"
            }}/>
            {filter === "custom" ? "Authored from a single-line prompt" : "Click any agent to see it in action"}
          </div>
        </div>

        {/* the grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
          background: "var(--paper-2)",
          minHeight: 320
        }}>
          {visible.map((s) => (
            <div key={s.name} style={{ background: "var(--paper-2)", padding: 12 }}>
              <SkillCardWired skill={s} onClick={() => setExampleAgent(s)}/>
            </div>
          ))}
          {visible.length === 0 && (
            <div style={{
              gridColumn: "1 / -1",
              padding: 32, textAlign: "center",
              color: "var(--ink-4)",
              fontFamily: "var(--font-mono)", fontSize: 12
            }}>
              No agents in this category.
            </div>
          )}
        </div>

        {/* shelf footer */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "14px 20px",
          borderTop: "1px solid var(--rule)",
          background: "var(--paper)"
        }}>
          <a onClick={(e) => { e.preventDefault(); setFilter("all"); }} href="#"
             style={{
               color: filter === "all" ? "var(--ink-2)" : "var(--accent)",
               textDecoration: "none",
               fontSize: 13, letterSpacing: "-0.005em",
               borderBottom: `1px solid ${filter === "all" ? "var(--rule-strong)" : "var(--accent)"}`,
               paddingBottom: 1,
               fontWeight: filter === "all" ? 400 : 500
             }}>
            {filter === "all" ? "Showing all 12 agents" : `Showing ${visible.length} · view all 12 →`}
          </a>
        </div>
      </div>

      <AgentExampleModal agent={exampleAgent} onClose={() => setExampleAgent(null)} onWaitlistClick={onWaitlistClick}/>
    </Section>
  );
}

/* SkillCardWired — clickable card; click opens the example modal. */
function SkillCardWired({ skill, onClick }) {
  return (
    <div
      onClick={onClick}
      style={{
        background: "var(--paper)",
        border: "1px solid var(--rule-2)",
        borderRadius: 6,
        padding: "14px 16px",
        cursor: "pointer",
        transition: "border-color 140ms, transform 140ms, box-shadow 140ms",
        position: "relative",
        display: "flex", flexDirection: "column", gap: 10,
        minHeight: 132
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = "var(--accent)";
        e.currentTarget.style.transform = "translateY(-2px)";
        e.currentTarget.style.boxShadow = "0 4px 0 var(--accent-tint), 0 8px 24px oklch(0.32 0.15 268 / 0.06)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = "var(--rule-2)";
        e.currentTarget.style.transform = "translateY(0)";
        e.currentTarget.style.boxShadow = "none";
      }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{
          width: 32, height: 32, borderRadius: 6,
          background: "var(--accent-tint)",
          color: "var(--accent)",
          border: "1px solid var(--accent-tint-2)",
          display: "inline-flex", alignItems: "center", justifyContent: "center"
        }}>
          <Glyph name={skill.glyph} size={17} stroke={1.4}/>
        </span>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.06em", textTransform: "uppercase",
          color: skill.custom ? "var(--accent)" : "var(--ink-3)",
          fontWeight: skill.custom ? 600 : 500,
          display: "inline-flex", alignItems: "center", gap: 5
        }}>
          {skill.custom && (
            <span style={{
              width: 5, height: 5, borderRadius: 50, background: "var(--accent)"
            }}/>
          )}
          {skill.custom ? "Custom" : "Built-in"}
        </span>
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
        <h4 style={{
          fontSize: 15.5, fontWeight: 500, margin: 0,
          letterSpacing: "-0.012em", color: "var(--ink)",
          textWrap: "balance", lineHeight: 1.3
        }}>{skill.name}</h4>
        <p style={{
          fontSize: 14, lineHeight: 1.5, margin: 0,
          color: "var(--ink-2)", textWrap: "pretty"
        }}>{skill.description}</p>
      </div>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        paddingTop: 8, borderTop: "1px dashed var(--rule)",
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--accent)", letterSpacing: "0.04em",
        fontWeight: 600
      }}>
        {skill.custom ? (
          <span style={{ color: "var(--ink-3)", fontWeight: 400 }}>⤷ "{skill.prompt}"</span>
        ) : (
          <span>See real example</span>
        )}
        <span style={{
          display: "inline-block", width: 7, height: 7,
          borderTop: "1.5px solid var(--accent)",
          borderRight: "1.5px solid var(--accent)",
          transform: "rotate(45deg)"
        }}/>
      </div>
    </div>
  );
}

/* AgentExampleModal — opens when an agent card is clicked. Shows a
 * hero-style scenario (3 emails + inference + actions) so the agent's
 * value is obvious in five seconds. */
function AgentExampleModal({ agent, onClose, onWaitlistClick }) {
  React.useEffect(() => {
    if (!agent) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [agent, onClose]);

  if (!agent) return null;
  const ex = agent.example;

  return (
    <div role="dialog" aria-modal="true" onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "oklch(0.18 0.010 270 / 0.45)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 32, backdropFilter: "blur(8px)", overflowY: "auto"
      }}>
      <div onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(960px, 100%)", margin: "auto",
          background: "var(--paper)",
          border: "1px solid var(--rule-strong)",
          borderRadius: 8, overflow: "hidden",
          boxShadow: "0 20px 60px oklch(0 0 0 / 0.18)",
          display: "flex", flexDirection: "column"
        }}>
        <div style={{
          padding: "16px 22px",
          borderBottom: "1px solid var(--rule)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 16, flexWrap: "wrap"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
            <span style={{
              width: 32, height: 32, borderRadius: 5,
              background: "var(--paper-3)", color: "var(--ink-2)",
              border: "1px solid var(--rule-2)",
              display: "inline-flex", alignItems: "center", justifyContent: "center"
            }}>
              <Glyph name={agent.glyph} size={17} stroke={1.3}/>
            </span>
            <div style={{ minWidth: 0 }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                color: agent.custom ? "var(--accent)" : "var(--ink-4)",
                letterSpacing: "0.08em", textTransform: "uppercase"
              }}>
                {agent.custom ? "Custom agent · " : "Built-in · "}{categoryLabel(agent.cat)}
              </div>
              <div style={{
                fontSize: 17, fontWeight: 500,
                color: "var(--ink)", letterSpacing: "-0.012em",
                marginTop: 2, textWrap: "balance"
              }}>{agent.name}</div>
            </div>
          </div>
          <button onClick={onClose} style={{
            background: "transparent", border: "1px solid var(--rule-2)",
            borderRadius: 4, padding: "5px 12px", fontFamily: "var(--font-sans)",
            fontSize: 12, color: "var(--ink-2)", cursor: "pointer",
            whiteSpace: "nowrap"
          }}>Close (Esc)</button>
        </div>

        <div style={{
          padding: "18px 22px 12px",
          fontSize: 16, lineHeight: 1.6,
          color: "var(--ink-2)", textWrap: "pretty"
        }}>
          {agent.description}
          {agent.prompt && (
            <div style={{
              marginTop: 10,
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--ink-4)", letterSpacing: "0.02em",
              padding: "8px 10px",
              background: "var(--paper-2)",
              border: "1px dashed var(--rule-2)",
              borderRadius: 4
            }}>
              ⤷ authored from: <span style={{ color: "var(--ink-3)" }}>"{agent.prompt}"</span>
            </div>
          )}
        </div>

        <div style={{ padding: "12px 22px 22px" }}>
          <div className="dotframe" style={{ padding: 20 }}>
            <span className="corner-bl"></span><span className="corner-br"></span>
            <span className="corner-label">SAMPLE INFERENCE · {ex.emails.length} SOURCE THREADS</span>
            <span className="corner-meta">EXAMPLE</span>

            <div style={{
              display: "grid",
              gridTemplateColumns: "minmax(260px, 320px) 1fr",
              gap: 0, minHeight: 320, position: "relative"
            }}>
              <div style={{
                display: "flex", flexDirection: "column", gap: 10,
                justifyContent: "space-around",
                paddingRight: 14
              }}>
                {ex.emails.map((e, i) => (
                  <div key={i} style={{
                    background: i === 0 ? "var(--paper)" : "var(--paper-2)",
                    border: `1px solid ${i === 0 ? "var(--ink-5)" : "var(--rule)"}`,
                    borderRadius: 4,
                    padding: "10px 12px",
                    position: "relative"
                  }}>
                    <div style={{
                      fontFamily: "var(--font-mono)", fontSize: 10,
                      color: "var(--ink-4)", letterSpacing: "0.04em",
                      textTransform: "uppercase", marginBottom: 4
                    }}>{e.date}</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-2)", fontWeight: 500, lineHeight: 1.3 }}>{e.from}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.3, marginBottom: 4 }}>{e.subj}</div>
                    <div style={{
                      fontSize: 11.5, color: "var(--ink-4)",
                      fontStyle: "italic", lineHeight: 1.4,
                      textWrap: "pretty"
                    }}>"{e.excerpt}"</div>
                    <span style={{
                      position: "absolute", right: -4, top: "50%",
                      width: 8, height: 8, borderRadius: 50,
                      background: "var(--paper)",
                      border: "1.5px solid var(--accent)",
                      transform: "translateY(-50%)"
                    }}/>
                  </div>
                ))}
              </div>

              <div style={{
                display: "flex", alignItems: "center",
                paddingLeft: 36, position: "relative"
              }}>
                <svg style={{
                  position: "absolute", left: -8, top: 0,
                  width: 44, height: "100%", pointerEvents: "none", overflow: "visible"
                }} viewBox="0 0 44 320" preserveAspectRatio="none">
                  {[60, 160, 260].map((y, i) => (
                    <path key={i}
                      d={`M 0 ${y} C 18 ${y}, 28 160, 44 160`}
                      stroke="oklch(0.32 0.15 268)" strokeOpacity="0.5"
                      strokeWidth="1.2" fill="none" strokeDasharray="3 3"/>
                  ))}
                  <circle cx="44" cy="160" r="3" fill="oklch(0.32 0.15 268)"/>
                </svg>

                <div style={{ width: "100%" }}>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 10,
                    color: "var(--accent)", letterSpacing: "0.08em",
                    textTransform: "uppercase", marginBottom: 10
                  }}>— Reo infers —</div>
                  <InsightCard
                    agent={agent.name}
                    agentGlyph={agent.glyph}
                    headline={ex.headline}
                    sources={ex.sources}
                    audience={ex.audience}
                    primary={ex.primary}
                    secondary={ex.secondary}
                    highlighted
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          padding: "14px 22px",
          borderTop: "1px solid var(--rule)",
          background: "var(--paper-2)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 16, flexWrap: "wrap"
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 10.5,
            color: "var(--ink-3)", letterSpacing: "0.04em"
          }}>
            Example only · Reo will run this agent on your actual inbox once you connect.
          </span>
          <button onClick={() => { onClose(); onWaitlistClick?.(); }}
            className="reo-cta accent"
            style={{ height: 36, padding: "0 16px", fontSize: 13 }}>
            Join the waitlist <span className="arrow"/>
          </button>
        </div>
      </div>
    </div>
  );
}

function categoryLabel(id) {
  return ({
    patterns: "Patterns",
    safety:   "Privacy & safety",
    ops:      "Operations",
    custom:   "Custom"
  })[id] || id;
}

/* --- D. Differentiation --- */
function Differentiation() {
  // Original treatment: not a 2-column table. Two phrases stacked, then a
  // bracketed pair of source-citations that demonstrate the difference.
  return (
    <Section eyebrow="Differentiation" eyebrowMeta="03 / 06" borderTop bg="var(--paper-2)">
      <div className="section-head">
        <h2 className="title">
          Other tools <span style={{ color: "var(--ink-4)" }}>summarize what you've already read.</span><br/>
          Reo reads between.
        </h2>
      </div>
      <DiffComparison/>
    </Section>
  );
}

function DiffComparison() {
  const pairs = [
    {
      a: "Summarize what you've already seen",
      b: "Reads between your emails — patterns no single email reveals"
    },
    {
      a: "Opinionated single product",
      b: "Configurable team of agents you pick"
    },
    {
      a: "Hallucinates or guesses",
      b: "Sources every claim — says when it doesn't know"
    },
    {
      a: "Quiet about who sees the data",
      b: "Audience disclosed on every action"
    },
    {
      a: "Acts autonomously",
      b: "Waits for your click — every time"
    }
  ];
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      background: "var(--paper)",
      border: "1px solid var(--rule-2)",
      borderRadius: 6,
      overflow: "hidden"
    }}>
      {/* column heads */}
      <div style={{
        padding: "16px 28px",
        borderRight: "1px solid var(--rule)",
        borderBottom: "1px solid var(--rule)",
        background: "var(--paper-2)"
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--ink-4)", letterSpacing: "0.08em",
          textTransform: "uppercase"
        }}>The category</div>
        <div style={{ fontSize: 16, color: "var(--ink-3)", marginTop: 4 }}>
          Other AI inbox tools
        </div>
      </div>
      <div style={{
        padding: "16px 28px",
        borderBottom: "1px solid var(--rule)",
        background: "var(--accent-tint)"
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--accent)", letterSpacing: "0.08em",
          textTransform: "uppercase"
        }}>Reo</div>
        <div style={{ fontSize: 16, color: "var(--ink)", marginTop: 4 }}>
          What we do differently
        </div>
      </div>

      {pairs.map((p, i) => (
        <React.Fragment key={i}>
          <div style={{
            padding: "22px 28px",
            borderRight: "1px solid var(--rule)",
            borderBottom: i < pairs.length - 1 ? "1px solid var(--rule)" : "none",
            color: "var(--ink-4)", fontSize: 15.5,
            display: "flex", alignItems: "center",
            textWrap: "pretty"
          }}>
            <span style={{
              display: "inline-block", width: 14, height: 1,
              background: "var(--ink-5)", marginRight: 12, flexShrink: 0
            }}/>
            {p.a}
          </div>
          <div style={{
            padding: "22px 28px",
            borderBottom: i < pairs.length - 1 ? "1px solid var(--rule)" : "none",
            color: "var(--ink)", fontSize: 15.5,
            display: "flex", alignItems: "center",
            textWrap: "pretty"
          }}>
            <span style={{
              display: "inline-block", width: 14, height: 1,
              background: "var(--accent)", marginRight: 12, flexShrink: 0
            }}/>
            {p.b}
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

/* --- E. Privacy ---
 * Leads with tenant isolation (the headline claim), pairs it with a
 * user-controlled scope-selector gesture, then quarantine + audience.
 */
function Privacy() {
  return (
    <Section id="privacy" eyebrow="Privacy is the architecture" eyebrowMeta="05 / 06" borderTop>
      <div className="section-head">
        <h2 className="title">
          Your inbox lives in its own tenant.<br/>
          <span style={{ color: "var(--ink-4)" }}>Privacy is the architecture, not a section.</span>
        </h2>
        <a href="#" className="reo-link" style={{ fontSize: 13 }}>
          See how Reo handles your data →
        </a>
      </div>
      <PrivacyVariantC embed/>
    </Section>
  );
}

function DataFlowDiagram() {
  return (
    <div className="dotframe" style={{ padding: 22 }}>
      <span className="corner-bl"></span><span className="corner-br"></span>
      <span className="corner-label">DATA FLOW · CLOSED LOOP</span>
      <span className="corner-meta">FIG. 02</span>
      <svg viewBox="0 0 380 320" style={{ width: "100%", height: "auto", display: "block" }}>
        <defs>
          <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <path d="M0,0 L5,3 L0,6 z" fill="oklch(0.32 0.15 268)"/>
          </marker>
        </defs>

        {/* user node */}
        <g>
          <rect x="20" y="130" width="100" height="60" rx="4"
            fill="oklch(0.985 0.002 90)" stroke="oklch(0.45 0.008 270)" strokeWidth="1"/>
          <text x="70" y="156" textAnchor="middle"
            fontFamily="Geist, sans-serif" fontSize="13" fill="oklch(0.18 0.010 270)">You</text>
          <text x="70" y="174" textAnchor="middle"
            fontFamily="Geist Mono, monospace" fontSize="10"
            fill="oklch(0.45 0.008 270)" letterSpacing="0.04em">YOUR INBOX</text>
        </g>

        {/* reo node */}
        <g>
          <rect x="150" y="100" width="120" height="120" rx="6"
            fill="oklch(0.95 0.025 268)" stroke="oklch(0.32 0.15 268)" strokeWidth="1"/>
          <text x="210" y="150" textAnchor="middle"
            fontFamily="Geist, sans-serif" fontSize="14" fontWeight="500"
            fill="oklch(0.32 0.15 268)">Reo</text>
          <text x="210" y="170" textAnchor="middle"
            fontFamily="Geist Mono, monospace" fontSize="10"
            fill="oklch(0.32 0.15 268)" letterSpacing="0.04em">INFERENCE</text>
          <text x="210" y="186" textAnchor="middle"
            fontFamily="Geist Mono, monospace" fontSize="10"
            fill="oklch(0.32 0.15 268)" letterSpacing="0.04em">AGENTS</text>
        </g>

        {/* you-only node */}
        <g>
          <rect x="290" y="130" width="80" height="60" rx="4"
            fill="oklch(0.985 0.002 90)" stroke="oklch(0.45 0.008 270)" strokeWidth="1"/>
          <text x="330" y="156" textAnchor="middle"
            fontFamily="Geist, sans-serif" fontSize="13" fill="oklch(0.18 0.010 270)">You</text>
          <text x="330" y="174" textAnchor="middle"
            fontFamily="Geist Mono, monospace" fontSize="10"
            fill="oklch(0.45 0.008 270)" letterSpacing="0.04em">CHIP / DIGEST</text>
        </g>

        {/* arrows */}
        <path d="M 120 160 L 148 160" stroke="oklch(0.32 0.15 268)" strokeWidth="1.2" markerEnd="url(#arr)"/>
        <path d="M 270 160 L 288 160" stroke="oklch(0.32 0.15 268)" strokeWidth="1.2" markerEnd="url(#arr)"/>

        {/* loop arrow back */}
        <path d="M 330 130 Q 330 50, 210 60 Q 80 70, 70 130"
          stroke="oklch(0.32 0.15 268)" strokeWidth="1" strokeDasharray="3 3" fill="none" markerEnd="url(#arr)"/>
        <text x="200" y="50" textAnchor="middle"
          fontFamily="Geist Mono, monospace" fontSize="10"
          fill="oklch(0.45 0.008 270)" letterSpacing="0.06em">YOU CLICK · YOU SEND</text>

        {/* quarantine sidecar */}
        <g>
          <rect x="150" y="248" width="120" height="44" rx="3"
            fill="oklch(0.985 0.002 90)" stroke="oklch(0.84 0.004 85)" strokeWidth="1" strokeDasharray="3 3"/>
          <text x="210" y="266" textAnchor="middle"
            fontFamily="Geist Mono, monospace" fontSize="9"
            fill="oklch(0.45 0.008 270)" letterSpacing="0.06em">QUARANTINE</text>
          <text x="210" y="280" textAnchor="middle"
            fontFamily="Geist Mono, monospace" fontSize="9"
            fill="oklch(0.45 0.008 270)" letterSpacing="0.06em">HR · LEGAL · MEDICAL</text>
        </g>
        <path d="M 210 222 L 210 246" stroke="oklch(0.45 0.008 270)" strokeWidth="1" strokeDasharray="2 2"/>

        {/* nothing-leaves caption */}
        <text x="200" y="312" textAnchor="middle"
          fontFamily="Geist Mono, monospace" fontSize="10"
          fill="oklch(0.45 0.008 270)" letterSpacing="0.04em">
          NOTHING LEAVES UNTIL YOU CLICK.
        </text>
      </svg>
    </div>
  );
}

/* --- E.1. Enterprise security (compliance badges) --- */
function EnterpriseSecurity() {
  const frameworks = [
    { framework: "GDPR",      fullName: "General Data Protection Regulation",   targetQuarter: "Q3 2026", status: "in-progress" },
    { framework: "SOC 2",     fullName: "AICPA · Service Organization Control 2 (Type I)", targetQuarter: "Q3 2026", status: "in-progress" },
    { framework: "HIPAA",     fullName: "Health Insurance Portability & Accountability", targetQuarter: "Q4 2026", status: "in-progress" },
    { framework: "CASA T2",   fullName: "Cloud Application Security Assessment, Tier 2", targetQuarter: "Q2 2027", status: "planned" },
    { framework: "ISO 27001", fullName: "Information Security Management Systems", targetQuarter: "Q3 2027", status: "planned" }
  ];
  return (
    <Section id="security" eyebrow="Security & privacy" bg="var(--paper-2)" borderTop borderBottom>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        gap: 64, alignItems: "start", marginBottom: 56
      }}>
        <h2 style={{
          fontSize: 44, lineHeight: 1.05,
          letterSpacing: "-0.022em", fontWeight: 450,
          margin: 0, textWrap: "balance"
        }}>
          Enterprise-grade security.
        </h2>
        <p style={{
          fontSize: 18, lineHeight: 1.5,
          color: "var(--ink-2)", margin: 0, maxWidth: 540,
          textWrap: "pretty"
        }}>
          A staged roadmap. The frameworks below show what's underway today and what's planned next — we'll only claim a badge once the audit is signed.
        </p>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(5, 1fr)",
        gap: 18
      }}>
        {frameworks.map(f => (
          <ComplianceBadge key={f.framework} {...f}/>
        ))}
      </div>

      <div style={{
        marginTop: 40, paddingTop: 28,
        borderTop: "1px solid var(--rule)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 32, flexWrap: "wrap"
      }}>
        <p style={{
          fontSize: 15, color: "var(--ink-2)",
          margin: 0, maxWidth: 720, textWrap: "pretty",
          lineHeight: 1.55
        }}>
          <span style={{ color: "var(--ink)" }}>
            Controls in place; audits not yet complete.
          </span>{" "}
          The dedicated security page lists each framework, its current control coverage, the target completion quarter, and the auditor on each track when known.
        </p>
      </div>
    </Section>
  );
}

/* --- F. Trust signals (single anchor quote, no fabricated logos) --- */
/* --- F. Trust signals — horizontal auto-scrolling testimonial marquee.
 * Realistic names + roles, generic but credible company labels. */
const TESTIMONIES = [
  { quote: "Reo caught a six-figure renewal I was about to lose. The customer had asked the same question three times across two threads — I'd answered with the wrong version of the truth. Reo flagged the inconsistency before our QBR. We kept the contract.",
    name: "Maya Chen",     role: "Head of Customer Success",  org: "Top-3 SaaS unicorn",  initials: "MC" },
  { quote: "Three weeks in, Reo surfaced that two of my staff engineers were planning around different ship dates for the same launch. Both told me privately. Neither had told each other. I'd have noticed in week six.",
    name: "Priya Shah",    role: "Engineering Manager",       org: "FAANG",                initials: "PS" },
  { quote: "I run thirty client engagements at once. Reo is the only tool that's actually surfaced commitments I forgot — before the client did. Two saved engagements this quarter, call it $400K of partner-hours.",
    name: "Marcus Webb",   role: "Senior Partner",             org: "Big 4 consultancy",    initials: "MW" },
  { quote: "We had a regulatory commitment from January that the team had quietly dropped. Reo found it in week one. We fixed it before the next audit. That's not a feature — that's an existential save.",
    name: "Sarah Park",    role: "Founder",                    org: "Series B fintech",     initials: "SP" },
  { quote: "The Friday digest is the only weekly summary I actually read. Not because it's brief, but because every line has a source I can click. I've stopped opening half the threads I used to triage.",
    name: "David Yoon",    role: "Chief of Staff",             org: "Series C enterprise SaaS", initials: "DY" },
  { quote: "Privileged threads excluded at ingest — not \"maybe filtered later\" — was the difference between approving Reo and forwarding it to litigation. The audit trail makes it defensible.",
    name: "Anna Reyes",    role: "General Counsel",            org: "Pre-IPO healthcare platform", initials: "AR" },
  { quote: "Reo flagged that three prospects in active eval mentioned our two biggest competitors in the same week. I had positioning replies drafted before our Monday standup. We closed two of three.",
    name: "Tobi Adeyemi",  role: "VP Sales",                   org: "Top-10 vertical SaaS", initials: "TA" },
  { quote: "We were paying a vendor 14% more than we'd signed off on. Reo caught the diff inside the procurement thread. Three months of overcharges — about $72K — recovered on the next invoice cycle.",
    name: "Jenna Liu",     role: "Director of Operations",     org: "Fortune 500",          initials: "JL" },
  { quote: "I committed Customer Portal to two enterprise customers in the same quarter without realizing it. Reo flagged the conflict before either renewal call. That's a saved relationship I didn't know I was about to break.",
    name: "Rahul Sharma",  role: "Product Lead",               org: "Publicly-traded marketplace", initials: "RS" },
  { quote: "I bill by the hour, so \"saves time\" is gibberish to me. Saves errors is the real claim — and Reo catches the ones that would have cost a client. I've stopped relying on memory for what I committed when.",
    name: "Olivia Müller", role: "Principal",                  org: "Boutique strategy firm", initials: "OM" }
];

function TrustSignal() {
  return (
    <Section pad={[100, 120]} bg="var(--paper)">
      <div style={{
        maxWidth: 880, margin: "0 auto 56px",
        textAlign: "center",
        display: "flex", flexDirection: "column", gap: 18
      }}>
        <span className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>
          From design partners
        </span>
        <h2 style={{
          fontSize: 48, lineHeight: 1.05,
          letterSpacing: "-0.022em", fontWeight: 450,
          margin: 0, textWrap: "balance"
        }}>
          What people use Reo to catch.
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.5,
          color: "var(--ink-3)", margin: "0 auto",
          maxWidth: 560, textWrap: "pretty"
        }}>
          Real notes from real customers. Company names are kept generic at this stage — we'll publish logos at general availability.
        </p>
      </div>

      <TestimonyMarquee/>
    </Section>
  );
}

/* TestimonyMarquee — two infinite-scroll rows, opposite directions, pause on
 * hover. The duplicated set lets us loop seamlessly. */
function TestimonyMarquee() {
  // split into two rows so we get visible motion in opposite directions
  const rowA = TESTIMONIES.slice(0, 5);
  const rowB = TESTIMONIES.slice(5);

  return (
    <div style={{ position: "relative" }}>
      {/* CSS-only edge fades */}
      <div style={{
        position: "absolute", top: 0, bottom: 0, left: 0,
        width: 80, zIndex: 2, pointerEvents: "none",
        background: "linear-gradient(to right, var(--paper), oklch(0.985 0.002 90 / 0))"
      }}/>
      <div style={{
        position: "absolute", top: 0, bottom: 0, right: 0,
        width: 80, zIndex: 2, pointerEvents: "none",
        background: "linear-gradient(to left, var(--paper), oklch(0.985 0.002 90 / 0))"
      }}/>

      <MarqueeRow items={rowA} duration={60} direction="left"/>
      <div style={{ height: 18 }}/>
      <MarqueeRow items={rowB} duration={70} direction="right"/>
    </div>
  );
}

function MarqueeRow({ items, duration, direction }) {
  const doubled = [...items, ...items];
  const animName = direction === "right" ? "reo-marquee-r" : "reo-marquee-l";
  return (
    <div className="reo-marquee" style={{
      overflow: "hidden",
      maskImage: "linear-gradient(to right, transparent, black 4%, black 96%, transparent)"
    }}>
      <div style={{
        display: "flex",
        gap: 18,
        width: "max-content",
        animation: `${animName} ${duration}s linear infinite`
      }}>
        {doubled.map((t, i) => (
          <TestimonyCard key={i} {...t}/>
        ))}
      </div>
    </div>
  );
}

function TestimonyCard({ quote, name, role, org, initials }) {
  return (
    <article style={{
      width: 380, flexShrink: 0,
      background: "var(--paper)",
      border: "1px solid var(--rule-2)",
      borderRadius: 8,
      padding: "22px 24px",
      display: "flex", flexDirection: "column", gap: 18,
      minHeight: 224
    }}>
      <span style={{
        fontFamily: "var(--font-mono)", fontSize: 26, color: "var(--accent)",
        lineHeight: 0.8, height: 14, fontWeight: 500
      }}>"</span>
      <p style={{
        margin: 0, fontSize: 14.5, lineHeight: 1.5,
        color: "var(--ink-2)", letterSpacing: "-0.005em",
        textWrap: "pretty", flex: 1
      }}>{quote}</p>
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        paddingTop: 14, borderTop: "1px solid var(--rule)"
      }}>
        <span style={{
          width: 32, height: 32, borderRadius: 50,
          background: "var(--paper-3)",
          border: "1px solid var(--rule-2)",
          color: "var(--ink-2)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-mono)", fontSize: 11,
          letterSpacing: "0.02em",
          flexShrink: 0
        }}>{initials}</span>
        <div style={{ minWidth: 0, lineHeight: 1.35 }}>
          <div style={{ fontSize: 13.5, fontWeight: 500, color: "var(--ink)" }}>{name}</div>
          <div style={{
            fontSize: 12, color: "var(--ink-3)",
            display: "flex", alignItems: "center", gap: 6,
            flexWrap: "wrap"
          }}>
            <span>{role}</span>
            <span style={{ color: "var(--ink-5)" }}>·</span>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 10.5,
              color: "var(--ink-4)", letterSpacing: "0.02em"
            }}>{org}</span>
          </div>
        </div>
      </div>
    </article>
  );
}

/* --- G. Pricing --- */
function Pricing() {
  const tiers = [
    {
      name: "Solo", price: "$29", per: "/ month per user",
      tag: "For one inbox, one set of agents.",
      features: [
        "14-day free trial",
        "All 12 Skills",
        "Friday digest",
        "Real-time chips in Gmail / Outlook",
        "Personal Skills, kept private"
      ],
      cta: "Try free", accent: true
    },
    {
      name: "Team", price: "$59", per: "/ seat / month · min 3 seats",
      tag: "Shared Skills, admin, audience disclosure.",
      features: [
        "Everything in Solo",
        "Shared Skills across teammates",
        "Admin console + audit log",
        "Audience tags on every action",
        "Slack & shared digest"
      ],
      cta: "Try Team", accent: false
    },
    {
      name: "Enterprise", price: "Custom", per: "",
      tag: "For regulated industries and large teams.",
      features: [
        "Everything in Team",
        "SSO, SCIM, data residency",
        "SOC 2 / HIPAA / ISO 27001 / GDPR / CASA — in progress",
        "Dedicated security review",
        "Negotiated DPA"
      ],
      cta: "Contact us", accent: false
    }
  ];
  return (
    <Section id="pricing" eyebrow="Pricing" eyebrowMeta="01 / 03" borderTop>
      <div className="section-head">
        <h2 className="title">Plain pricing.</h2>
        <span className="meta">No tiered feature anxiety</span>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 18
      }}>
        {tiers.map(t => (
          <div key={t.name} style={{
            background: t.accent ? "var(--ink)" : "var(--paper)",
            color: t.accent ? "var(--paper)" : "var(--ink)",
            border: `1px solid ${t.accent ? "var(--ink)" : "var(--rule-2)"}`,
            borderRadius: 6,
            padding: "32px 28px",
            display: "flex", flexDirection: "column", gap: 24,
            position: "relative", minHeight: 540
          }}>
            <div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11,
                color: t.accent ? "oklch(0.75 0.04 268)" : "var(--ink-4)",
                letterSpacing: "0.06em", textTransform: "uppercase"
              }}>{t.name}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 12 }}>
                <span style={{
                  fontSize: 44, fontWeight: 450,
                  letterSpacing: "-0.025em", lineHeight: 1
                }}>{t.price}</span>
                <span style={{
                  fontSize: 13,
                  color: t.accent ? "oklch(0.75 0.04 268)" : "var(--ink-3)"
                }}>{t.per}</span>
              </div>
              <p style={{
                fontSize: 14, lineHeight: 1.5,
                color: t.accent ? "oklch(0.78 0.04 268)" : "var(--ink-3)",
                margin: "10px 0 0 0", textWrap: "pretty"
              }}>{t.tag}</p>
            </div>

            <ul style={{
              listStyle: "none", padding: 0, margin: 0,
              display: "flex", flexDirection: "column", gap: 10
            }}>
              {t.features.map(f => (
                <li key={f} style={{
                  display: "flex", gap: 10, fontSize: 13.5,
                  lineHeight: 1.5,
                  color: t.accent ? "oklch(0.92 0.01 268)" : "var(--ink-2)",
                  textWrap: "pretty"
                }}>
                  <span style={{
                    width: 12, height: 1, marginTop: 10, flexShrink: 0,
                    background: t.accent ? "oklch(0.55 0.10 268)" : "var(--ink-5)"
                  }}/>
                  {f}
                </li>
              ))}
            </ul>

            <div style={{ marginTop: "auto" }}>
              <button className={t.accent ? "reo-cta accent" : "reo-cta"}
                style={{
                  width: "100%", justifyContent: "center",
                  background: t.accent ? "var(--accent)" : "var(--ink)",
                  borderColor: t.accent ? "var(--accent)" : "var(--ink)"
                }}>
                {t.cta} <span className="arrow"/>
              </button>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* --- H. FAQ --- */
function FAQ({ onContactClick }) {
  const faqs = [
    { q: "Is my account separated from other users' data?",
      a: "Yes. Each signed-in account is its own tenant — its own storage, its own embeddings, its own agents. There is no shared index across users, no model trained on your mail, and no Reo engineer who can read across tenants. Reo admins see system metrics and aggregate counts only." },
    { q: "How much of my email does Reo actually read?",
      a: "You decide during onboarding (and you can change it any time in Settings → Privacy). Two dimensions: historical scope from 30 days through all time (90 days is the default), and forward scope across eight categories — emails sent directly to you, threads you've replied to, your sent mail, CC, BCC, prior contacts, labels, or all incoming. Defaults err conservative." },
    { q: "Does Reo act on my emails or send anything for me?",
      a: "No. Reo never acts autonomously. It surfaces and drafts; you click to send, file, or post — every time. The OAuth scope is read-only at install; send-on-your-behalf is requested separately and only when you opt into a specific action. There is no auto-reply mode and there will not be one." },
    { q: "What kind of email does Reo skip by default?",
      a: "Newsletters, marketing, automated and transactional messages (receipts, password resets, calendar notifications), and CC-for-archive threads. Sensitive threads — HR, medical, financial, legal, privileged, personal — are auto-quarantined and never read unless you explicitly opt in per category." },
    { q: "How fast do I see value?",
      a: "Under a minute. Reo runs your agents across two streams from day one: a back-scan of the email history you authorized (so the very first digest contains real inferences across months of context, not a warm-up run) and a live watch on every new thread matching your forward scope — sent to you, threads you've replied to, your sent mail, and anything else you chose. You see value immediately, and inferences keep landing as your inbox moves. Precision sharpens further as Reo learns which signals you act on." },
    { q: "Can I author my own agents, or am I limited to the library?",
      a: "Both. The library ships with twelve inference agents grouped into Patterns, Privacy & safety, Operations, and Custom. You can also describe an agent in one plain-English sentence (\"flag any email mentioning our competitors by name\") and Reo will author it for you. You can edit any agent — built-in or custom — and turn it on or off per inbox." },
    { q: "How do I cancel and remove my data?",
      a: "One click in Settings. Your account, embeddings, agents, and digest history are deleted within 30 days. An export of everything Reo has ever inferred is available before deletion. No retention exceptions, no \"keep for analytics.\"" },
    { q: 'Why "inference agents"?',
      a: "Because Reo doesn't summarize. It draws conclusions across emails — patterns that no single email reveals on its own. A commitment slipping across three threads. A customer told different stories about the same feature. A decision half-made that never closed. That's inference, not summarization." },
    { q: "Are you SOC 2 / HIPAA / ISO 27001 / GDPR / CASA certified?",
      a: "Not yet — and we won't claim a badge until it's been earned. Three are actively underway today: GDPR and SOC 2 Type I (both Q3 2026) and HIPAA (Q4 2026). The remaining two — CASA Tier 2 (Q2 2027) and ISO 27001 (Q3 2027) — are scoped on the roadmap; we'll begin once SOC 2 baseline controls are in place. The Security & privacy section above shows the staged plan with target quarters." }
  ];
  return (
    <Section eyebrow="Questions" eyebrowMeta="06 / 06" borderTop>
      <div className="section-head">
        <h2 className="title">Questions people ask.</h2>
        <span className="meta">9 questions · ≤ 3 sentences each</span>
      </div>
      <div style={{ borderTop: "1px solid var(--rule)" }}>
        {faqs.map((f, i) => <FAQItem key={f.q} {...f} initialOpen={i === 0}/>)}
      </div>
      <div style={{
        marginTop: 28,
        padding: "18px 22px",
        background: "var(--paper-2)",
        border: "1px solid var(--rule-2)",
        borderRadius: 6,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 16, flexWrap: "wrap"
      }}>
        <span style={{
          fontSize: 15, color: "var(--ink-2)",
          textWrap: "pretty", maxWidth: 480
        }}>
          Have a question that isn't here? A real person on the team will reply within a day.
        </span>
        <button onClick={onContactClick}
          style={{
            background: "var(--ink)", color: "var(--paper)",
            border: "1px solid var(--ink)",
            borderRadius: 4, padding: "9px 16px",
            fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 500,
            cursor: "pointer", whiteSpace: "nowrap"
          }}>
          Send us a message →
        </button>
      </div>
    </Section>
  );
}

/* --- I. Final CTA — opens the full waitlist form --- */
function FinalCTA({ onWaitlistClick, onContactClick }) {
  return (
    <Section eyebrow="Join the waitlist" pad={[120, 160]} borderTop>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        alignItems: "end", gap: 64
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <h2 style={{
            fontSize: 88, lineHeight: 0.98,
            letterSpacing: "-0.035em", fontWeight: 450,
            margin: 0, color: "var(--ink)",
            textWrap: "balance"
          }}>
            See what your inbox<br/>isn't telling you.
          </h2>
          <p style={{
            fontSize: 20, color: "var(--ink-2)",
            margin: 0, maxWidth: 520, textWrap: "pretty"
          }}>
            The patterns no single email reveals — with sources, ready for one click.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "stretch", gap: 14 }}>
          <InlineWaitlist onExpand={onWaitlistClick}/>
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 16, flexWrap: "wrap",
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--ink-4)", letterSpacing: "0.04em"
          }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 10, height: 1, background: "var(--ink-5)" }}/>
              Gmail and Outlook · cancel anytime
            </span>
            <a onClick={onContactClick} style={{
              color: "var(--ink-2)", textDecoration: "none",
              borderBottom: "1px solid var(--rule-strong)",
              paddingBottom: 1, cursor: "pointer",
              letterSpacing: "0.02em"
            }}>
              Have a question? →
            </a>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* --- J. Footer --- */
function Footer({ onContactClick }) {
  const goTo = (e, href) => {
    if (href.startsWith("#")) {
      e.preventDefault();
      const el = document.querySelector(href);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };
  return (
    <footer style={{
      borderTop: "1px solid var(--rule)",
      background: "var(--paper)"
    }}>
      <div className="reo-section-container reo-footer-grid" style={{
        maxWidth: CONTAINER_MAX, margin: "0 auto",
        padding: `72px ${SECTION_PAD_X}px 0`,
        display: "grid",
        gridTemplateColumns: "1fr auto",
        gap: 48, alignItems: "start"
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 14, maxWidth: 480 }}>
          <ReoMark size={32} clickable/>
          <p style={{
            fontSize: 16, lineHeight: 1.6,
            color: "var(--ink-2)", margin: 0,
            textWrap: "pretty"
          }}>
            Inference agents for your inbox. Configurable, source-first, and quiet about it.
          </p>
        </div>

        <nav className="reo-footer-nav" style={{
          display: "flex", alignItems: "center", gap: 22,
          flexWrap: "wrap"
        }}>
          {[
            { label: "How it works", href: "#how" },
            { label: "Agents",       href: "#skills" },
            { label: "Privacy",      href: "#privacy" },
            { label: "Security",     href: "#security" }
          ].map(item => (
            <a key={item.label} href={item.href}
              onClick={(e) => goTo(e, item.href)}
              style={{
                color: "var(--ink-3)", textDecoration: "none",
                fontSize: 14, letterSpacing: "-0.005em",
                whiteSpace: "nowrap", cursor: "pointer"
              }}>{item.label}</a>
          ))}
          <button onClick={onContactClick}
            style={{
              background: "transparent",
              border: "1px solid var(--rule-strong)",
              borderRadius: 4, padding: "7px 14px",
              fontFamily: "var(--font-sans)", fontSize: 13,
              color: "var(--ink-2)", cursor: "pointer",
              letterSpacing: "-0.005em", whiteSpace: "nowrap"
            }}>
            Contact us
          </button>
        </nav>
      </div>

      <div className="reo-section-container reo-footer-bottom" style={{
        maxWidth: CONTAINER_MAX, margin: "60px auto 0",
        padding: `22px ${SECTION_PAD_X}px 36px`,
        borderTop: "1px solid var(--rule)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 16, flexWrap: "wrap",
        fontFamily: "var(--font-mono)", fontSize: 11,
        color: "var(--ink-4)", letterSpacing: "0.04em"
      }}>
        <span>© 2026 Reo · getreo.ai</span>
        <span style={{ color: "var(--ink-3)" }}>
          Every signal worth catching.
        </span>
      </div>
    </footer>
  );
}

/* ============================================================ Full page */
/* ============================================================ Full page */
function ReoFullPage() {
  const [waitlist, setWaitlist] = useS(false);
  const [contact, setContact]   = useS(false);
  const openWaitlist = () => setWaitlist(true);
  const openContact  = () => setContact(true);

  // Allow nested modals / cross-component triggers (e.g. "Have a question?"
  // link inside WaitlistModal) to open the contact form.
  React.useEffect(() => {
    const h = () => setContact(true);
    window.addEventListener("reo:open-contact", h);
    return () => window.removeEventListener("reo:open-contact", h);
  }, []);

  return (
    <div className="reo-page" style={{ background: "var(--paper)", color: "var(--ink)" }}>
      <PageNav onWaitlistClick={openWaitlist}/>
      <Hero onWaitlistClick={openWaitlist}/>
      <GettingStarted onWaitlistClick={openWaitlist}/>
      <HowItWorks/>
      <SkillsTeaser onWaitlistClick={openWaitlist}/>
      <Differentiation/>
      <Privacy/>
      <EnterpriseSecurity/>
      <FAQ onContactClick={openContact}/>
      <FinalCTA onWaitlistClick={openWaitlist} onContactClick={openContact}/>
      <Footer onContactClick={openContact}/>
      <WaitlistModal open={waitlist} onClose={() => setWaitlist(false)}/>
      <ContactModal  open={contact}  onClose={() => setContact(false)}/>
    </div>
  );
}

Object.assign(window, { ReoFullPage });
