// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Hero · the editorial blade                    ║
// ╚═══════════════════════════════════════════════════════════╝

const HeroBlade = () => {
  const edges = React.useMemo(() => Array.from({ length: 92 }, (_, i) => {
    const n = Math.sin(i * 1.7) * 0.5 + Math.sin(i * 0.41) * 0.3 + 0.5;
    const nick = [12, 27, 34, 55, 71].includes(i);
    return { h: 8 + n * 36, nick };
  }), []);
  const w = 180, h = 320;
  const tipY = 20, hiltY = h - 60;
  const spineX = w / 2;
  const edgeX = spineX + 42;

  return (
    <svg width={w} height={h} style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="bld" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="rgba(236,234,226,0.04)"/>
          <stop offset="50%" stopColor="rgba(236,234,226,0.14)"/>
          <stop offset="100%" stopColor="rgba(236,234,226,0.04)"/>
        </linearGradient>
        <filter id="bldglow"><feGaussianBlur stdDeviation="1.8"/></filter>
      </defs>
      <path d={`M ${spineX} ${tipY} L ${edgeX} ${tipY + 36} L ${edgeX} ${hiltY} L ${spineX - 5} ${hiltY} L ${spineX - 5} ${tipY + 26} Z`}
        fill="url(#bld)" stroke="rgba(236,234,226,0.20)" strokeWidth="0.9"/>
      <path d={`M ${spineX + 6} ${tipY + 40} Q ${spineX + 18} ${h/2} ${spineX + 8} ${hiltY - 10}`} stroke="rgba(236,234,226,0.22)" strokeWidth="0.6" fill="none"/>
      <line x1={edgeX} y1={tipY + 36} x2={edgeX} y2={hiltY} stroke="var(--v4-signal)" strokeWidth="1.1" filter="url(#bldglow)"/>
      <line x1={edgeX} y1={tipY + 36} x2={edgeX} y2={hiltY} stroke="#fff" strokeWidth="0.5"/>
      {edges.map((e, i) => {
        const y = tipY + 46 + (i / edges.length) * (hiltY - tipY - 56);
        return (
          <g key={i}>
            <line x1={edgeX} y1={y} x2={edgeX + e.h} y2={y}
              stroke={e.nick ? 'var(--v4-crit)' : 'rgba(236,234,226,0.22)'}
              strokeWidth={e.nick ? 1.3 : 0.5}/>
            {e.nick && <circle cx={edgeX + e.h + 6} cy={y} r="1.8" fill="var(--v4-crit)" filter="url(#bldglow)"/>}
          </g>
        );
      })}
      <ellipse cx={spineX} cy={hiltY + 2} rx="32" ry="3.5" fill="rgba(236,234,226,0.13)" stroke="rgba(236,234,226,0.26)" strokeWidth="0.7"/>
      <rect x={spineX - 11} y={hiltY + 4} width="22" height="76" fill="rgba(236,234,226,0.06)" stroke="rgba(236,234,226,0.18)" strokeWidth="0.7"/>
      {[0,1,2,3,4,5].map(i => (
        <g key={i}>
          <line x1={spineX - 11} y1={hiltY + 10 + i * 12} x2={spineX + 11} y2={hiltY + 20 + i * 12} stroke="rgba(236,234,226,0.18)" strokeWidth="0.6"/>
          <line x1={spineX + 11} y1={hiltY + 10 + i * 12} x2={spineX - 11} y2={hiltY + 20 + i * 12} stroke="rgba(236,234,226,0.18)" strokeWidth="0.6"/>
        </g>
      ))}
      <text x={spineX} y={tipY - 12} textAnchor="middle" fontSize="9" letterSpacing="3.5" fill="var(--v4-mute)" fontFamily="var(--v4-mono)">EXTERNAL</text>
      <text x={spineX} y={h + 6} textAnchor="middle" fontSize="9" letterSpacing="3.5" fill="var(--v4-mute)" fontFamily="var(--v4-mono)">INTERNAL</text>
    </svg>
  );
};

