// All non-hero sections

// ── Capability icons (tiny, thin line) ────────────────────
const IconInspect = () => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1">
    <circle cx="9" cy="9" r="6"/>
    <path d="M13.5 13.5 L19 19"/>
    <path d="M9 6 L9 12 M6 9 L12 9"/>
  </svg>
);
const IconTransform = () => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1">
    <rect x="2" y="2" width="7" height="7"/>
    <rect x="13" y="13" width="7" height="7"/>
    <path d="M9 5.5 L13 5.5 M13 5.5 L11 3.5 M13 5.5 L11 7.5"/>
    <path d="M13 16.5 L9 16.5 M9 16.5 L11 14.5 M9 16.5 L11 18.5"/>
  </svg>
);
const IconGenerate = () => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1">
    <path d="M3 6 L7 11 L3 16"/>
    <path d="M10 16 L19 16"/>
  </svg>
);
const IconAutomate = () => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1">
    <circle cx="5" cy="5" r="2"/>
    <circle cx="17" cy="5" r="2"/>
    <circle cx="5" cy="17" r="2"/>
    <circle cx="17" cy="17" r="2"/>
    <path d="M5 7 L5 15 M7 5 L15 5 M17 7 L17 15 M7 17 L15 17"/>
  </svg>
);

