// Live match registration flow — animated demo of adding events to a game
function LiveMatch() {
  const [events, setEvents] = React.useState([
    { t: "12'", type: "gol", who: "Arthur S.", detail: "Gol de cabeça" },
    { t: "28'", type: "assist", who: "Arthur S.", detail: "Assistência" },
  ]);
  const [score, setScore] = React.useState({ a: 1, b: 0 });
  const [minute, setMinute] = React.useState(30);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setMinute((m) => (m >= 90 ? 1 : m + 1));
    }, 2200);
    return () => clearInterval(timer);
  }, []);

  const actions = [
    { type: "gol", label: "Gol", icon: "sports_soccer", c: "tertiary" },
    { type: "assist", label: "Assistência", icon: "handshake", c: "primary" },
    { type: "falta", label: "Falta", icon: "warning", c: "warning" },
    { type: "defesa", label: "Defesa", icon: "shield", c: "primary" },
  ];

  const addEvent = (type) => {
    const map = {
      gol: { detail: "Gol registrado" },
      assist: { detail: "Assistência" },
      falta: { detail: "Falta sofrida" },
      defesa: { detail: "Defesa" },
    };
    setEvents((ev) => [
      ...ev,
      { t: `${minute}'`, type, who: "Arthur S.", detail: map[type].detail },
    ]);
    if (type === "gol") setScore((s) => ({ ...s, a: s.a + 1 }));
  };

  const colorFor = (type) => {
    const map = {
      gol: "text-tertiary",
      assist: "text-primary",
      falta: "text-warning",
      defesa: "text-primary-dim",
    };
    return map[type] || "text-on-surface";
  };
  const iconFor = (type) => {
    const map = { gol: "sports_soccer", assist: "handshake", falta: "warning", defesa: "shield" };
    return map[type];
  };

  return (
    <section id="app" className="relative py-24 border-t border-outline" data-screen-label="Ao vivo">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid lg:grid-cols-[1fr_1.1fr] gap-12 items-center">
          <div>
            <div className="code-chip text-on-surface-variant mb-3">
              <span className="text-primary">/</span>ao-vivo
            </div>
            <h2 className="text-4xl md:text-5xl font-black tracking-tighter leading-[1.05] mb-6">
              Registre a partida<br />
              <span className="text-primary">enquanto ela acontece.</span>
            </h2>
            <p className="text-on-surface-variant leading-relaxed mb-8 max-w-lg">
              Um toque para cada lance. O MeuCraque mantém o placar e a timeline da partida sincronizados —
              e gera a estatística automaticamente ao final.
            </p>

            <ul className="space-y-3">
              {[
                { i: "bolt", t: "Hotkeys de lance", d: "Gol, assistência, falta e defesa com um toque." },
                { i: "sync", t: "Sincronização offline", d: "Registre sem sinal — sincroniza depois." },
                { i: "schedule", t: "Cronômetro por tempo", d: "Primeiro e segundo tempo gerenciados pelo app." },
              ].map((f, i) => (
                <li key={i} className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-surface-container border border-outline flex items-center justify-center shrink-0">
                    <Icon name={f.i} className="text-primary" size={16} />
                  </div>
                  <div>
                    <div className="text-[14px] font-bold">{f.t}</div>
                    <div className="text-[13px] text-on-surface-variant">{f.d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Demo panel */}
          <div className="bg-surface-container border border-outline rounded-2xl p-6 relative overflow-hidden">
            {/* Header */}
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-error live-dot" />
                <span className="text-[10px] font-bold text-error uppercase tracking-widest">AO VIVO</span>
              </div>
              <div className="flex items-center gap-2 text-on-surface-variant text-[11px] font-mono">
                <Icon name="schedule" size={12} />
                {minute}'
              </div>
            </div>

            {/* Scoreboard */}
            <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-4 py-4 mb-4 border-b border-outline">
              <div className="text-right">
                <div className="text-[10px] text-on-surface-variant font-bold uppercase tracking-widest">Casa</div>
                <div className="text-[14px] font-bold mt-0.5">CAAS Futmax</div>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-5xl font-black tracking-tighter text-primary">{score.a}</span>
                <span className="text-on-surface-variant text-xl">:</span>
                <span className="text-5xl font-black tracking-tighter text-on-surface">{score.b}</span>
              </div>
              <div>
                <div className="text-[10px] text-on-surface-variant font-bold uppercase tracking-widest">Fora</div>
                <div className="text-[14px] font-bold mt-0.5">Lobos AC</div>
              </div>
            </div>

            {/* Quick actions */}
            <div className="grid grid-cols-4 gap-2 mb-4">
              {actions.map((a) => (
                <button
                  key={a.type}
                  onClick={() => addEvent(a.type)}
                  className="bg-surface-container-high border border-outline rounded-lg p-3 flex flex-col items-center gap-1 hover:border-primary hover:bg-primary/5 transition-colors focus-ring"
                >
                  <Icon name={a.icon} className={`text-${a.c}`} size={18} />
                  <span className="text-[10px] font-bold uppercase tracking-wider">{a.label}</span>
                </button>
              ))}
            </div>

            {/* Events timeline */}
            <div className="code-chip text-on-surface-variant mb-2">timeline.log</div>
            <div className="bg-surface border border-outline rounded-lg p-3 max-h-[220px] overflow-y-auto no-scrollbar space-y-1.5">
              {events.slice().reverse().map((e, i) => (
                <div
                  key={events.length - i}
                  className="flex items-center gap-3 text-[12px] font-mono"
                >
                  <span className="text-on-surface-variant w-10">{e.t}</span>
                  <Icon name={iconFor(e.type)} className={colorFor(e.type)} size={14} />
                  <span className={colorFor(e.type)}>{e.detail}</span>
                  <span className="text-on-surface-variant ml-auto">— {e.who}</span>
                </div>
              ))}
              <div className="flex items-center gap-3 text-[12px] font-mono">
                <span className="text-on-surface-variant w-10">{minute}'</span>
                <span className="text-primary">_<span className="caret">|</span></span>
              </div>
            </div>

            <div className="mt-4 flex items-center justify-between">
              <button className="text-[12px] text-on-surface-variant hover:text-on-surface flex items-center gap-1">
                <Icon name="history" size={14} />
                Desfazer
              </button>
              <button className="bg-primary text-on-primary text-[12px] font-bold px-4 py-2 rounded-lg flex items-center gap-1.5 cta-glow">
                <Icon name="stop" size={14} />
                Encerrar partida
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LiveMatch = LiveMatch;