// gm-sections-2.jsx — Vídeo (movimento) e Diagramas/Fluxogramas/Infográficos.
// Exports: GMMotion, GMDiagrams.

function GMMotion() {
  const [playKey, setPlayKey] = React.useState(0);
  const durations = [
    ["Micro (UI, hover)", "120–200ms", "Aparição de label, troca de estado."],
    ["Elemento entra/sai", "300–450ms", "Title card, bullet, callout surgindo."],
    ["Transição de cena", "500–700ms", "Corte entre seções/capítulos."],
  ];
  return (
    <Section id="movimento">
      <style>{`
        @keyframes gmRise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
        @keyframes gmWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
        .gm-rise > * { animation: gmRise 0.5s cubic-bezier(0.2,0.7,0.3,1) both; }
        .gm-rise > *:nth-child(1){ animation-delay: 0.05s; }
        .gm-rise > *:nth-child(2){ animation-delay: 0.20s; }
        .gm-rise > *:nth-child(3){ animation-delay: 0.35s; }
        @media (prefers-reduced-motion: reduce){ .gm-rise > * { animation: none; } }
      `}</style>
      <SecHead n="03" kicker="Vídeo · movimento" title="Animação com propósito, nunca enfeite."
        lead="Movimento guia o olho e dá ritmo — quando tem intenção. A marca usa um vocabulário pequeno e consistente de transições. Tudo parte de uma curva e de durações fixas." />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 32, marginBottom: 40, alignItems: "stretch" }}>
        <Card>
          <Mono color={T.clay} size={10.5}>A curva da marca</Mono>
          <div style={{ display: "flex", gap: 22, alignItems: "center", marginTop: 16 }}>
            <svg width="120" height="120" viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
              <rect x="0" y="0" width="100" height="100" fill={T.panel} rx="8" />
              <line x1="0" y1="100" x2="100" y2="0" stroke={T.line2} strokeWidth="0.8" strokeDasharray="2 2" />
              <path d="M0 100 C 20 30, 30 0, 100 0" fill="none" stroke={T.coral} strokeWidth="3" strokeLinecap="round" />
              <circle cx="0" cy="100" r="3" fill={T.ink} /><circle cx="100" cy="0" r="3" fill={T.cyan} />
            </svg>
            <div>
              <div style={{ fontFamily: F.mono, fontSize: 13, color: T.ink, fontWeight: 600 }}>cubic-bezier(.2,.7,.3,1)</div>
              <div style={{ fontSize: 13.5, color: T.sub, lineHeight: 1.5, marginTop: 8 }}>Saída rápida, chegada suave (<em>ease-out</em>). Dá energia sem parecer brusco. Use a mesma curva em tudo — é o que faz o movimento "soar" como a marca.</div>
            </div>
          </div>
          <div style={{ marginTop: 22, borderTop: `1px solid ${T.line}`, paddingTop: 18 }}>
            <Mono color={T.clay} size={10.5}>Durações</Mono>
            <div style={{ marginTop: 10 }}>
              {durations.map(([t, d, ex]) => (
                <div key={t} style={{ display: "flex", alignItems: "baseline", gap: 12, padding: "9px 0", borderBottom: `1px solid ${T.line}` }}>
                  <span style={{ fontFamily: F.mono, fontSize: 12, color: T.cyan, width: 92, flexShrink: 0 }}>{d}</span>
                  <div><span style={{ fontWeight: 600, fontSize: 13.5 }}>{t}</span><span style={{ fontSize: 12.5, color: T.sub }}> — {ex}</span></div>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
            <Mono color={T.clay} size={10.5}>Demo · entrada escalonada</Mono>
            <button onClick={() => setPlayKey((k) => k + 1)} style={{ cursor: "pointer", fontFamily: F.mono, fontSize: 11, fontWeight: 600, color: T.ink, background: "transparent", border: `1px solid ${T.ink}`, padding: "6px 13px", borderRadius: 8 }}>▶ Reproduzir</button>
          </div>
          <Frame ratio="16:9" dark grid>
            <div key={playKey} className="gm-rise" style={{ position: "absolute", inset: 0, padding: "9% 8%", display: "flex", flexDirection: "column", justifyContent: "center", gap: 14 }}>
              <div><Mono color={T.amber} size={11}>Pipeline em 3 passos</Mono></div>
              <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 30, color: T.dsand, lineHeight: 1, letterSpacing: -1 }}>Ingest → Embed → Serve</div>
              <div style={{ display: "flex", gap: 9 }}>
                {[T.coral, T.amber, T.dcyan].map((c, i) => <span key={i} style={{ width: 40, height: 6, borderRadius: 4, background: c }}></span>)}
              </div>
            </div>
          </Frame>
          <div style={{ fontSize: 12.5, color: T.sub, marginTop: 10, lineHeight: 1.45 }}>Kicker, título e barra entram em sequência (50/200/350ms) — o olho segue a ordem de leitura. Nunca anime tudo ao mesmo tempo.</div>
        </div>
      </div>

      <RightWrong h={120}
        wrongCap="Bounce, giros, escalas exageradas e durações longas. Parece amador e distrai do conteúdo."
        rightCap="Fade + leve subida, na curva da marca, rápido. O movimento serve o conteúdo e some."
        wrong={<div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 22, color: T.rust, transform: "rotate(-8deg) scale(1.1)" }}>BOIIING! ✨🎉</div>}
        right={<div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 22, color: T.ink, letterSpacing: -0.5 }}>Ingest → Embed</div>}
      />
      <div style={{ marginTop: 24 }}>
        <Note title="Acessibilidade não é opcional">
          Sempre respeite <span style={{ fontFamily: F.mono, fontSize: 13 }}>prefers-reduced-motion</span>: quem desativou animação no sistema deve ver o conteúdo no estado final, sem movimento. É uma linha de CSS — e evita enjoar parte do público.
        </Note>
      </div>
    </Section>
  );
}

