/* global React */

const _LA        = window.BOLDER_LOCAL_ASSETS || 'assets/';
const IMAGES_SRC = _LA + 'filmes/imagem.png';
const VIDEO_SRC  = _LA + 'filmes/video.mp4';
const FILM_SRC   = (window.BOLDER_MEDIA_URL || '') + 'videos/RM%20AD.mp4';
const SOCIAL_SRC = _LA + 'filmes/758414721b6c89be03ec8b985515a2ae.jpg';

function CardMedia({ kind, featured }) {
  const style = { width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: 8, display: "block" };

  if (kind === "FILM") {
    return (
      <video autoPlay muted loop playsInline style={style} src={FILM_SRC} />
    );
  }
  if (kind === "SOCIAL") {
    return <img src={SOCIAL_SRC} alt="Be Social — plataforma" style={style} />;
  }
  if (kind === "IMAGES") {
    return <img src={IMAGES_SRC} alt="Be Visual — imagens" style={style} />;
  }
  if (kind === "VIDEO") {
    return <video autoPlay muted loop playsInline style={style} src={VIDEO_SRC} />;
  }
  return <Img label={`${kind}_0${kind === "IMAGES" ? 1 : 2}`} ratio="4/3" />;
}

function Deliverables() {
  const pillars = [
    { tag: "01", kind: "IMAGES", title: "Imagens com a <span class='wavy'>alma</span> da sua marca.", bullet: ["Still-life de produto", "Editorial de campanha", "Lookbooks", "Variações A/B"], meta: "Be Visual · 1 token / imagem" },
    { tag: "02", kind: "VIDEO",  title: "Vídeo curto. Para ads e social.",  bullet: ["Reels & TikToks", "Ads verticais", "Loops & GIFs", "Até 30 segundos"], meta: "Be Visual · 5 a 15 tokens" },
    { tag: "03", kind: "FILM",   title: "Filmes publicitários completos.",  bullet: ["Briefing & conceito", "Storyboard", "Produção AI/híbrida/tradicional", "Pós-produção"], meta: "Be Cinematic · sob consulta", featured: true },
    { tag: "04", kind: "SOCIAL", title: "Conteúdo agendado e medido.",      bullet: ["Calendário editorial", "Copy + revisão humana", "Multi-rede", "Insights mensais"], meta: "Be Social · 250€/mês" }
  ];

  return (
    <Section id="deliverables" tone="ink">
      <SectionHead
        num="02 / Entrega"
        title="Quatro frentes. <em>Um motor.</em>"
        sub="Tudo o que a sua marca precisa para escalar presença visual, comandado pela mesma equipa, com o mesmo Blueprint."
      />

      <div className="grid-4">
        {pillars.map((p, i) => (
          <Reveal key={i} as="article" delay={i + 1} className={`card ${p.featured ? "card--cream" : ""}`} style={{
            display: "flex", flexDirection: "column", gap: 16, minHeight: 460,
            background: p.featured ? "var(--cream)" : "transparent",
            color: p.featured ? "var(--ink)" : "inherit",
            border: p.featured ? "1px solid var(--coral)" : "1px solid var(--rule)"
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span className="mono" style={{ color: p.featured ? "var(--coral)" : "var(--muted)" }}>
                {p.tag} {p.featured ? "★" : ""}
              </span>
              <span className="mono" style={{ color: p.featured ? "var(--ink)" : "var(--ink)" }}>{p.kind}</span>
            </div>

            <CardMedia kind={p.kind} featured={p.featured} />

            <h3 className="display" style={{ fontSize: 24, margin: 0, letterSpacing: "-0.02em", color: p.featured ? "var(--ink)" : "inherit" }}
                dangerouslySetInnerHTML={{ __html: p.title }} />

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6, fontSize: 13.5, color: p.featured ? "var(--muted)" : "var(--ink-soft)", borderTop: "1px solid var(--rule)", paddingTop: 14 }}>
              {p.bullet.map((b, j) => (
                <li key={j} style={{ display: "flex", gap: 10 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--coral)" }}>→</span>{b}
                </li>
              ))}
            </ul>

            <div style={{ marginTop: "auto", paddingTop: 14, borderTop: "1px solid var(--rule)" }}>
              <span className="mono" style={{ color: p.featured ? "var(--coral)" : "var(--ink)" }}>{p.meta}</span>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

window.Deliverables = Deliverables;