function Team() {
  useReveal();
  const members = [
    { jp: '柏木 悠介', en: 'YUSUKE KASHIWAGI', role: 'CEO / CO-FOUNDER', quote: '「仕様書の外側に、本当の要求がある」', hue: 35 },
    { jp: '南郷 真琴', en: 'MAKOTO NANGO', role: 'CTO', quote: '技術選定は、事業寿命への投資である。', hue: 250 },
    { jp: '陣内 あかり', en: 'AKARI JINNOUCHI', role: 'HEAD OF DESIGN', quote: 'デザインは、判断の集積。', hue: 20 },
    { jp: '橘 健一郎', en: 'KENICHIRO TACHIBANA', role: 'VP OF ENGINEERING', quote: '運用こそ、プロダクトの本番。', hue: 135 },
  ];
  return (
    <section id="team">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">09</span>LEADERSHIP — チーム</p>
          <h2 className="h-section">小さな卓を、<br/>囲んでいます。</h2>
          <div className="meta-row">
            <span className="mono small">/ 代表的なメンバー 4名 / 全47名</span>
            <span className="mono small">04 / 47</span>
          </div>
        </div>
        <div className="team-grid reveal-stagger">
          {members.map((m, i) => (
            <div className="member" key={i}>
              <div className="m-photo">
                <MemberPortrait hue={m.hue} idx={i} />
              </div>
              <h3 className="m-name">
                {m.jp}
                <span className="en">{m.en}</span>
              </h3>
              <div className="m-role">{m.role}</div>
              <p className="m-quote">{m.quote}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MemberPortrait({ hue, idx }) {
  const bg = `oklch(0.9 0.03 ${hue})`;
  const fg = `oklch(0.55 0.12 ${hue})`;
  return (
    <svg viewBox="0 0 300 400" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
      <rect width="300" height="400" fill={bg}/>
      <g opacity="0.35">
        {Array.from({ length: 20 }).map((_, i) => (
          <line key={i} x1={-50 + i * 20} y1="0" x2={-150 + i * 20} y2="400" stroke={fg} strokeWidth="0.5"/>
        ))}
      </g>
      <circle cx="150" cy="160" r="55" fill={fg} opacity="0.9"/>
      <path d={`M 60 400 Q 60 ${290 + idx * 10} 150 ${290 + idx * 5} Q 240 ${290 + idx * 10} 240 400 Z`} fill={fg} opacity="0.85"/>
      <rect x="20" y="20" width="55" height="16" fill="var(--ink)"/>
      <text x="47" y="32" fontSize="9" fill="var(--bg)" textAnchor="middle" fontFamily="var(--f-mono)" letterSpacing="1">PLACEHOLDER</text>
    </svg>
  );
}

Object.assign(window, { Team });