function HeroA() {
  return (
    <section className="hero hero-a">
      <div className="container">
        <div className="breadcrumb"><span className="dot"></span>S00 / Index · 2026 Spring</div>
        <div className="hero-row">
          <div>
            <h1>
              Organize <span className="accent">Ideas</span><br/>Create <span className="accent">Stories</span>
              <span className="jp">AIと人で 業務の生産性を再設計する</span>
            </h1>
            <p className="lead">
              株式会社ズノーワークスは、映像制作・ウェブコンテンツ・BPOを源流に、
              AI構築 / ツール開発 / 導入支援までを一気通貫で提供する「AI仕様」の制作会社です。
            </p>
            <a href="#contact" className="cta" style={{display:'inline-flex', alignItems:'center', gap:10, padding:'14px 24px', background:'var(--ink)', color:'var(--paper)', textDecoration:'none', fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.25em', textTransform:'uppercase', border:'1px solid var(--ink)'}}>
              今すぐ相談 <span style={{fontFamily:'var(--font-mono)', fontSize:16}}>→</span>
            </a>
            <div className="meta-row">
              <div className="metric"><div className="num">1,203,584</div><div className="lbl">Entries · 2025</div></div>
              <div className="metric"><div className="num">±0.02<span style={{fontSize:14}}>%</span></div><div className="lbl">Accuracy</div></div>
              <div className="metric"><div className="num">2024.07</div><div className="lbl">Founded</div></div>
            </div>
          </div>
          <aside>
            <span className="num">// 04 Capabilities</span>
            <ul>
              <li>映像制作 <span className="idx">01</span></li>
              <li>Webコンテンツ <span className="idx">02</span></li>
              <li>BPO / データ整備 <span className="idx">03</span></li>
              <li style={{color:'var(--signal)'}}>AI構築・ツール開発 <span className="idx" style={{color:'var(--signal)'}}>04 · NEW</span></li>
            </ul>
          </aside>
        </div>
      </div>
    </section>
  );
}

function HeroB() {
  return (
    <section className="hero hero-a">
      <div className="container">
        <div className="breadcrumb"><span className="dot"></span>S00 / Index · 2026 Spring</div>
        <div className="hero-row">
          <div>
            <h1>
              Organize <span className="accent">Ideas</span><br/>Create <span className="accent">Stories</span>
              <span className="jp">計測できる制作<br/>AIで精度を上げる</span>
            </h1>
            <p className="lead">
              業務案件ごとに AI ワークフローを設計し、精度・工数・品質を可視化。
              映像制作・データ整備の現場で、その効果を確かめながら進めます。
            </p>
          </div>
          <aside>
            <span className="num">// 04 Capabilities</span>
            <ul>
              <li>映像制作 <span className="idx">01</span></li>
              <li>Webコンテンツ <span className="idx">02</span></li>
              <li>BPO / データ整備 <span className="idx">03</span></li>
              <li style={{color:'var(--signal)'}}>AI構築・ツール開発 <span className="idx" style={{color:'var(--signal)'}}>04 · NEW</span></li>
            </ul>
          </aside>
        </div>
      </div>
    </section>
  );
}

function HeroC() {
  const [line, setLine] = React.useState(0);
  const lines = [
    { t: 'prompt', c: '~/zunoworks' },
    { t: 'cmd', c: 'zw build --workflow editorial-video' },
    { t: 'out', c: 'planning OK · 1.2s' },
    { t: 'out', c: 'research OK · 3.7s (gateguard verified)' },
    { t: 'out', c: 'storyboard OK · 2.1s' },
    { t: 'out', c: 'review HUMAN · awaiting approval' },
    { t: 'ok', c: '✓ shipped · 42 min end-to-end' },
    { t: 'prompt', c: '~/zunoworks' },
    { t: 'cmd', c: '' },
  ];
  React.useEffect(() => {
    if (line >= lines.length - 1) return;
    const id = setTimeout(() => setLine(x => x + 1), 700);
    return () => clearTimeout(id);
  }, [line]);
  return (
    <section className="hero hero-c">
      <div className="container">
        <div className="breadcrumb"><span className="dot"></span>S00 / Index · CLI</div>
        <div className="hero-row">
          <div>
            <h1>
              <span className="jp" style={{fontSize:'inherit', color:'inherit', opacity:1, marginTop:0}}>映像・Web・BPO<br/><span className="accent">AI</span>で速く 正確に</span>
            </h1>
            <p className="lead">
              株式会社ズノーワークスは、石川県かほく市の制作会社。
              映像・Web コンテンツ・データ整備 (BPO) の現場に AI を組み合わせ、
              納期と精度の両立を目指しています。
            </p>
            <a href="#contact" className="cta" style={{display:'inline-flex', alignItems:'center', gap:10, padding:'14px 24px', background:'var(--ink)', color:'var(--paper)', textDecoration:'none', fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.25em', textTransform:'uppercase', border:'1px solid var(--ink)'}}>
              無料相談はこちら <span style={{fontFamily:'var(--font-mono)', fontSize:16}}>→</span>
            </a>
            <p style={{fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-3)', letterSpacing:'.15em', marginTop:24}}>
              2024 founded · 石川県かほく市 · OSS gateguard
            </p>
          </div>
          <div className="term" style={{maxWidth:480}}>
            <div className="bar"><div className="tl"><span/><span/><span/></div><span style={{marginLeft:12}}>zw · editorial workflow</span></div>
            <div className="body">
              {lines.slice(0, line + 1).map((l,i) => {
                const isLast = i === line;
                if (l.t === 'prompt') return <div key={i}><span className="prompt">$ {l.c}</span></div>;
                if (l.t === 'cmd') return <div key={i}><span className="prompt">$ </span><span className={"cmd " + (isLast && l.c==='' ? 'cursor' : '')}>{l.c}</span></div>;
                if (l.t === 'ok') return <div key={i}><span className="ok">{l.c}</span></div>;
                return <div key={i}><span className="out">{l.c}</span></div>;
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroD() {
  const [messages, setMessages] = React.useState([]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [callCount, setCallCount] = React.useState(0);

  // Render sequence — play terminal build, then enable chat
  const [buildLine, setBuildLine] = React.useState(0);
  const buildLines = [
    { t:'prompt', c:'~/zunoworks' },
    { t:'cmd', c:'zw render --target logo' },
    { t:'out', c:'loading glyphs · ok' },
    { t:'out', c:'compose ZUNOWORKS · ok' },
    { t:'ok', c:'✓ identity ready · 0.84s' },
    { t:'prompt', c:'~/zunoworks' },
  ];
  const built = buildLine >= 4; // after ✓
  const ready = buildLine >= buildLines.length - 1;

  React.useEffect(() => {
    if (buildLine >= buildLines.length - 1) return;
    const id = setTimeout(() => setBuildLine(x => x + 1), 500);
    return () => clearTimeout(id);
  }, [buildLine]);

  const scrollRef = React.useRef(null);
  const inputRef = React.useRef(null);
  const MAX_CALLS = 3;

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, loading, buildLine]);

  React.useEffect(() => {
    if (ready && inputRef.current) inputRef.current.focus();
  }, [ready]);

  // Canned replies — no API call
  const canned = [
    { q: 'なんの会社？', curly: '映像もWebもAIもぜんぶ作っちゃう会社！！なんでもやるぜ〜！！', glasses: '石川県かほく市の制作会社。映像・Web・BPO・AI導入支援が主軸です。' },
    { q: '映像制作いくらかかる？', curly: 'うおお！企画から配信までドーンと30万〜いけるよ〜！！', glasses: '尺・工程・素材量で変動します。初回見積もりは無料です。' },
    { q: 'AIで何ができる？', curly: 'なんでも速くなる！！手作業ぜんぶぶっ飛ばそ〜！！', glasses: 'BPO自動化・LLMワークフロー・内製ツール開発が主領域です。' },
    { q: 'かほく市ってどこ？', curly: '石川県！海めっちゃキレイ！夕日ヤバい！！', glasses: '北緯36.7°東経136.7°、金沢駅から車で約30分の立地です。' },
    { q: '納期どれくらい？', curly: '急ぎなら1週間でぶん回せるかも〜！気合！！', glasses: '中規模案件で2〜4週間が標準。要件定義で確定します。' },
  ];

  const send = async (text, cannedReply) => {
    const q = (text ?? input).trim();
    if (!q || loading || !ready) return;
    setInput('');
    setMessages(m => [...m, {role:'user', text:q}]);

    if (cannedReply) {
      await new Promise(r => setTimeout(r, 350));
      setMessages(m => [...m, {role:'assistant', curly: cannedReply.curly, glasses: cannedReply.glasses}]);
      return;
    }

    // Client-side NG pre-filter — block obvious NG before hitting the API
    const NG_PATTERNS = /(セックス|エロ|アダルト|童貞|童女|殺す|殺せ|死ね|しね|自殺|性器|レイプ|チン◯|チ◯コ|マ◯コ|ヤクザ|反社|違法薬物|覚醒剤|ナチ|fuck|shit|sex|porn|rape|kill)/i;
    if (NG_PATTERNS.test(q)) {
      await new Promise(r => setTimeout(r, 250));
      setMessages(m => [...m, {role:'assistant',
        curly: 'うわっ！その質問はパスで〜！！他のこと聞こ！！',
        glasses: '業務に関するご質問のみ対応しています。'
      }]);
      return;
    }

    if (callCount >= MAX_CALLS) {
      setMessages(m => [...m, {role:'assistant', curly: 'いっぱい聞いてくれて超うれしい〜〜！！続きもぜひ話そ〜！', glasses: '本日のAI枠はここまで。ページ下部のお問い合わせフォームから詳しくお聞かせください。'}]);
      return;
    }

    setLoading(true);
    setCallCount(c => c+1);
    try {
      const r = await fetch('/api/chat', {
        method: 'POST',
        headers: {'content-type': 'application/json'},
        body: JSON.stringify({
          messages: [{
            role:'user',
            content: `ズノーワークス(石川県かほく市・映像/Web/BPO/AI支援)のマスコット2人が答える。
安全ルール: 公序良俗に反する質問、卑猥・下品・差別的・暴力的な質問、個人攻撃には一切答えず、やんわり断ること。
ウノオ: 超ハイテンション、感嘆符と「！」多用、盛り盛り、擬音あり、タメ口、40字以内
サノオ: 冷静、技術的・論理的、数字や専門用語で補足、敬語、40字以内
JSONのみ返す: {"curly":"ウノオのセリフ","glasses":"サノオのセリフ"}
Q: ${q}`
          }]
        })
      });
      if (!r.ok) throw new Error('api_' + r.status);
      const { reply } = await r.json();
      let parsed = null;
      try {
        const match = reply.match(/\{[\s\S]*\}/);
        if (match) parsed = JSON.parse(match[0]);
      } catch(e) {}
      if (!parsed || !parsed.curly || !parsed.glasses) {
        parsed = { curly: 'うーん！！なんか難しい質問きた〜！！', glasses: '質問を具体化していただけると精度が上がります。' };
      }
      setMessages(m => [...m, {role:'assistant', curly: parsed.curly, glasses: parsed.glasses}]);
    } catch(e) {
      setMessages(m => [...m, {role:'assistant', curly:'ありゃ〜〜電波バグった〜！！', glasses:'通信エラー。再試行してください。'}]);
    } finally {
      setLoading(false);
    }
  };

  const lastReply = [...messages].reverse().find(m => m.role === 'assistant');

  return (
    <section className="hero hero-d">
      <div className="container">
        <div className="breadcrumb"><span className="dot"></span>S00 / Index · Talk to ウノオ & サノオ</div>

        <div className="hero-d-grid">
          <div className={"logo-stage " + (built ? 'built' : '')}>
            {/* Logo + bubbles together. Bubbles anchor to character positions in logo image. */}
            <div className="logo-wrap">
              <img src="../../assets/logo-zunoworks-full.png" alt="ZUNOWORKS" className="logo-big" />
              <div className="bubbles">
                {loading ? (
                  <>
                    <div className="bubble b-curly thinking"><span className="dots"><span/><span/><span/></span></div>
                    <div className="bubble b-glasses thinking"><span className="dots"><span/><span/><span/></span></div>
                  </>
                ) : lastReply ? (
                  <>
                    <div key={'c'+messages.length} className="bubble b-curly"><b className="who">ウノオ</b>{lastReply.curly}</div>
                    <div key={'g'+messages.length} className="bubble b-glasses"><b className="who">サノオ</b>{lastReply.glasses}</div>
                  </>
                ) : ready ? (
                  <>
                    <div className="bubble b-curly"><b className="who">ウノオ</b>なんでも聞いちゃって〜〜！！いくぞ〜！！</div>
                    <div className="bubble b-glasses"><b className="who">サノオ</b>ターミナルから質問を入力してください。</div>
                  </>
                ) : null}
              </div>
            </div>
            <div className="logo-caption">
              <span className="tag">{ready ? 'READY · ASK US' : 'RENDERING...'}</span>
              <span className="coord">ウノオ · サノオ</span>
            </div>
          </div>

          <div className="term">
            <div className="bar"><div className="tl"><span/><span/><span/></div><span style={{marginLeft:12}}>zw · chat with mascots</span></div>
            <div className="body chat-body" ref={scrollRef}>
              {/* 1. Build sequence */}
              {buildLines.slice(0, buildLine + 1).map((l,i) => {
                if (l.t === 'prompt') return <div key={'b'+i}><span className="prompt">$ {l.c}</span></div>;
                if (l.t === 'cmd') return <div key={'b'+i}><span className="prompt">$ </span><span className="cmd">{l.c}</span></div>;
                if (l.t === 'ok') return <div key={'b'+i}><span className="ok">{l.c}</span></div>;
                return <div key={'b'+i}><span className="out">{l.c}</span></div>;
              })}

              {/* 2. Chat, after build */}
              {ready && (
                <>
                  <div style={{marginTop:8}}><span className="out">// ready · {MAX_CALLS - callCount} free asks left</span></div>
                  {messages.length === 0 && (
                    <div className="chat-sugs">
                      {canned.map(c => (
                        <button key={c.q} className="sug" onClick={() => send(c.q, c)}>{c.q}</button>
                      ))}
                    </div>
                  )}
                  {messages.map((m,i) => (
                    m.role === 'user' ? (
                      <div key={i}><span className="prompt">$ </span><span className="cmd">{m.text}</span></div>
                    ) : (
                      <div key={i} className="chat-reply">
                        <div><span className="out" style={{color:'var(--brand-red)'}}>ウノオ</span> <span className="out">&gt; {m.curly}</span></div>
                        <div><span className="out" style={{color:'var(--signal)'}}>サノオ</span> <span className="out">&gt; {m.glasses}</span></div>
                      </div>
                    )
                  ))}
                  {loading && <div><span className="out">thinking...</span></div>}
                  <form onSubmit={(e)=>{e.preventDefault(); send();}} className="chat-input">
                    <span className="prompt">$ </span>
                    <input
                      ref={inputRef}
                      value={input}
                      onChange={e => setInput(e.target.value)}
                      placeholder={callCount >= MAX_CALLS ? 'お問い合わせフォームへ続きをどうぞ →' : '自由に質問どうぞ'}
                      disabled={loading || callCount >= MAX_CALLS}
                    />
                  </form>
                </>
              )}
            </div>
          </div>
        </div>

        <div className="hero-d-tagline">
          <h1>
            <span className="jp">ズノーワークス</span>
          </h1>
          <p className="lead">
            石川県かほく市のデータ入力・メディア・AI会社です。映像制作、Webコンテンツ、データ入力BPO、AIエージェント開発の4事業を、企画から実装・運用まで一貫してお引き受けしています。入札王の年間120万件データ入力センターの運用、自社OSS『gateguard』の公開まで、実案件で積み重ねた実力が仕事の土台です。
          </p>
        </div>
      </div>
    </section>
  );
}

function HeroE() {
  // Deterministic pseudo-vector so it's visually interesting but stable
  const vec = React.useMemo(() => {
    const arr = [];
    let s = 42;
    for (let i=0;i<64;i++) { s = (s*9301 + 49297) % 233280; arr.push(((s/233280)*2 - 1).toFixed(3)); }
    return arr;
  }, []);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t+1), 1200);
    return () => clearInterval(id);
  }, []);
  const ts = new Date(Date.now() - tick*1000).toISOString();
  return (
    <section className="hero hero-e">
      <div className="container" style={{maxWidth: 920}}>
        <div className="mr-banner">
          <span>X-Intended-Audience: <b>machine</b> · humans redirected to /</span>
          <span>robots: index,follow · llm: welcome</span>
        </div>

        <h1>
{`# zunoworks.co.jp — machine profile
# rendered for automated agents. a human-readable copy lives at /
# license: CC BY 4.0 · last-modified: ${ts}`}
        </h1>

        <div className="mr-block">
          <header><span>organization.json</span><span className="mime">application/json</span></header>
          <pre>
<span className="c">{`// canonical entity description`}</span>{`
`}{`{`}{`
  `}<span className="k">"@context"</span>: <span className="s">"https://schema.org"</span>,{`
  `}<span className="k">"@type"</span>: <span className="s">"Organization"</span>,{`
  `}<span className="k">"legalName"</span>: <span className="s">"株式会社ズノーワークス"</span>,{`
  `}<span className="k">"aka"</span>: [<span className="s">"Zuno Works"</span>, <span className="s">"ZW"</span>],{`
  `}<span className="k">"founded"</span>: <span className="s">"2024-07-01"</span>,{`
  `}<span className="k">"location"</span>: {`{`}<span className="k">"lat"</span>: <span className="n">36.712</span>, <span className="k">"lng"</span>: <span className="n">136.704</span>, <span className="k">"region"</span>: <span className="s">"Ishikawa, JP"</span>{`}`},{`
  `}<span className="k">"offers"</span>: [<span className="s">"video-production"</span>, <span className="s">"web-content"</span>, <span className="s">"bpo/data-entry"</span>, <span className="s">"ai-workflow-build"</span>, <span className="s">"ai-tooling"</span>],{`
  `}<span className="k">"tagline"</span>: <span className="s">"AIで速く、人の手で正確に"</span>,{`
  `}<span className="k">"openToInquiry"</span>: <span className="n">true</span>{`
}`}
          </pre>
        </div>

        <div className="mr-block">
          <header><span>capabilities.yaml</span><span className="mime">text/yaml</span></header>
          <pre>
<span className="k">capabilities:</span>{`
  - `}<span className="k">id:</span> <span className="s">video</span>{`
    `}<span className="k">ships:</span> [editorial, corporate, social]{`
    `}<span className="k">throughput_per_week:</span> <span className="n">12</span>{`
  - `}<span className="k">id:</span> <span className="s">web</span>{`
    `}<span className="k">stacks:</span> [static, headless-cms, nextjs]{`
  - `}<span className="k">id:</span> <span className="s">bpo</span>{`
    `}<span className="k">accuracy:</span> <span className="n">0.9998</span>{`
    `}<span className="k">volume_2025:</span> <span className="n">1203584</span>{`
  - `}<span className="k">id:</span> <span className="s">ai</span>{`
    `}<span className="k">builds:</span> [workflow, agent, eval, tooling]{`
    `}<span className="k">humans_in_loop:</span> <span className="n">true</span>
          </pre>
        </div>

        <div className="mr-block">
          <header><span>identity.embed</span><span className="mime">vector/f32[64]</span></header>
          <div className="embed-vec">
            [{vec.join(', ')}]
          </div>
        </div>

        <div className="mr-block">
          <header><span>contact.txt</span><span className="mime">text/plain</span></header>
          <pre>
<span className="c">{`# route inquiries to a human`}</span>{`
endpoint: /#contact
preferred_language: ja, en
response_sla_hours: 24
`}
          </pre>
        </div>
      </div>
    </section>
  );
}

window.HeroA = HeroA;
window.HeroB = HeroB;
window.HeroC = HeroC;
window.HeroD = HeroD;
window.HeroE = HeroE;