const Hero = () => (
  <section className="kw-hero" style={{ position: 'relative', borderBottom: '1px solid var(--v4-line)', overflow: 'hidden' }}>
    {/* huge kanji watermark */}
    <div aria-hidden style={{
      position: 'absolute', right: -80, bottom: -120, fontFamily: 'var(--v4-jp)',
      fontSize: 720, fontWeight: 400, color: 'var(--v4-text)', opacity: 0.018,
      lineHeight: 0.8, pointerEvents: 'none', letterSpacing: '-0.05em',
    }}>剣</div>

    {/* ambient cross-hair grid lines */}
    <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'linear-gradient(var(--v4-line) 1px, transparent 1px), linear-gradient(90deg, var(--v4-line) 1px, transparent 1px)', backgroundSize: '120px 120px', opacity: 0.5, maskImage: 'radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%)', WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%)' }}/>

    <div className="kw-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr 1fr', minHeight: 600, position: 'relative', zIndex: 1 }}>
      {/* LEFT — editorial preface */}
      <div className="kw-hero-left" style={{ padding: '40px 36px 36px', borderRight: '1px solid var(--v4-line)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 22 }}>The state of your week</div>
          <div className="disp" style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--v4-dim)', maxWidth: 320 }}>
            <span className="it" style={{ color: 'var(--v4-text)' }}>Mondays don't have to start with surprise.</span>
          </div>
          <div style={{ marginTop: 32, fontSize: 13.5, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 340 }}>
            Kensai is early, but the product already has a real codebase, a real CVE corpus, real open-source tooling integrated, and 10 companies already using it.
          </div>
        </div>
        <div className="kw-kpi-row" style={{ borderTop: '1px solid var(--v4-line)', paddingTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
          {[
            ['347,593', 'CVEs indexed'],
            ['1.85M', 'Lines of code'],
            ['10', 'Companies using Kensai'],
          ].map(([n, l]) => (
            <div key={l}>
              <div className="disp" style={{ fontSize: 28, color: 'var(--v4-text)' }}>{n}</div>
              <div className="eyebrow" style={{ marginTop: 4, fontSize: 9 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* CENTER — display headline + blade (side-by-side row) */}
      <div className="kw-hero-center" style={{ padding: '40px 32px 36px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', position: 'relative' }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}>For security teams drowning in dashboards</div>

        {/* Top-of-fold row: blade beside headline */}
        <div className="kw-hero-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, width: '100%' }}>
          <div className="kw-hero-blade-wrap" style={{ flexShrink: 0, marginTop: -20 }}>
            <HeroBlade/>
          </div>
          <h1 className="display-h kw-hero-headline" style={{ margin: 0, textAlign: 'left' }}>
            Your team has<br/>
            <span className="it">1,000 alerts.</span><br/>
            <span className="signal it" style={{ fontSize: '0.86em' }}>Find the 5<br/>that matter.</span>
          </h1>
        </div>

        <div style={{ marginTop: 22, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)', maxWidth: 540 }}>
          You should not need five disconnected tools to understand one security problem. Kensai is being built as a single workflow surface for CVE intelligence, findings, asset context, reporting, and follow-up work.
        </div>
        <div className="kw-hero-cta-row" style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="#demo" className="btn btn-primary">Book a 20-min walkthrough →</a>
          <a href="#scan" className="btn">Get a free surface scan</a>
          <a href="#platform" className="btn">See how it works</a>
        </div>
      </div>

      {/* RIGHT — live findings stream */}
      <div className="kw-hero-right" style={{ padding: '40px 36px 36px', borderLeft: '1px solid var(--v4-line)' }}>
        <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--v4-signal)' }}>● Live · Last 6 hours</div>
        <div className="kw-hero-feed" style={{ display: 'flex', flexDirection: 'column' }}>
          {[
            { id:'F-1824', sev:'CRITICAL', t:'SQL injection · /api/users/login', age:'47s' },
            { id:'F-1823', sev:'HIGH',     t:'IDOR on /orgs/:id/billing',         age:'14m' },
            { id:'F-1822', sev:'HIGH',     t:'Path traversal · /files/:name',     age:'22m' },
            { id:'F-1821', sev:'MEDIUM',   t:'Weak JWT signature · /auth',        age:'41m' },
            { id:'F-1819', sev:'CRITICAL', t:'RCE via deserialization · /jobs',   age:'1h 20m' },
            { id:'F-1818', sev:'HIGH',     t:'Open redirect · /oauth/callback',   age:'2h' },
          ].map(r => {
            const sevColor = r.sev === 'CRITICAL' ? 'var(--v4-crit)' : r.sev === 'HIGH' ? 'var(--v4-high)' : 'var(--v4-med)';
            return (
              <div key={r.id} style={{ padding: '12px 0', borderBottom: '1px solid var(--v4-line)' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span className="mono" style={{ fontSize: 9.5, color: 'var(--v4-mute)', letterSpacing: '0.1em' }}>{r.id}</span>
                  <span className="mono" style={{ fontSize: 10, color: sevColor, letterSpacing: '0.16em', fontWeight: 600 }}>{r.sev}</span>
                  <span style={{ flex: 1 }}/>
                  <span className="mono" style={{ fontSize: 9.5, color: 'var(--v4-mute)' }}>{r.age}</span>
                </div>
                <div className="disp" style={{ marginTop: 4, fontSize: 16, color: 'var(--v4-text)', lineHeight: 1.3 }}>{r.t}</div>
              </div>
            );
          })}
        </div>
        <div className="eyebrow" style={{ marginTop: 22 }}>Repaired today · 03</div>
        <div style={{ marginTop: 8 }}>
          {['IDOR · /orgs/:id/billing','Path traversal · /files/:name','Weak JWT · /auth/refresh'].map((t, i) => (
            <div key={i} style={{ fontSize: 12, color: 'var(--v4-mute)', padding: '4px 0', textDecoration: 'line-through', textDecorationColor: 'var(--v4-faint)' }}>· {t}</div>
          ))}
        </div>
      </div>
    </div>

    {/* Logo strip */}
    <div className="kw-logo-strip" style={{ display: 'flex', alignItems: 'center', borderTop: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)', height: 76 }}>
      <div className="eyebrow" style={{ padding: '0 24px', borderRight: '1px solid var(--v4-line)', height: '100%', display: 'flex', alignItems: 'center', color: 'var(--v4-faint)' }}>Current surface ↗</div>
      <div className="kw-logos" style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 56, padding: '0 32px', overflow: 'hidden' }}>
        {['CVE INTEL','FINDINGS','ASSET GRAPH','REPORTS','WORKFLOWS','OSS TOOLING','10 COMPANIES'].map(b => (
          <span key={b} className="mono" style={{ fontSize: 13, color: 'var(--v4-faint)', letterSpacing: '0.22em', fontWeight: 600, whiteSpace: 'nowrap' }}>{b}</span>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });
