// ╔═══════════════════════════════════════════════════════════╗
// ║  KENSAI WEB · Voice + Customers + Languages + Trust         ║
// ╚═══════════════════════════════════════════════════════════╝

// ── PROOF / CUSTOMERS / METRICS ──────────────────────
const ProofSection = () => (
  <section style={{ borderBottom: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)' }}>
    <div className="wrap">
      <SectionHead num="§09" label="Proof · In production" desc="Real product shape · grounded facts"/>
      <div style={{ paddingTop: 48, paddingBottom: 48 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderTop: '1px solid var(--v4-line)', borderLeft: '1px solid var(--v4-line)' }}>
          {[
            ['347,593', 'CVEs in database'],
            ['1.85M',   'Lines of code counted'],
            ['7',       'Open-source tools integrated'],
            ['10',      'Companies using Kensai'],
            ['CVE intel', 'Product surface'],
            ['Findings',  'Product surface'],
            ['Reports',   'Product surface'],
            ['Asset graph', 'Product surface'],
            ['Workflow shell', 'Built for signal'],
            ['Early', 'Public story kept grounded'],
          ].map(([n, l], i) => (
            <div key={l} style={{ padding: '24px 22px', borderRight: '1px solid var(--v4-line)', borderBottom: '1px solid var(--v4-line)' }}>
              <div className="disp" style={{ fontSize: 36, color: 'var(--v4-text)', letterSpacing: '-0.02em' }}>{n}</div>
              <div className="eyebrow" style={{ marginTop: 6, fontSize: 9, lineHeight: 1.5 }}>{l}</div>
            </div>
          ))}
        </div>

        {/* Pull quote */}
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--v4-line)' }}>
          {[
            { q: 'The old visual density is back. The fake proof is not.', n: 'PUBLIC RULE', r: 'Restore the design, not the fiction' },
            { q: 'Kensai can still look sharp without invented customers, payouts, or compliance theater.', n: 'PUBLIC RULE', r: 'Credibility beats decoration' },
            { q: 'The product surface is the story now. Public numbers stay limited to what we can verify.', n: 'PUBLIC RULE', r: 'Proof before claims' },
          ].map((c, i) => (
            <div key={i} style={{ padding: '32px 28px', borderRight: i < 2 ? '1px solid var(--v4-line)' : 'none', borderBottom: '1px solid var(--v4-line)' }}>
              <div className="disp" style={{ fontSize: 22, color: 'var(--v4-text)', lineHeight: 1.32 }}>
                <span className="signal it" style={{ marginRight: 4 }}>"</span>{c.q}<span className="signal it">"</span>
              </div>
              <div style={{ marginTop: 18 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--v4-text)', fontWeight: 600, letterSpacing: '0.1em' }}>{c.n}</div>
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--v4-mute)', letterSpacing: '0.16em', marginTop: 2 }}>{c.r}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ── VOICE / DOCTRINE ──────────────────────────────────
const VoiceSection = () => (
  <section style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§10" label="Doctrine · How we build" desc="The Sword Saint manifesto · abridged"/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', paddingTop: 56, paddingBottom: 56, gap: 40 }}>
        <div>
          <h2 className="display-h" style={{ fontSize: 'clamp(40px,5vw,72px)' }}>
            <span className="jp" style={{ fontWeight: 400, fontSize: '0.84em', color: 'var(--v4-signal)' }}>剣才</span><br/>
            Ken-sai. <span className="it">Sword saint.</span>
          </h2>
          <div style={{ marginTop: 22, fontSize: 14.5, lineHeight: 1.7, color: 'var(--v4-dim)' }}>
            A sword saint isn't the warrior with the most weapons. It's the
            one who knows which cut matters. Kensai is built on that
            discipline — not features for features, not findings for
            findings. The right cut, at the right moment, with evidence.
          </div>
          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid var(--v4-line)' }}>
            {[
              ['BE DIRECT.',  'Five words, not fifty. Delete every leverage, synergy, solution.'],
              ['BE CONFIDENT.', 'No might, could potentially, may be able to. State the finding. State the fix.'],
              ['BE HUMAN.',  "Write like you talk. If you wouldn't say it, don't ship it."],
              ['BE HELPFUL.','State the priority. No exclamation-point fear. We are not your alarm clock.'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', padding: '14px 0', borderBottom: '1px solid var(--v4-line)', alignItems: 'baseline', gap: 14 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--v4-signal)', letterSpacing: '0.18em', fontWeight: 600 }}>{k}</span>
                <span style={{ fontSize: 13, color: 'var(--v4-dim)', lineHeight: 1.6 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderLeft: '1px solid var(--v4-line)', paddingLeft: 32 }}>
          <div className="eyebrow" style={{ color: 'var(--v4-signal)' }}>Voice · Examples</div>
          <div className="disp" style={{ marginTop: 10, fontSize: 28, lineHeight: 1.25 }}>How we write findings.</div>

          <div style={{ marginTop: 24, border: '1px solid var(--v4-line)', padding: 18, background: 'var(--v4-bg-1)' }}>
            <div className="eyebrow" style={{ color: 'var(--v4-signal)' }}>✓ The cut</div>
            <div style={{ marginTop: 8, fontSize: 13, color: 'var(--v4-text)', lineHeight: 1.6 }}>
              "Critical: SQL injection in /api/users allows unauthorized
              database access. Remediation: use parameterized queries.
              Priority: immediate."
            </div>
          </div>
          <div style={{ marginTop: 14, border: '1px solid var(--v4-line)', padding: 18, opacity: 0.6 }}>
            <div className="eyebrow" style={{ color: 'var(--v4-crit)' }}>✗ The slop</div>
            <div style={{ marginTop: 8, fontSize: 13, color: 'var(--v4-mute)', lineHeight: 1.6, fontStyle: 'italic' }}>
              "A potential security vulnerability has been identified that
              may potentially allow unauthorized actors to potentially
              leverage..."
            </div>
          </div>

          <div className="eyebrow" style={{ marginTop: 32, color: 'var(--v4-signal)' }}>Lexicon</div>
          <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--v4-line)' }}>
            {[
              ['Finding',         'Issue, problem'],
              ['Remediation',     'Fix, solution'],
              ['Attack surface',  'Exposure, risk area'],
              ['Continuous',      'Always-watching'],
              ['Forge',           'Pipeline, queue'],
              ['Gate',            'Status, stage'],
            ].map(([a, b], i) => (
              <React.Fragment key={a}>
                <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--v4-line)', borderRight: '1px solid var(--v4-line)', fontFamily: 'var(--v4-mono)', fontSize: 11, color: 'var(--v4-text)', letterSpacing: '0.06em' }}>{a}</div>
                <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--v4-line)', fontFamily: 'var(--v4-mono)', fontSize: 11, color: 'var(--v4-faint)', textDecoration: 'line-through', letterSpacing: '0.06em' }}>{b}</div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── LANGUAGES / GLOBAL ────────────────────────────────
const LanguagesSection = () => {
  const langs = [
    { code:'EN', name:'English',         t:'Cut through the noise. Find what matters.' },
    { code:'日本語', name:'Japanese',     t:'剣才。雑音を断ち、重要を見抜け。' },
    { code:'한국어', name:'Korean',       t:'소음을 가르고, 중요한 것을 찾아라.' },
    { code:'DE', name:'Deutsch',         t:'Durch das Rauschen schneiden. Finden, was zählt.' },
    { code:'FR', name:'Français',        t:'Trancher le bruit. Trouver ce qui compte.' },
    { code:'ES', name:'Español',         t:'Atravesar el ruido. Encontrar lo que importa.' },
    { code:'PT', name:'Português',       t:'Cortar o ruído. Encontrar o que importa.' },
    { code:'IT', name:'Italiano',        t:'Tagliare il rumore. Trovare ciò che conta.' },
    { code:'NL', name:'Nederlands',      t:'Door de ruis snijden. Vinden wat ertoe doet.' },
    { code:'SV', name:'Svenska',         t:'Skär genom bruset. Hitta det som spelar roll.' },
    { code:'עברית', name:'Hebrew',       t:'לחתוך דרך הרעש. למצוא את מה שחשוב.' },
    { code:'العربية', name:'Arabic',     t:'اقطع الضوضاء. اعثر على ما يهم.' },
    { code:'中文', name:'Chinese',       t:'穿透噪音，找到关键。' },
    { code:'РУС', name:'Russian',        t:'Сквозь шум — к сути.' },
    { code:'TR', name:'Türkçe',          t:'Gürültüyü kes. Önemli olanı bul.' },
    { code:'PL', name:'Polski',          t:'Przetnij szum. Znajdź to, co ważne.' },
  ];
  return (
    <section style={{ borderBottom: '1px solid var(--v4-line)', background: 'var(--v4-bg-1)' }}>
      <div className="wrap">
        <SectionHead num="§11" label="Global · Multilingual direction" desc="One blade · spoken everywhere"/>
        <div style={{ paddingTop: 48, paddingBottom: 48 }}>
          <h2 className="display-h" style={{ fontSize: 'clamp(36px,4.5vw,60px)', maxWidth: 920 }}>
            Built with a global aesthetic.<br/>
            <span className="it">Designed to travel well.</span>
          </h2>
          <div style={{ marginTop: 18, fontSize: 14.5, color: 'var(--v4-dim)', maxWidth: 640, lineHeight: 1.7 }}>
            Multilingual support remains part of the product direction, but this page no longer claims rollout counts we are not prepared to prove publicly.
          </div>

          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--v4-line)', borderLeft: '1px solid var(--v4-line)' }}>
            {langs.map(l => (
              <div key={l.code} style={{ padding: '20px 20px', borderRight: '1px solid var(--v4-line)', borderBottom: '1px solid var(--v4-line)', minHeight: 120 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--v4-signal)', letterSpacing: '0.16em', fontWeight: 600 }}>{l.code}</span>
                  <span className="mono" style={{ fontSize: 9.5, color: 'var(--v4-mute)', letterSpacing: '0.18em' }}>{l.name.toUpperCase()}</span>
                </div>
                <div className="disp" style={{ marginTop: 10, fontSize: 16, color: 'var(--v4-text)', lineHeight: 1.32, direction: ['HE','AR','עברית','العربية'].includes(l.code) ? 'rtl' : 'ltr' }}>
                  "{l.t}"
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── TRUST / COMPLIANCE ────────────────────────────────
const TrustSection = () => (
  <section style={{ borderBottom: '1px solid var(--v4-line)' }}>
    <div className="wrap">
      <SectionHead num="§12" label="Trust · Compliance · Governance" desc="Trust · say only what you can prove"/>
      <div style={{ paddingTop: 48, paddingBottom: 48, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, borderTop: '1px solid var(--v4-line)' }}>
        {[
          { k:'PUBLIC RULES', items:[
            ['CVE count',     '347,593'],
            ['Code count',    '1.85M'],
            ['OSS tools',     '7'],
            ['Companies',     '10'],
            ['Testimonials',  'Removed unless verifiable'],
            ['Customer logos','Removed unless real'],
            ['Cert claims',   'Removed unless provable'],
          ]},
          { k:'PRODUCT TRUTH', items:[
            ['CVE intelligence', 'Shown'],
            ['Findings surface', 'Shown'],
            ['Reports surface',  'Shown'],
            ['Asset graph',      'Shown'],
            ['Workflow shell',   'Shown'],
            ['Integrations',     'Shown'],
            ['Bounty flow',      'Direction only'],
          ]},
          { k:'COPY POLICY', items:[
            ['No fake metrics',     'Required'],
            ['No fake customers',   'Required'],
            ['No fake compliance',  'Required'],
            ['No fake payouts',     'Required'],
            ['No fake telemetry',   'Required'],
            ['Proof before claims', 'Required'],
            ['Public site',         'Grounded'],
          ]},
        ].map((c, i) => (
          <div key={c.k} style={{ padding: '24px 26px', borderRight: i < 2 ? '1px solid var(--v4-line)' : 'none', borderBottom: '1px solid var(--v4-line)' }}>
            <div className="eyebrow" style={{ color: 'var(--v4-signal)' }}>{c.k}</div>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 0 }}>
              {c.items.map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '9px 0', borderBottom: '1px solid var(--v4-line)' }}>
                  <span className="mono" style={{ fontSize: 10.5, color: 'var(--v4-text)', letterSpacing: '0.08em' }}>{k}</span>
                  <span className="mono" style={{ fontSize: 10.5, color: 'var(--v4-signal)', letterSpacing: '0.1em', fontWeight: 600, textAlign: 'right' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { ProofSection, VoiceSection, LanguagesSection, TrustSection });
