// Who We Are — horizontal video block placed right after hero/marquee

const WhoWeAre = () => {
  const VIDEO_FILE = "who-we-are.mp4";   // drop file at: video/who-we-are.mp4
  const POSTER_FILE = "who-we-are.jpg";  // optional poster: video/who-we-are.jpg

  return (
    <section id="about-video" style={{
      padding: "60px 32px 120px",
      borderBottom: "1px solid var(--line)",
      background: "var(--bg)"
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", gap: 40, flexWrap: "wrap", marginBottom: 48
        }}>
          <div>
            <div className="mono" style={{
              display: "flex", alignItems: "center", gap: 14,
              fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--flame)", marginBottom: 24
            }}>
              <span style={{ color: "var(--ink-faint)" }}>00</span>
              <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
              Who we are
            </div>
            <h2 style={{
              fontSize: "clamp(40px, 5.5vw, 76px)", lineHeight: 0.95,
              letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "18ch"
            }}>
              Meet the team behind<br/>
              <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--ink-dim)" }}>
                Firebrand Media.
              </span>
            </h2>
          </div>
          <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 380, lineHeight: 1.55 }}>
            A 90-second look at how we work — and why we only build for land clearing operators.
          </p>
        </div>

        <VideoFrame file={VIDEO_FILE} poster={POSTER_FILE}/>
      </div>
    </section>
  );
};

const VideoFrame = ({ file, poster }) => {
  const [status, setStatus] = React.useState("idle"); // idle | playing | error
  const ref = React.useRef(null);
  const src = `video/${file}`;
  const posterSrc = `video/${poster}`;

  return (
    <div style={{
      position: "relative",
      aspectRatio: "16 / 9",
      width: "100%",
      background: "#000",
      border: "1px solid var(--line)",
      overflow: "hidden"
    }}>
      <video
        ref={ref}
        src={src}
        poster={posterSrc}
        controls
        playsInline
        preload="metadata"
        onPlay={() => setStatus("playing")}
        onError={() => setStatus("error")}
        style={{
          width: "100%", height: "100%", display: "block",
          objectFit: "contain", background: "#000"
        }}
      />
      {status === "error" && (
        <div style={{
          position: "absolute", inset: 0,
          background: "repeating-linear-gradient(135deg, #1a140e 0 2px, #221810 2px 22px)",
          display: "flex", alignItems: "center", justifyContent: "center"
        }}>
          <div style={{
            border: "1px dashed var(--ink-faint)",
            padding: "32px 40px",
            display: "flex", flexDirection: "column",
            alignItems: "center", gap: 10, maxWidth: "80%"
          }}>
            <div className="mono" style={{
              fontSize: 11, color: "var(--flame)",
              letterSpacing: "0.2em", textTransform: "uppercase"
            }}>
              ▶  Video slot
            </div>
            <div style={{ fontSize: 15, color: "var(--ink)", textAlign: "center" }}>
              Drop a 16:9 horizontal video at{" "}
              <span className="mono" style={{ color: "var(--flame)" }}>video/{file}</span>
            </div>
            <div className="mono" style={{
              fontSize: 10, color: "var(--ink-faint)",
              letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4
            }}>
              MP4 (H.264) recommended · optional poster: video/{poster}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.WhoWeAre = WhoWeAre;