function Products() {
  useReveal();
  const products = [
    {
      tag: 'PRODUCT 01 — FLAGSHIP',
      name: 'KURA',
      nameSub: 'Analytics',
      desc: '製造業向け生産データ分析プラットフォーム。IoTセンサー・ERP・品質管理の情報を一つのダッシュボードに集約し、現場の判断を支援します。日経SaaS Award 2026 ベストプロダクト部門受賞。',
      stats: [['導入社数', '84社'], ['処理データ', '1.2B行/日'], ['ARR', '12.8億']],
      visual: 'chart'
    },
    {
      tag: 'PRODUCT 02',
      name: '帳',
      nameSub: 'Chō — Invoice Engine',
      desc: '経理実務に特化した電子帳簿保存法準拠の請求書・インボイスSaaS。既存のERP・会計システムと密結合せず、疎結合な"連携レイヤー"として設計されています。',
      stats: [['導入社数', '340社'], ['処理件数', '580万/月'], ['稼働', '99.98%']],
      visual: 'doc'
    },
    {
      tag: 'PRODUCT 03 — NEW',
      name: '揺',
      nameSub: 'Yure — Signal Monitoring',
      desc: '基幹システムの"揺らぎ"を観測するSRE支援プロダクト。SLOからの逸脱を早期検知し、障害の前兆を捉えます。2025年12月リリース、現在β提供中。',
      stats: [['導入社数', '12社'], ['検知実績', '140件/月'], ['MTTR短縮', '-62%']],
      visual: 'wave'
    },
  ];

  return (
    <section id="products">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">04</span>OUR PRODUCTS — 自社プロダクト</p>
          <h2 className="h-section">受託で鍛えた知見を、<br/>自社プロダクトへ。</h2>
          <div className="meta-row">
            <span className="mono small">/ 3つのSaaSプロダクトを開発・運用中</span>
            <span className="mono small">PRODUCT STUDIO</span>
          </div>
        </div>
        <div className="product-list">
          {products.map((p, i) => <Product key={i} {...p} />)}
        </div>
      </div>
    </section>
  );
}

function Product({ tag, name, nameSub, desc, stats, visual }) {
  return (
    <article className="product reveal">
      <div className="product-info">
        <div className="p-tag">{tag}</div>
        <h3 className="p-name"><span className="accent">{name}</span>{nameSub && <span style={{ fontSize: '0.45em', display: 'block', marginTop: 6, color: 'var(--ink-mute)', letterSpacing: '0.15em', fontFamily: 'var(--f-mono)' }}>{nameSub}</span>}</h3>
        <p className="p-desc">{desc}</p>
        <div className="p-meta">
          {stats.map(([l, v]) => (
            <div key={l}><div>{l}</div><b>{v}</b></div>
          ))}
        </div>
      </div>
      <div className="product-shot">
        {visual === 'chart' && <ProdChart />}
        {visual === 'doc' && <ProdDoc />}
        {visual === 'wave' && <ProdWave />}
      </div>
    </article>
  );
}

function ProdChart() {
  return (
    <svg viewBox="0 0 400 250" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="250" fill="var(--bg-paper)"/>
      <g opacity="0.4">
        {[50, 100, 150, 200].map(y => <line key={y} x1="20" y1={y} x2="380" y2={y} stroke="var(--line)" strokeWidth="0.5"/>)}
      </g>
      <polyline points="20,180 60,150 100,170 140,120 180,135 220,85 260,100 300,65 340,80 380,45" fill="none" stroke="var(--shu)" strokeWidth="2"/>
      <polyline points="20,200 60,190 100,195 140,175 180,180 220,160 260,155 300,145 340,140 380,130" fill="none" stroke="var(--ink)" strokeWidth="1" strokeDasharray="3 3"/>
      {[[60,150],[140,120],[220,85],[300,65],[380,45]].map(([x,y],i) => <circle key={i} cx={x} cy={y} r="3" fill="var(--shu)"/>)}
      <rect x="20" y="220" width="360" height="1" fill="var(--line)"/>
      <text x="20" y="30" fontSize="10" fill="var(--ink-mute)" fontFamily="var(--f-mono)" letterSpacing="1">KURA ANALYTICS / 製造ライン稼働率</text>
      <text x="370" y="30" fontSize="10" fill="var(--shu)" fontFamily="var(--f-mono)" textAnchor="end">▲ 23.4%</text>
    </svg>
  );
}
function ProdDoc() {
  return (
    <svg viewBox="0 0 400 250" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="250" fill="var(--bg-paper)"/>
      <rect x="40" y="30" width="220" height="200" fill="var(--bg)" stroke="var(--line)"/>
      <rect x="56" y="48" width="120" height="6" fill="var(--ink)" opacity="0.3"/>
      <rect x="56" y="62" width="80" height="4" fill="var(--ink)" opacity="0.15"/>
      {[92,104,116,128,140,152].map(y => (
        <g key={y}>
          <rect x="56" y={y} width="120" height="3" fill="var(--ink)" opacity="0.1"/>
          <rect x="210" y={y} width="40" height="3" fill="var(--ink)" opacity="0.1"/>
        </g>
      ))}
      <line x1="56" y1="170" x2="244" y2="170" stroke="var(--line)" strokeWidth="1"/>
      <rect x="200" y="185" width="44" height="14" fill="var(--shu)"/>
      <text x="222" y="195" fontSize="8" fill="var(--bg)" textAnchor="middle" fontFamily="var(--f-mono)">¥18,400</text>
      <g transform="translate(290, 60)">
        <rect x="0" y="0" width="80" height="80" fill="none" stroke="var(--ink)"/>
        <circle cx="40" cy="40" r="20" fill="var(--shu)"/>
        <text x="40" y="44" fontSize="14" fill="var(--bg)" textAnchor="middle" fontFamily="var(--f-heading)">帳</text>
        <text x="40" y="100" fontSize="9" fill="var(--ink-mute)" textAnchor="middle" fontFamily="var(--f-mono)">APPROVED</text>
      </g>
    </svg>
  );
}
function ProdWave() {
  return (
    <svg viewBox="0 0 400 250" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="250" fill="var(--bg-paper)"/>
      <path d="M0,125 Q 25,115 50,125 T 100,125 T 150,125 T 200,125 T 250,125 T 300,125 T 350,125 T 400,125" fill="none" stroke="var(--line)" strokeWidth="1"/>
      <path d="M0,125 Q 25,95 50,130 T 100,120 T 150,135 T 200,80 T 250,140 T 300,118 T 350,128 T 400,122" fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
      <circle cx="200" cy="80" r="14" fill="none" stroke="var(--shu)" strokeWidth="2"/>
      <circle cx="200" cy="80" r="4" fill="var(--shu)"/>
      <line x1="200" y1="94" x2="200" y2="200" stroke="var(--shu)" strokeWidth="1" strokeDasharray="3 3"/>
      <rect x="160" y="200" width="80" height="20" fill="var(--ink)"/>
      <text x="200" y="213" fontSize="9" fill="var(--bg)" textAnchor="middle" fontFamily="var(--f-mono)">ANOMALY — 22:47</text>
      <text x="20" y="35" fontSize="10" fill="var(--ink-mute)" fontFamily="var(--f-mono)">SIGNAL / api.payment.latency</text>
    </svg>
  );
}

Object.assign(window, { Products });
