// BrandReel — cinematic GIF feature block. The animated logo plays in a
// framed pane with mono terminal chrome and a manifesto caption beside it.

function BrandReel() {
  return (
    <section style={{
      padding: "120px 0",
      background: "#FAFAFA",
      borderTop: "1px solid var(--border-1)",
      borderBottom: "1px solid var(--border-1)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div className="container grid-2" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 7fr) minmax(0, 5fr)",
        gap: 64, alignItems: "center",
      }}>
        {/* Framed GIF */}
        <Reveal className="reveal-up">
          <div style={{
            position: "relative",
            border: "1px solid var(--border-1)",
            borderRadius: 12,
            background: "#FFFFFF",
            padding: 14,
            boxShadow: "0 30px 60px -30px rgba(10,10,10,0.18), 0 2px 0 rgba(10,10,10,0.02)",
          }}>
            {/* Terminal chrome bar */}
            <div style={{
              display: "flex", alignItems: "center",
              justifyContent: "space-between",
              padding: "8px 14px 12px",
              borderBottom: "1px solid var(--border-1)",
              marginBottom: 12,
            }}>
              <div style={{ display: "flex", gap: 6 }}>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#E5E5E5" }}/>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#E5E5E5" }}/>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--site-accent, var(--flame))" }}/>
              </div>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10, letterSpacing: "0.18em",
                color: "var(--fg-3)", textTransform: "uppercase",
              }}>// promefy.signature.loop</span>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10, letterSpacing: "0.18em",
                color: "var(--site-accent, var(--flame))",
              }}>● REC</span>
            </div>

            {/* GIF stage */}
            <div style={{
              position: "relative",
              background: "#FFFFFF",
              borderRadius: 6,
              overflow: "hidden",
              aspectRatio: "16 / 9",
            }}>
              <img
                src="assets/logo-anim-light.gif"
                alt="Promefy Solutions — brand reveal animation"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                  objectFit: "contain",
                  userSelect: "none",
                }}/>
              {/* Corner ticks */}
              {["tl", "tr", "bl", "br"].map((p) => {
                const sides = {
                  tl: { left: 12, top: 12, borderLeft: "1px solid var(--border-2)", borderTop: "1px solid var(--border-2)" },
                  tr: { right: 12, top: 12, borderRight: "1px solid var(--border-2)", borderTop: "1px solid var(--border-2)" },
                  bl: { left: 12, bottom: 12, borderLeft: "1px solid var(--border-2)", borderBottom: "1px solid var(--border-2)" },
                  br: { right: 12, bottom: 12, borderRight: "1px solid var(--border-2)", borderBottom: "1px solid var(--border-2)" },
                };
                return <span key={p} style={{
                  position: "absolute", width: 12, height: 12, ...sides[p],
                  pointerEvents: "none",
                }}/>;
              })}
            </div>

            {/* Metadata strip */}
            <div style={{
              display: "flex", justifyContent: "space-between",
              padding: "12px 4px 4px",
              fontFamily: "var(--font-mono)",
              fontSize: 10, letterSpacing: "0.16em",
              color: "var(--fg-3)", textTransform: "uppercase",
            }}>
              <span>50 FRAMES · 800×450</span>
              <span>BRAND_MARK · v1</span>
              <span>LOOP ∞</span>
            </div>
          </div>
        </Reveal>

        {/* Caption */}
        <Reveal className="reveal-up" delay={200} as="div"
          style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <EyebrowLabel>// THE_SIGNATURE</EyebrowLabel>
          <h3 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(32px, 3.6vw, 52px)",
            fontWeight: 500,
            lineHeight: 1.05,
            letterSpacing: "-0.025em",
            margin: 0,
            color: "var(--fg-1)",
            textWrap: "balance",
            maxWidth: "16ch",
          }}>
            A torch<AccentDot /> A mark. A promise to ship.
          </h3>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { BrandReel });