/* TEAM SECTION — открытая команда, которой нет у крупных конкурентов.
   Данные подгружаются с /api/team, при недоступности — fallback на статичный массив. */

const FALLBACK_TEAM = [
  { id: 1, initials: 'АП', name: 'Артём Полевой', role: 'CEO · Co-founder',
    bio: 'Архитектор финансовых платформ. 12 лет в продуктовой инженерии.',
    color: '#4db8ff' },
  { id: 2, initials: 'МК', name: 'Мария Куприянова', role: 'CTO · Co-founder',
    bio: 'Bekend lead, distributed systems. Контрибьютор open-source.',
    color: '#00e5ff' },
  { id: 3, initials: 'ИД', name: 'Илья Демьянов', role: 'Head of Mobile',
    bio: 'iOS / Swift Concurrency, KMP.',
    color: '#b388ff' },
  { id: 4, initials: 'ОН', name: 'Ольга Невская', role: 'Head of Design',
    bio: 'Продуктовый UX и моушн.',
    color: '#46f3a8' },
  { id: 5, initials: 'ДВ', name: 'Дмитрий Власов', role: 'AI / ML Lead',
    bio: 'LLM-агенты, RAG, eval-first процессы.',
    color: '#ffa14d' },
  { id: 6, initials: 'ЕС', name: 'Елизавета Соловьёва', role: 'Product / Delivery',
    bio: 'Продакт-менеджмент, discovery, ритмы спринтов.',
    color: '#ff7a8d' },
];

function Team() {
  const [members, setMembers] = React.useState(FALLBACK_TEAM);

  React.useEffect(() => {
    let cancelled = false;
    const load = () => fetch('/api/team', { credentials: 'same-origin' })
      .then(r => r.ok ? r.json() : Promise.reject(r))
      .then(d => { if (!cancelled && Array.isArray(d.team) && d.team.length) setMembers(d.team); })
      .catch(() => { /* keep fallback */ });
    load();
    const onUpdate = () => load();
    window.addEventListener('scutoid:team-updated', onUpdate);
    return () => {
      cancelled = true;
      window.removeEventListener('scutoid:team-updated', onUpdate);
    };
  }, []);

  return (
    <section className="section container" id="team">
      <div className="section-head">
        <h2>Команда. <span className="italic">Люди, которые делают продукт.</span></h2>
        <div className="num">06 / КОМАНДА</div>
      </div>
      <div className="team-grid">
        {members.map((m) => (
          <div key={m.id} className="team-card">
            <div className="team-avatar" style={{
              background: `radial-gradient(circle at 30% 30%, ${m.color}55, ${m.color}11)`,
              border: `1px solid ${m.color}66`,
              color: m.color,
              boxShadow: `0 0 32px ${m.color}22`,
            }}>{m.initials}</div>
            <div className="team-info">
              <div className="team-name">{m.name}</div>
              <div className="team-role" style={{color: m.color}}>{m.role}</div>
              <p className="team-bio">{m.bio}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Team = Team;