/* global React */

// Posts publicados: pizza server (vídeo), imagem comida (local), copo drink (vídeo local)
const _SLA = window.BOLDER_LOCAL_ASSETS || 'assets/';
const POSTS = [
  { type: "video", src: (window.BOLDER_MEDIA_URL || '') + 'PIZZA/Gen-4_5%20little%20smoke%20coming%20from%20the%20pizza%20%20Motion%20blur%2C%20surreal%2C%208K%2C%20cinematic%20586680882.mp4' },
  { type: "image", src: _SLA + "social/post-2.png" },
  { type: "video", src: _SLA + "social/post-3.mp4" },
  { type: "video", src: _SLA + "social/post-4.mp4" },
];

const cellStyle = { width: "100%", flex: 1, objectFit: "cover", borderRadius: 4, minHeight: 0, display: "block" };

function PostThumb({ index }) {
  const p = POSTS[index];
  if (!p) return null;
  if (p.type === "video") {
    return <video autoPlay muted loop playsInline src={p.src} style={cellStyle} />;
  }
  return <img src={p.src} alt={`Post ${index + 1}`} style={cellStyle} />;
}

function Social() {
  const days = ["SEG", "TER", "QUA", "QUI", "SEX", "SÁB", "DOM"];
  return (
    <Section id="social" tone="paper">
      <SectionHead
        num="07 / Módulo"
        tag={<BeTag name="Social" size="lg" />}
        title="Do asset ao post.<br/><em>Sem sair da Bolder.</em>"
        sub="Calendário editorial, copy com revisão humana, agendamento multi-rede e relatórios. Add-on premium <strong>Be Informed</strong> para insights humano-curados."
      />

      <Reveal>
        <div className="card" style={{ padding: "clamp(20px, 2.4vw, 32px)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20 }}>
            <span className="chip"><span className="dot" />Calendário · Semana 17</span>
            <span className="mono">Meta · TikTok · LinkedIn</span>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6 }}>
            {days.map((d, i) => {
              const states = ["posted", "posted", "posted", "scheduled", "draft", "empty", "empty"];
              const st = states[i];
              const isScheduled = st === "scheduled";
              return (
                <div key={i} style={{
                  aspectRatio: "1/1.3",
                  border: isScheduled ? "1px solid var(--coral)" : "1px solid var(--rule)",
                  background: st === "posted" ? "var(--cream)" : isScheduled ? "var(--coral-soft)" : "transparent",
                  borderRadius: 8,
                  padding: 10,
                  display: "flex", flexDirection: "column", justifyContent: "space-between"
                }}>
                  <span className="mono">{d}</span>
                  {(st === "posted" || isScheduled) && <PostThumb index={i} />}
                  {st === "posted" ? <span className="mono" style={{ color: "var(--ink)" }}>✓ posted</span> :
                   isScheduled ? <span className="mono mono-coral">▸ 14:00</span> :
                   st === "draft" ? <span className="mono">draft</span> : null}
                </div>
              );
            })}
          </div>

          <div style={{ marginTop: 16, padding: 14, background: "var(--cream)", border: "1px solid var(--rule)", borderRadius: 10, fontSize: 14 }}>
            <span className="mono mono-ink" style={{ display: "block", marginBottom: 6 }}>Copy · IA + revisão humana</span>
            A edição da Primavera chegou. Três modelos, uma <span className="wavy">linguagem só</span>. <span style={{ color: "var(--coral)" }}>#bolder</span>
          </div>
        </div>
      </Reveal>

    </Section>
  );
}

window.Social = Social;