// Hero + browser mockup with context menu and ARC menu

const Kbd = ({ children }) => <span className="kbd">{children}</span>;

const KbdCombo = ({ keys }) => (
  <span className="kbd-group">
    {keys.map((k, i) => (
      <React.Fragment key={i}>
        {i > 0 && <span className="kbd-plus">+</span>}
        <Kbd>{k}</Kbd>
      </React.Fragment>
    ))}
  </span>
);

const CursorArrow = ({ style }) => (
  <div className="cursor" style={style}>
    <svg viewBox="0 0 18 22" width="18" height="22">
      <path
        d="M1 1 L1 17 L5.5 13 L8.3 19 L11 18 L8 12 L14 12 Z"
        fill="#F5F4EF"
        stroke="#0A0A0B"
        strokeWidth="0.8"
        strokeLinejoin="round"
      />
    </svg>
  </div>
);

const Hero = () => {
  const [activeIdx, setActiveIdx] = React.useState(1);
  const [cursorPos, setCursorPos] = React.useState({ top: 210, left: 180 });

  React.useEffect(() => {
    const path = [
      { top: 210, left: 180, active: 1, d: 2800 },
      { top: 236, left: 210, active: 2, d: 1800 },
      { top: 258, left: 230, active: 3, d: 1800 },
      { top: 284, left: 250, active: 4, d: 1800 },
      { top: 310, left: 270, active: 5, d: 2400 },
      { top: 230, left: 200, active: 1, d: 2600 },
    ];
    let i = 0;
    let timer;
    const tick = () => {
      const p = path[i];
      setCursorPos({ top: p.top, left: p.left });
      setActiveIdx(p.active);
      i = (i + 1) % path.length;
      timer = setTimeout(tick, p.d);
    };
    timer = setTimeout(tick, 1400);
    return () => clearTimeout(timer);
  }, []);

  const arcItems = [
    { label: "Extract as JSON",           sc: "E" },
    { label: "Generate Playwright Test",  sc: "P" },
    { label: "Summarize Page",            sc: "S" },
    { label: "Send to Webhook",           sc: "W" },
    { label: "Create n8n Workflow",       sc: "N" },
    { label: "Copy CSS Selector",         sc: "C" },
    { label: "Rewrite Field",             sc: "R" },
    { label: "Build Command…",            sc: "⌘K" },
  ];

  return (
    <section className="hero shell">
      <div className="hero-grid">
        <div className="hero-left">
          <div className="hero-eyebrow-row">
            <KbdCombo keys={["ALT", "RCLICK"]} />
            <span className="shortcut">SHORTCUT · 01</span>
          </div>
          <h1 className="h-display">
            The shortcut<br />your browser<br />forgot to ship.
          </h1>
          <p className="hero-sub">
            Turn any webpage into code, data, summaries, workflows, and reusable commands —
            without leaving the page.
          </p>
          <div className="hero-ctas">
            <a href="#early-access" className="btn btn-primary">
              Join the Early Access List <span className="arrow">→</span>
            </a>
            <a href="#commands" className="btn btn-ghost">
              See What It Can Do
            </a>
          </div>
          <div className="hero-supporting">
            <span className="dash">//</span>
            <span>
              For developers, operators, and automation builders who live in the browser.
            </span>
          </div>
        </div>

        <div className="hero-right">
          <div className="browser">
            <div className="browser-chrome">
              <div className="browser-dots"><span/><span/><span/></div>
              <div className="browser-url">
                <span className="lock"/>
                docs.acme.dev/pricing
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.1em" }}>
                TAB · 3 / 12
              </div>
            </div>
            <div className="browser-body">
              <div className="page-meta">PRICING · ACME API · LAST UPDATED 04·24·26</div>
              <h3 className="page-title">Plans & usage limits</h3>

              <table className="page-table">
                <thead>
                  <tr><th>Plan</th><th>Requests / mo</th><th>Rate limit</th><th>Price</th></tr>
                </thead>
                <tbody>
                  <tr><td>Hobby</td><td>10,000</td><td>60 rpm</td><td>$0</td></tr>
                  <tr className="selected" style={{ position: "relative" }}>
                    <td>Pro</td><td>250,000</td><td>600 rpm</td><td>$29</td>
                  </tr>
                  <tr><td>Team</td><td>2,500,000</td><td>3,000 rpm</td><td>$249</td></tr>
                  <tr><td>Scale</td><td>Custom</td><td>Custom</td><td>Contact</td></tr>
                </tbody>
              </table>

              {/* selection rectangle */}
              <div className="selection-box" style={{
                left: 18,
                right: 18,
                top: 140,
                height: 30,
              }}/>

              {/* menu stack */}
              <div className="menu-stack">
                <div className="menu menu-ctx">
                  <div className="menu-item"><span>Back</span><span className="sc">⌘[</span></div>
                  <div className="menu-item"><span>Reload</span><span className="sc">⌘R</span></div>
                  <div className="menu-sep"/>
                  <div className="menu-item"><span>Save As…</span><span className="sc"/></div>
                  <div className="menu-item"><span>Print…</span><span className="sc">⌘P</span></div>
                  <div className="menu-sep"/>
                  <div className="menu-item"><span>Inspect</span><span className="sc">⌥⌘I</span></div>
                </div>

                <div className="menu menu-arc">
                  <div className="menu-arc-head">
                    <span>ALT + RCLICK</span>
                    <span className="tag">● LIVE</span>
                  </div>
                  {arcItems.map((it, i) => (
                    <div
                      key={i}
                      className={`menu-item ${activeIdx === i ? "active" : ""}`}
                    >
                      <span className="label">
                        <span className="icon"/>
                        {it.label}
                      </span>
                      <span className="sc">{it.sc}</span>
                    </div>
                  ))}
                </div>
              </div>

              <CursorArrow style={{ top: cursorPos.top, left: cursorPos.left }}/>
            </div>
          </div>
          <div style={{
            marginTop: 14,
            display: "flex",
            justifyContent: "space-between",
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            color: "var(--ink-faint)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
          }}>
            <span>Fig.01 · Hero interaction</span>
            <span>Browser chrome · context menu · ARC menu</span>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;
window.Kbd = Kbd;
window.KbdCombo = KbdCombo;