function GMDiagrams() {
  const Node = ({ children, c = T.ink, fill, sub }) => (
    <div style={{ background: fill || T.card, border: `2px solid ${c}`, borderRadius: 10, padding: "12px 16px", textAlign: "center", minWidth: 92 }}>
      <div style={{ fontFamily: F.text, fontWeight: 700, fontSize: 14, color: fill ? T.card : T.ink, lineHeight: 1.1 }}>{children}</div>
      {sub && <div style={{ fontFamily: F.mono, fontSize: 9.5, color: fill ? "rgba(251,246,234,0.8)" : T.sub, marginTop: 3 }}>{sub}</div>}
    </div>
  );
  const Arrow = ({ label }) => (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", color: T.taupe, flexShrink: 0 }}>
      {label && <span style={{ fontFamily: F.mono, fontSize: 9, color: T.sub, marginBottom: 2 }}>{label}</span>}
      <span style={{ fontSize: 20, color: T.clay, lineHeight: 1 }}>→</span>
    </div>
  );
  return (
    <Section id="diagramas" alt>
      <SecHead n="04" kicker="Imagem · diagramas" title="Diagramas, fluxos e infográficos."
        lead="Seu terreno: explicar sistemas. Um bom diagrama é metade do trabalho de ensinar. As regras aqui valem para fluxogramas, arquiteturas e infográficos." />

      {/* node + connector vocabulary */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 30 }}>
        <Card>
          <Mono color={T.clay} size={10.5}>Vocabulário de nós</Mono>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 18, alignItems: "center" }}>
            <Node>Processo</Node>
            <Node c={T.cyan} sub="armazenam.">Store</Node>
            <Node fill={T.coral} c={T.coral}>Destaque</Node>
            <div style={{ width: 70, height: 36, border: `2px dashed ${T.taupe}`, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: F.mono, fontSize: 10, color: T.sub }}>externo</div>
          </div>
          <div style={{ fontSize: 12.5, color: T.sub, marginTop: 16, lineHeight: 1.5 }}>Tamanho e forma consistentes. Cor = significado (coral destaca, ciano = dado/storage, tracejado = sistema externo). Nunca cor por enfeite.</div>
        </Card>
        <Card>
          <Mono color={T.clay} size={10.5}>Conectores</Mono>
          <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <svg width="120" height="20"><line x1="2" y1="10" x2="104" y2="10" stroke={T.ink} strokeWidth="2" /><polygon points="104,4 116,10 104,16" fill={T.ink} /></svg>
              <span style={{ fontSize: 12.5, color: T.sub }}>Fluxo direto (sólido)</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <svg width="120" height="20"><line x1="2" y1="10" x2="104" y2="10" stroke={T.cyan} strokeWidth="2" strokeDasharray="5 4" /><polygon points="104,4 116,10 104,16" fill={T.cyan} /></svg>
              <span style={{ fontSize: 12.5, color: T.sub }}>Fluxo de dado / assíncrono (tracejado)</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <svg width="120" height="24"><path d="M2 6 H60 V18 H104" fill="none" stroke={T.ink} strokeWidth="2" /><polygon points="104,11 117,18 104,25" fill={T.ink} /></svg>
              <span style={{ fontSize: 12.5, color: T.sub }}>Ortogonal (90°), nunca diagonal solta</span>
            </div>
          </div>
        </Card>
      </div>

      {/* flowchart example */}
      <Card style={{ marginBottom: 24 }}>
        <Mono color={T.clay} size={10.5}>Fluxograma · pipeline de dados (esquerda → direita)</Mono>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 22, flexWrap: "wrap", justifyContent: "center" }}>
          <Node sub="API / logs">Source</Node><Arrow label="extract" />
          <Node>Transform</Node><Arrow label="load" />
          <Node c={T.cyan} sub="warehouse">Store</Node><Arrow label="query" />
          <Node fill={T.coral} c={T.coral} sub="dashboard">Serve</Node>
        </div>
        <div style={{ fontSize: 12.5, color: T.sub, marginTop: 18, textAlign: "center" }}>Direção única e clara. Toda seta rotulada com o verbo da ação. O nó final (entrega) recebe o destaque coral.</div>
      </Card>

      {/* infographic patterns */}
      <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 20, marginBottom: 18 }}>Padrões de infográfico</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
        <Card>
          <Mono color={T.sub} size={10}>Passos numerados</Mono>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 12 }}>
            {["Coletar", "Modelar", "Servir"].map((s, i) => (
              <div key={s} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 28, height: 28, borderRadius: "50%", background: T.ink, color: T.card, fontFamily: F.display, fontWeight: 800, fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center" }}>{i + 1}</span>
                <span style={{ fontWeight: 600, fontSize: 14 }}>{s}</span>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <Mono color={T.sub} size={10}>Comparação</Mono>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 10 }}>
            {[["Batch", 55, T.taupe], ["Streaming", 90, T.coral]].map(([s, w, c]) => (
              <div key={s}>
                <div style={{ fontSize: 12.5, fontWeight: 600, marginBottom: 4 }}>{s}</div>
                <div style={{ height: 14, borderRadius: 7, background: T.panel, overflow: "hidden" }}><div style={{ width: `${w}%`, height: "100%", background: c, borderRadius: 7 }}></div></div>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <Mono color={T.sub} size={10}>Destaque de estatística</Mono>
          <div style={{ marginTop: 18, textAlign: "center" }}>
            <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 48, color: T.coral, lineHeight: 0.9, letterSpacing: -2 }}>40%</div>
            <div style={{ fontSize: 13, color: T.sub, marginTop: 8, lineHeight: 1.4 }}>menos latência<br />após reescrever o índice</div>
          </div>
        </Card>
      </div>
      <div style={{ marginTop: 24 }}>
        <Note title="O diagrama serve a explicação">
          Antes de desenhar, pergunte: <strong>qual é a única coisa que isto precisa deixar claro?</strong> Corte tudo que não ajuda essa frase. Um diagrama com 20 caixas geralmente são três diagramas disfarçados.
        </Note>
      </div>
    </Section>
  );
}

Object.assign(window, { GMMotion, GMDiagrams });