/* global React */

// Dev handover panel — documents the red-accent interaction layer
// so an engineer can implement these without re-deriving them.
function HandoverSpec() {
  const rows = [
    {
      num: "01 / FLASH",
      title: "Click flash",
      body: <>Full-viewport red pulse on every <code>mousedown</code>. <code>200ms</code>, <code>mix-blend-mode: overlay</code>, opacity 0.35→0. Adds physical feedback without sound.</>,
      demo: "<div class='click-flash'>",
    },
    {
      num: "02 / KINETIC",
      title: "Kinetic hairline",
      body: <>1px horizontal rule, blurred red dot sweeps L→R every <code>4s</code>. Place between sections — implies "the system is alive" without animation noise.</>,
      demo: "<div class='kinetic-bar'>",
    },
    {
      num: "03 / LOGO",
      title: "Logo dot pulse",
      body: <>Center glyph pulses cyan ↔ red every <code>3s</code>. Becomes the only ambient red on screen most of the time.</>,
      demo: ".wf-nav-logo .glyph::after",
    },
    {
      num: "04 / STATUS",
      title: "Status dot pulse",
      body: <>All status dots scale 1→1.3 every <code>2.4s</code>. Cyan = system online. Teal = agent active. Red = signal/alert (use sparingly).</>,
      demo: ".status-dot · 2.4s pulse",
    },
    {
      num: "05 / PRESS",
      title: "Primary button press",
      body: <>Hover lifts <code>2px</code>, drops a hard <code>-4px 4px 0 var(--accent-red)</code> shadow — the signature AaaS press signal. Active flattens it.</>,
      demo: ".btn-primary:hover",
    },
    {
      num: "06 / OUTLINE",
      title: "Outline button flip",
      body: <>Hover flips border + label from cyan → red. Single-color shift = clear affordance, no fill needed.</>,
      demo: ".btn-outline:hover",
    },
    {
      num: "07 / NAV",
      title: "Nav link underline",
      body: <>Red <code>1px</code> underline scales from <code>0→1</code> on hover, left-anchored. <code>250ms liquid-ease</code>.</>,
      demo: ".wf-nav-links span:hover",
    },
    {
      num: "08 / CARDS",
      title: "Card hover lift",
      body: <>Cards translateY <code>-4px</code>, gain a soft cyan rim and a 2px red shadow-offset hint. Active state pushes border to red.</>,
      demo: ".uc-tile:hover / :active",
    },
    {
      num: "09 / BADGE",
      title: "Delivered badge",
      body: <>Red pill on incoming/result emails. Pops in with a <code>600ms</code> scale-bounce on first paint.</>,
      demo: ".email-card.incoming::before",
    },
    {
      num: "10 / CTA",
      title: "CTA underline glow",
      body: <>Headline at the CTA band gets a red gradient hairline underneath, breathing 0.4↔0.9 over <code>3s</code>.</>,
      demo: ".cta-band .section-h2::after",
    },
    {
      num: "11 / FLICKER",
      title: "Schematic deliver flicker",
      body: <>The "DELIVER" pill in the system diagram flickers from teal to red briefly every <code>5s</code> — punctuates the "result shipped" beat.</>,
      demo: ".sch-flow-label flicker",
    },
    {
      num: "12 / TOPIC",
      title: "Topic-label red dot",
      body: <>Every cyan overline label gets a 6px red dot prefix that pulses in sync with status dots. Anchors the "broadcast" tone of the page.</>,
      demo: ".ovl.cyan::before",
    },
  ];

  return (
    <div className="handover-spec">
      <div className="ovl red" style={{marginBottom: 16}}>· DEV HANDOVER · RED-ACCENT LAYER</div>
      <h2>The red is in the <span className="accent">motion</span>.</h2>
      <p className="lead">
        Per the AaaS brand spec, accent red is the <strong>signal color</strong> —
        it lives in click flash, hover signals, status pulses, and press states,
        not in fills or hero copy. These are the 12 hooks shipped across all four
        directions. All values use <code>var(--accent-red)</code> and <code>var(--liquid-ease)</code>.
      </p>

      {rows.map((r) => (
        <div className="row" key={r.num}>
          <div className="num">{r.num}</div>
          <div className="what">
            <strong>{r.title}</strong>
            {r.body}
          </div>
          <div className="demo">{r.demo}</div>
        </div>
      ))}

      <div style={{marginTop: 40, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 32}}>
        <div>
          <div className="ovl red" style={{marginBottom:12}}>· TOKENS</div>
          <div style={{fontFamily:'var(--font-jetbrains)', fontSize:12, color:'var(--text-muted)', lineHeight:1.9}}>
            --accent-red: 244 63 108<br/>
            --accent-red-dim: rgba(244,63,108,0.15)<br/>
            --accent-red-glow: rgba(244,63,108,0.4)<br/>
            --liquid-ease: cubic-bezier(0.23, 1, 0.32, 1)
          </div>
        </div>
        <div>
          <div className="ovl red" style={{marginBottom:12}}>· RULES</div>
          <div style={{fontSize:13, color:'var(--text-muted)', lineHeight:1.7}}>
            ✗ Never gradient-text mix circuit + red.<br/>
            ✗ Never use red as a dominant brand color.<br/>
            ✗ Buttons on solid cyan use <strong>black</strong> text — never red.<br/>
            ✓ Decorative motion is killed under <code>prefers-reduced-motion</code>.
          </div>
        </div>
      </div>
    </div>
  );
}

// Click-flash global helper — attach once on mount.
function useClickFlash() {
  React.useEffect(() => {
    const el = document.createElement('div');
    el.className = 'click-flash';
    document.body.appendChild(el);
    const fire = () => {
      el.classList.remove('fire');
      // force reflow so animation re-runs
      void el.offsetWidth;
      el.classList.add('fire');
    };
    document.addEventListener('mousedown', fire);
    return () => {
      document.removeEventListener('mousedown', fire);
      el.remove();
    };
  }, []);
}

window.HandoverSpec = HandoverSpec;
window.useClickFlash = useClickFlash;