// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Top nav (v4 chassis chrome)                   ║
// ╚═══════════════════════════════════════════════════════════╝

const NavLogo = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M4 3v18M4 12l8-9M4 12l8 9M12 3l8 9-8 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const TopBar = () => {
  const [t, setT] = React.useState(() => new Date());
  const [menu, setMenu] = React.useState(false);
  React.useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hh = String(t.getUTCHours()).padStart(2, '0');
  const mm = String(t.getUTCMinutes()).padStart(2, '0');
  const ss = String(t.getUTCSeconds()).padStart(2, '0');

  const items = [
    ['Platform', '#platform'],
    ['Signature', '#signature'],
    ['Defense', '#defense'],
    ['Offense', '#offense'],
    ['Bounty', '#bounty'],
    ['Trust', '#governance'],
    ['Pricing', '#pricing'],
    ['Docs', '#docs'],
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      height: 52, display: 'flex', alignItems: 'center',
      background: 'rgba(8,9,11,0.86)',
      backdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--v4-line)',
    }}>
      {/* Brand */}
      <div style={{ padding: '0 22px', display: 'flex', alignItems: 'center', gap: 11, borderRight: '1px solid var(--v4-line)', height: '100%' }}>
        <span style={{ color: 'var(--v4-signal)' }}><NavLogo/></span>
        <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '0.22em' }}>KENSAI</span>
        <span className="mono" style={{ fontSize: 9.5, color: 'var(--v4-mute)', letterSpacing: '0.18em' }}>剣 · v4</span>
      </div>

      {/* Surface chip */}
      <div className="kw-topbar-live" style={{ padding: '0 16px', height: '100%', display: 'flex', alignItems: 'center', gap: 8, borderRight: '1px solid var(--v4-line)' }}>
        <span className="dot dot-live"/>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--v4-signal)', fontWeight: 600 }}>LIVE</span>
      </div>

      {/* Nav */}
      <nav className="kw-topbar-nav" style={{ display: 'flex', height: '100%' }}>
        {items.map(([l, href]) => (
          <a key={l} href={href} style={{
            padding: '0 16px', height: '100%', display: 'flex', alignItems: 'center',
            fontFamily: 'var(--v4-mono)', fontSize: 10.5, letterSpacing: '0.16em',
            fontWeight: 600, color: 'var(--v4-dim)', textTransform: 'uppercase',
            borderBottom: '2px solid transparent', textDecoration: 'none',
          }}
          onMouseEnter={e => { e.currentTarget.style.color = 'var(--v4-text)'; e.currentTarget.style.borderBottom = '2px solid var(--v4-signal-line)'; }}
          onMouseLeave={e => { e.currentTarget.style.color = 'var(--v4-dim)'; e.currentTarget.style.borderBottom = '2px solid transparent'; }}
          >{l}</a>
        ))}
      </nav>

      <div style={{ flex: 1 }}/>

      {/* Search */}
      <div className="kw-topbar-search" style={{ padding: '0 14px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--v4-mute)', borderLeft: '1px solid var(--v4-line)', height: '100%' }}>
        <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5" strokeLinecap="round"/></svg>
        <span style={{ fontFamily: 'var(--v4-mono)', letterSpacing: '0.08em' }}>Search docs</span>
        <span className="kbd">⌘K</span>
      </div>

      {/* Time */}
      <div className="kw-topbar-time" style={{ padding: '0 14px', height: '100%', display: 'flex', alignItems: 'center', gap: 8, borderLeft: '1px solid var(--v4-line)' }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--v4-dim)', letterSpacing: '0.14em' }}>{hh}:{mm}:{ss} UTC</span>
      </div>

      {/* CTAs */}
      <div className="kw-topbar-cta" style={{ padding: '0 14px', height: '100%', display: 'flex', alignItems: 'center', gap: 8, borderLeft: '1px solid var(--v4-line)' }}>
        <a className="btn btn-ghost" href="#login">Sign in</a>
        <a className="btn btn-primary" href="#demo">Book demo →</a>
      </div>

      {/* Mobile hamburger — only visible <860px via CSS */}
      <button
        className="kw-hamburger"
        aria-label="Menu"
        onClick={() => setMenu(m => !m)}
        style={{
          display: 'none',
          background: 'transparent', border: '1px solid var(--v4-line-2)',
          width: 40, height: 32, alignItems: 'center', justifyContent: 'center',
          margin: '0 14px 0 0', cursor: 'pointer', color: 'var(--v4-text)',
          padding: 0,
        }}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
          {menu
            ? <g><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></g>
            : <g><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></g>}
        </svg>
      </button>

      {/* Mobile drawer */}
      {menu && (
        <div className="kw-drawer" style={{
          position: 'fixed', top: 48, left: 0, right: 0, bottom: 0,
          background: 'var(--v4-bg)', zIndex: 49,
          padding: '8px 0', overflowY: 'auto',
          borderTop: '1px solid var(--v4-line)',
        }}>
          {items.map(([l, href]) => (
            <a key={l} href={href} onClick={() => setMenu(false)}
              style={{
                display: 'flex', alignItems: 'center',
                padding: '18px 22px',
                borderBottom: '1px solid var(--v4-line)',
                fontFamily: 'var(--v4-mono)', fontSize: 13, letterSpacing: '0.18em',
                fontWeight: 600, color: 'var(--v4-text)', textTransform: 'uppercase',
                textDecoration: 'none',
              }}>
              <span style={{ flex: 1 }}>{l}</span>
              <span style={{ color: 'var(--v4-signal)' }}>→</span>
            </a>
          ))}
          <div style={{ padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a className="btn btn-primary" href="#demo" onClick={() => setMenu(false)} style={{ justifyContent: 'center' }}>Book demo →</a>
            <a className="btn" href="#login" onClick={() => setMenu(false)} style={{ justifyContent: 'center' }}>Sign in</a>
          </div>
          <div className="strip" style={{ marginTop: 8, borderBottom: 'none' }}>
            <div className="item"><span style={{ color: 'var(--v4-signal)' }}>●</span> <b>OPERATIONAL</b></div>
            <div className="item"><span>347,593 CVEs</span></div>
            <div className="item"><span>10 companies</span></div>
          </div>
        </div>
      )}
    </header>
  );
};