// ── Problem ────────────────────────────────────────────────
const Problem = () => (
  <section className="section" id="problem">
    <div className="gutter-label">[02] / PROBLEM</div>
    <div className="shell section-inner">
      <div className="problem-head">
        <h2 className="h-section">
          The browser is where work happens.<br/>
          <span style={{ color: "var(--ink-dim)" }}>The tools live somewhere else.</span>
        </h2>
        <p className="lede">
          Every day, power users copy page content into AI chats, inspect elements manually, scrape tables,
          write scripts, switch tabs, build workflows, and repeat the same browser actions over and over.
          AltRightClick collapses that loop into one gesture.
        </p>
      </div>

      <div className="compare">
        <div className="compare-col">
          <div className="compare-head bad">
            <span>Before</span>
            <span>5 steps</span>
          </div>
          <div className="compare-list">
            {["Copy from page", "Switch tools", "Rebuild context", "Generate output", "Paste somewhere else"].map((t, i) => (
              <div key={i} className="compare-item muted">
                <span className="num">0{i + 1}</span>
                <span>{t}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="compare-arrow"/>
        <div className="compare-col">
          <div className="compare-head good">
            <span>After</span>
            <span>3 steps</span>
          </div>
          <div className="compare-list">
            {[
              { t: "Highlight",        s: null },
              { t: "Alt + right-click", s: <KbdCombo keys={["ALT", "RCLICK"]}/> },
              { t: "Execute",          s: null },
            ].map((row, i) => (
              <div key={i} className="compare-item">
                <span className="num">0{i + 1}</span>
                <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  {row.t}
                  {row.s}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── Capability ─────────────────────────────────────────────
const Capability = () => {
  const blocks = [
    { n: "01", Icon: IconInspect,   title: "Inspect",   blurb: "Understand what is on the page.",
      list: ["Explain selected UI", "Detect page structure", "Generate selectors", "Identify forms, tables, entities"] },
    { n: "02", Icon: IconTransform, title: "Transform", blurb: "Turn messy web content into clean output.",
      list: ["Table to JSON", "Page to summary", "Text to email", "Selection to Markdown"] },
    { n: "03", Icon: IconGenerate,  title: "Generate",  blurb: "Create technical assets from browser context.",
      list: ["Playwright tests", "Puppeteer scripts", "Bug reports", "API payloads"] },
    { n: "04", Icon: IconAutomate,  title: "Automate",  blurb: "Trigger workflows from the page.",
      list: ["Send to webhook", "Push to n8n", "Add to Airtable", "Run reusable commands"] },
  ];
  return (
    <section className="section" id="capability">
      <div className="gutter-label">[03] / CAPABILITY</div>
      <div className="shell section-inner">
        <div className="problem-head">
          <h2 className="h-section">
            One gesture.<br/>
            <span className="accent-text">Four superpowers.</span>
          </h2>
          <p className="lede">
            Every action is contextual — the command knows what you selected, what page you're on,
            and what comes next.
          </p>
        </div>
        <div className="cap-grid">
          {blocks.map((b, i) => (
            <div key={i} className="cap-block">
              <div className="cap-num">{b.n}</div>
              <div className="cap-icon"><b.Icon/></div>
              <h3 className="cap-title">{b.title}</h3>
              <p className="cap-blurb">{b.blurb}</p>
              <ul className="cap-list">
                {b.list.map((l, j) => <li key={j}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Flow ──────────────────────────────────────────────────
const FlowVisual = ({ variant }) => {
  if (variant === "select") {
    return (
      <div style={{ padding: 18, position: "relative", height: "100%" }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-faint)",
          letterSpacing: "0.14em", marginBottom: 10,
        }}>SELECTION · 142 CHARS</div>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-dim)", lineHeight: 1.6,
        }}>
          <span>The quick brown fox </span>
          <span style={{ background: "var(--accent)", color: "#0A0A0B", padding: "1px 2px" }}>jumps over the lazy dog</span>
          <span> and lands in the tree.</span>
        </div>
      </div>
    );
  }
  if (variant === "click") {
    return (
      <div style={{ padding: 0, position: "relative", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
        <KbdCombo keys={["ALT", "RCLICK"]}/>
      </div>
    );
  }
  return (
    <div style={{ padding: 14, height: "100%", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-dim)" }}>
      <div style={{ color: "var(--ink-faint)", marginBottom: 6 }}>$ arc run extract.json</div>
      <div style={{ color: "var(--accent)" }}>→ 14 rows · 4 cols · 0 errors</div>
      <div style={{ color: "var(--ink-dim)", marginTop: 4 }}>✓ written to clipboard</div>
    </div>
  );
};

const Flow = () => {
  const steps = [
    { n: "01", title: "Select anything", sub: "Text, tables, links, forms, UI elements, or page sections.", v: "select" },
    { n: "02", title: "Alt + right-click", sub: "Open a contextual command menu built for power users.", v: "click" },
    { n: "03", title: "Execute", sub: "Extract data, generate code, trigger workflows, or save the command for later.", v: "exec" },
  ];
  return (
    <section className="section" id="how">
      <div className="gutter-label">[04] / FLOW</div>
      <div className="shell section-inner">
        <div className="problem-head">
          <h2 className="h-section">How it works</h2>
          <p className="lede">
            Three steps, no context-switch. The command menu appears where your cursor already is.
          </p>
        </div>
        <div className="flow">
          {steps.map((s, i) => (
            <div key={i} className="flow-step">
              <div className="flow-step-num">
                <span><span className="dot"/> STEP {s.n}</span>
                <span>{i < 2 ? "→" : "◼"}</span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.sub}</p>
              <div className="flow-visual"><FlowVisual variant={s.v}/></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Use Cases ─────────────────────────────────────────────
const UseCases = () => {
  const cards = [
    { label: "01 · DEVELOPERS", title: "Developers",
      body: "Copy selectors, generate tests, turn pages into structured data, capture bugs with full context, and create browser automation scripts.",
      micro: "From page to code in seconds." },
    { label: "02 · OPERATORS", title: "Operators",
      body: "Extract admin data, summarize pages, automate research, move browser context into systems, and standardize repeated workflows.",
      micro: "Turn browser work into process." },
    { label: "03 · BUILDERS", title: "Automation Builders",
      body: "Create reusable commands, trigger n8n workflows, send data to webhooks, and build command packs for repeatable actions.",
      micro: "Make the browser programmable." },
  ];
  return (
    <section className="section" id="users">
      <div className="gutter-label">[05] / AUDIENCE</div>
      <div className="shell section-inner">
        <div className="problem-head">
          <h2 className="h-section">
            Built for people who bend<br/>
            tools to their will.
          </h2>
          <p className="lede">
            Three ways teams use the same gesture — each with its own command library.
          </p>
        </div>
        <div className="uc-grid">
          {cards.map((c, i) => (
            <div key={i} className="uc-card">
              <div className="uc-label">
                <span>{c.label}</span>
                <span>↗</span>
              </div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <div className="uc-micro">
                <span className="uc-arrow">→</span>
                <span>{c.micro}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Differentiation ───────────────────────────────────────
const Matrix = () => {
  const rows = [
    ["Works inside Chrome",                ["✓","—","—","✓"]],
    ["Understands selected page context",  ["~","✓","—","✓"]],
    ["Turns page into structured output",  ["—","~","~","✓"]],
    ["Generates developer utilities",      ["—","—","—","✓"]],
    ["Triggers automations",               ["—","—","✓","✓"]],
    ["Saves reusable commands",            ["—","—","~","✓"]],
    ["Built around right-click behavior",  ["—","—","—","✓"]],
  ];
  const cell = (v, isUs) => {
    let node;
    if (v === "✓") node = <span className={isUs ? "check" : "partial"}>✓</span>;
    else if (v === "~") node = <span className="partial">~</span>;
    else node = <span className="cross">—</span>;
    return <div className={`matrix-cell ${isUs ? "us-col" : ""}`}>{node}</div>;
  };
  return (
    <section className="section" id="differ">
      <div className="gutter-label">[06] / DIFFERENCE</div>
      <div className="shell section-inner">
        <div className="problem-head">
          <h2 className="h-section">Not another AI sidebar.</h2>
          <p className="lede">
            AltRightClick does not ask you to move your work into another chat window. It brings
            commands directly to the page you are already using.
          </p>
        </div>
        <div className="matrix">
          <div className="matrix-row matrix-head">
            <div>Capability</div>
            <div style={{ justifyContent: "center" }}>Generic AI Sidebar</div>
            <div style={{ justifyContent: "center" }}>AI Browser</div>
            <div style={{ justifyContent: "center" }}>Automation Tool</div>
            <div className="us" style={{ justifyContent: "center", color: "var(--accent)" }}>AltRightClick</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="matrix-row">
              <div className="feature">{r[0]}</div>
              {cell(r[1][0], false)}
              {cell(r[1][1], false)}
              {cell(r[1][2], false)}
              {cell(r[1][3], true)}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Command grid ──────────────────────────────────────────
const Commands = () => {
  const items = [
    { t: "Extract pricing table as JSON", tag: "DATA" },
    { t: "Generate Playwright test from this form", tag: "QA" },
    { t: "Summarize this documentation page", tag: "AI" },
    { t: "Create bug report from selected UI", tag: "DEVELOPER" },
    { t: "Send lead data to webhook", tag: "AUTOMATION" },
    { t: "Copy CSS selector", tag: "DEVELOPER" },
    { t: "Compare this tab with another tab", tag: "OPERATOR" },
    { t: "Rewrite this field for clarity", tag: "AI" },
    { t: "Turn this page into an n8n workflow", tag: "AUTOMATION" },
    { t: "Save this action as a reusable command", tag: "OPERATOR" },
    { t: "Diff this release notes page", tag: "DEVELOPER" },
    { t: "Scrape product catalog → CSV", tag: "DATA" },
  ];
  return (
    <section className="section" id="commands">
      <div className="gutter-label">[07] / COMMANDS</div>
      <div className="shell section-inner">
        <div className="problem-head">
          <h2 className="h-section">
            Commands worth<br/><span className="accent-text">stealing.</span>
          </h2>
          <p className="lede">
            Start from the library, fork what's useful, build your own. Commands are shareable,
            version-controlled, and ship with a schema.
          </p>
        </div>
        <div className="cmd-grid">
          {items.map((c, i) => (
            <div key={i} className="cmd-card">
              <div className="cmd-top">
                <span className="cmd-prompt">› CMD_{String(i + 1).padStart(2, "0")}</span>
                <span className="cmd-tag">{c.tag}</span>
              </div>
              <div className="cmd-text">{c.t}</div>
              <div className="cmd-run">
                <span>RUN</span>
                <span>⏎</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Architecture ─────────────────────────────────────────
const Arch = () => {
  const nodes = [
    { n: "Browser Page" },
    { n: "ARC Extension", accent: true },
    { n: "Context Engine" },
    { n: "Command Library" },
    { n: "AI Actions" },
    { n: "Automation Connectors" },
    { n: "Control Plane" },
  ];
  const caps = [
    "Chrome extension", "Context-aware commands", "AI action layer",
    "Webhook triggers", "n8n export", "Playwright export",
    "Saved command packs", "Team command libraries", "Usage & workflow history",
  ];
  return (
    <section className="section" id="arch">
      <div className="gutter-label">[08] / ARCHITECTURE</div>
      <div className="shell section-inner">
        <div className="problem-head">
          <h2 className="h-section">
            A lightweight extension.<br/>
            A serious command layer.
          </h2>
          <p className="lede">
            The extension is the wedge. The command layer is the platform — shared across tabs,
            sessions, and teammates.
          </p>
        </div>
        <div className="arch">
          <div className="arch-flow">
            {nodes.map((node, i) => (
              <React.Fragment key={i}>
                <div className={`arch-node ${node.accent ? "accent" : ""}`}>
                  <div className="arch-node-num">NODE · {String(i + 1).padStart(2, "0")}</div>
                  <div className="arch-node-name">{node.n}</div>
                </div>
                {i < nodes.length - 1 && <div className="arch-arrow">→</div>}
              </React.Fragment>
            ))}
          </div>
          <div className="arch-caps">
            {caps.map((c, i) => <div key={i} className="arch-cap">{c}</div>)}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Early access form ───────────────────────────────────
const EarlyAccess = () => {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section" id="early-access">
      <div className="gutter-label">[09] / ACCESS</div>
      <div className="shell section-inner">
        <div className="form-wrap">
          <div>
            <h2 className="h-section">
              Get the shortcut<br/>
              <span className="accent-text">before everyone else.</span>
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              AltRightClick is being built for developers, operators, and automation builders who want
              faster ways to command the web.
            </p>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                "Priority extension access",
                "Full command library",
                "Early team features",
              ].map((t, i) => (
                <div key={i} style={{
                  fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-dim)",
                  display: "flex", gap: 10,
                }}>
                  <span style={{ color: "var(--accent)" }}>✓</span> {t}
                </div>
              ))}
            </div>
          </div>

          <form className="form-card" onSubmit={submit}>
            {sent ? (
              <div style={{ padding: "40px 0", textAlign: "center" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--accent)", letterSpacing: "0.14em" }}>● REQUEST QUEUED</div>
                <h3 className="h-block" style={{ marginTop: 20 }}>You're on the list.</h3>
                <p style={{ color: "var(--ink-dim)", fontSize: 14, marginTop: 10 }}>
                  We'll send the extension when your slot opens.
                </p>
              </div>
            ) : (
              <>
                <div className="form-row">
                  <label>Email</label>
                  <input type="email" placeholder="you@company.com" required/>
                </div>
                <div className="form-row">
                  <label>Role</label>
                  <select required defaultValue="">
                    <option value="" disabled>Select a role…</option>
                    <option>Developer</option>
                    <option>Founder</option>
                    <option>Operator</option>
                    <option>Automation Builder</option>
                    <option>Other</option>
                  </select>
                </div>
                <div className="form-row">
                  <label>What browser task do you repeat every week? <span style={{ color: "var(--ink-faint)" }}>(optional)</span></label>
                  <textarea placeholder="e.g. scraping pricing tables, building Playwright tests, summarizing vendor docs…"/>
                </div>
                <button className="btn btn-primary" type="submit" style={{ width: "100%", justifyContent: "center" }}>
                  Request Early Access <span className="arrow">→</span>
                </button>
                <div className="form-trust">
                  No spam. No generic productivity newsletter.<br/>
                  Just product access and build updates.
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

// ── Final CTA ────────────────────────────────────────────
const Final = () => (
  <section className="final shell">
    <h2>
      The browser already has a right-click menu.<br/>
      <span className="accent-line">Now give it a brain.</span>
    </h2>
    <a href="#early-access" className="btn btn-primary" style={{ padding: "18px 28px", fontSize: 14 }}>
      Join Early Access <span className="arrow">→</span>
    </a>
    <div className="final-hint">
      <KbdCombo keys={["ALT", "RCLICK"]}/> &nbsp; · &nbsp; TRY IT ON ANY PAGE
    </div>
  </section>
);

// ── Footer ──────────────────────────────────────────────
const Footer = () => (
  <footer className="footer">
    <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
      <span style={{ color: "var(--ink)" }}>AltRightClick.com</span>
      <span style={{ color: "var(--ink-faint)" }}>·</span>
      <span>The power-user shortcut for the web.</span>
    </div>
    <div className="footer-links">
      <a href="#">Privacy</a>
      <a href="#">Contact</a>
      <a href="#">X/Twitter</a>
      <a href="#">GitHub</a>
    </div>
  </footer>
);

Object.assign(window, {
  Problem, Capability, Flow, UseCases, Matrix, Commands, Arch, EarlyAccess, Final, Footer,
});