// ── Status strip ──────────────────────────────────────
const StatusStrip = () => (
  <div className="strip">
    <div className="item"><span style={{ color: 'var(--v4-signal)' }}>●</span> <b>EARLY</b></div>
    <div className="item"><span>CVES</span> <b>347,593</b></div>
    <div className="item"><span>CODE</span> <b>1.85M</b></div>
    <div className="item"><span>OSS TOOLS</span> <b>7</b></div>
    <div className="item"><span>COMPANIES</span> <b>10</b></div>
    <div style={{ flex: 1 }}/><div className="item" style={{ color: 'var(--v4-faint)' }}>Grounded public facts only</div>
  </div>
);

// ── Footer ────────────────────────────────────────────
const Footer = () => (
  <footer style={{ borderTop: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)', marginTop: 0 }}>
    <div className="wrap" style={{ paddingTop: 56, paddingBottom: 28 }}>
      <div className="kw-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(5, 1fr)', gap: 32 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ color: 'var(--v4-signal)' }}><NavLogo size={18}/></span>
            <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.22em' }}>KENSAI</span>
          </div>
          <div className="disp it" style={{ marginTop: 14, fontSize: 22, lineHeight: 1.25, color: 'var(--v4-text)', maxWidth: 280 }}>
            Cut through the noise.<br/>Find what matters.
          </div>
          <div className="mono" style={{ marginTop: 16, fontSize: 10, color: 'var(--v4-mute)', letterSpacing: '0.14em' }}>
            KENSAI · EARLY PRODUCT SURFACE
          </div>
          <div className="mono" style={{ marginTop: 4, fontSize: 10, color: 'var(--v4-faint)', letterSpacing: '0.14em' }}>
            PUBLIC SITE · FACT-LIMITED COPY
          </div>
        </div>

        {[
          ['Platform', ['Posture', 'Findings', 'Asset Graph', 'CVE Intel', 'SBOM · Autofix', 'Auto Hunts', 'MCP Suite']],
          ['Signature', ['Bounty Forge', 'G5 Reports', 'Auth Manifest', 'Correlation', 'Diary']],
          ['Solutions', ['Enterprise', 'Mid-market', 'Startups', 'Regulated', 'Public sector', 'PTaaS']],
          ['Company', ['About', 'Customers', 'Careers', 'Press', 'Brand']],
          ['Resources', ['Docs', 'Changelog', 'Status', 'Trust', 'Security', 'Privacy', 'Contact']],
        ].map(([h, items]) => (
          <div key={h}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{h}</div>
            {items.map(it => (
              <div key={it} style={{ padding: '4px 0' }}>
                <a href="#" style={{ color: 'var(--v4-dim)', fontSize: 12.5, borderBottom: 'none' }}>{it}</a>
              </div>
            ))}
          </div>
        ))}
      </div>

      <hr className="hairline" style={{ marginTop: 48, marginBottom: 20 }}/>

      <div className="kw-footer-meta" style={{ display: 'flex', alignItems: 'baseline', gap: 22, fontFamily: 'var(--v4-mono)', fontSize: 10.5, color: 'var(--v4-mute)', letterSpacing: '0.14em' }}>
        <span>© 2026 KENSAI</span>
        <span>·</span>
        <span>剣才 · KEN-SAI · "SWORD-SAINT"</span>
        <span>·</span>
        <span>STATUS · <span style={{ color: 'var(--v4-signal)' }}>● EARLY PRODUCT</span></span>
        <div style={{ flex: 1 }}/>
        <span>EN</span>
        <span>日本語</span>
        <span>한국어</span>
        <span>DE</span>
        <span>FR</span>
        <span>ES</span>
        <span>PT</span>
        <span>AR</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { TopBar, StatusStrip, Footer, NavLogo });