// d1-cinematic.jsx — Direction 1: Cinematic. Black, Bebas display, full-bleed reel, amber accent.
// Exports window.D1Cinematic. Renders at 1440 wide.
(function () {
  const amber = "#e7a95c";
  const ink = "#070707";
  const panel = "#0e0e0e";
  const text = "#ececec";
  const muted = "rgba(236,236,236,.55)";
  const line = "rgba(255,255,255,.10)";
  const disp = '"Bebas Neue", sans-serif';
  const body = '"Archivo", system-ui, sans-serif';
  const mono = '"DM Mono", ui-monospace, monospace';

  const SectionLabel = ({ n, children, color = amber }) =>
  <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
      <span style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.2em", color }}>{n}</span>
      <span style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.2em", color: text, textTransform: "uppercase" }}>{children}</span>
      <span style={{ flex: 1, height: 1, background: line }} />
    </div>;


  function D1Cinematic() {
    const D = window.DATA,{ Frame, Placeholder, PlayBadge } = window;
    const wrap = { maxWidth: 1280, margin: "0 auto", padding: "0 80px", boxSizing: "border-box" };
    const [playing, setPlaying] = React.useState(false);

    return (
      <div style={{ width: 1440, background: ink, color: text, fontFamily: body }}>
        {/* NAV */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "0 64px", height: 84, borderBottom: `1px solid ${line}` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" aria-label="Dancing Shapes logo">
              {/* motion curve */}
              <path d="M3 25 C 9 25, 11 9, 17 9 S 25 25, 31 25" stroke={amber} strokeWidth="1.6" fill="none" strokeLinecap="round" opacity="0.7" />
              {/* shapes riding the curve: circle, triangle, square */}
              <circle cx="3" cy="25" r="3" fill={amber} />
              <path d="M17 5.4 L 20.2 11 L 13.8 11 Z" fill={text} />
              <rect x="28.2" y="22.2" width="5.6" height="5.6" rx="1" fill={amber} transform="rotate(12 31 25)" />
            </svg>
            <div style={{ fontFamily: disp, fontSize: 28, letterSpacing: "0.12em" }}>
              DANCING<span style={{ color: amber }}>SHAPES</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 36, alignItems: "center" }}>
            {D.nav.map((n, i) =>
            <a key={n} href={(window.UI.NAV_HREF[n]) || "index.html"} style={{ textDecoration: "none", fontFamily: mono, fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
              color: i === 0 ? text : muted, paddingBottom: 3,
              borderBottom: i === 0 ? `1.5px solid ${amber}` : "1.5px solid transparent" }}>{n}</a>
            )}
          </div>
        </div>

        {/* HERO — full-bleed reel, plays inline in place */}
        <div style={{ position: "relative", height: 720, overflow: "hidden", background: "#000" }}>
          <a href={`https://www.youtube.com/watch?v=${D.reel.id}`} onClick={(e) => { e.preventDefault(); window.playVideo(D.reel.id); }} style={{ textDecoration: "none", color: text, display: "block", position: "absolute", inset: 0, cursor: "pointer" }}>
              <Frame src={`https://img.youtube.com/vi/${D.reel.id}/maxresdefault.jpg`} label="ANIMATION DEMOREEL"
              h={720} w="100%" dark style={{ position: "absolute", inset: 0 }} />
              <div style={{ position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(7,7,7,.55) 0%, rgba(7,7,7,.15) 38%, rgba(7,7,7,.85) 100%)" }} />
              {/* center play */}
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <PlayBadge size={96} ring="rgba(255,255,255,.9)" />
              </div>
              {/* hero text */}
              <div style={{ position: "absolute", left: 64, bottom: 56, right: 64 }}>
                <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.24em", color: amber, marginBottom: 18 }}>
                ▶ WATCH THE 2026 DEMOREEL
              </div>
                <div style={{ fontFamily: disp, fontSize: 132, lineHeight: 0.88, letterSpacing: "0.005em" }}>
                TAL HERSHKOVICH
              </div>
                <div style={{ fontFamily: body, fontSize: 19, color: "rgba(236,236,236,.8)", marginTop: 14, fontWeight: 400 }}>
                  {D.tagline}
                </div>
              </div>
              <div style={{ position: "absolute", top: 26, right: 64, fontFamily: mono, fontSize: 11,
              letterSpacing: "0.2em", color: muted }}>REEL · 02:14</div>
            </a>

        </div>

        {/* BIO strip */}
        <div style={{ borderBottom: `1px solid ${line}` }}>
          <div style={{ ...wrap, padding: "80px 80px", textAlign: "center" }}>
            <div style={{ fontFamily: body, fontSize: 34, lineHeight: 1.45, fontWeight: 400, maxWidth: 1000, margin: "0 auto", textWrap: "balance" }}>
              {D.bio}
            </div>
          </div>
        </div>

        {/* ADDONS — lead feature */}
        <div style={{ background: panel, borderTop: `1px solid ${line}`, borderBottom: `1px solid ${line}` }}>
          <div style={{ ...wrap, padding: "80px 80px" }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 14 }}>
              <span style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.2em", color: amber }}>01</span>
              <span style={{ fontFamily: disp, fontSize: 56, lineHeight: 1, letterSpacing: "0.02em", whiteSpace: "nowrap" }}>BLENDER ADDONS</span>
            </div>
            <div style={{ fontFamily: mono, letterSpacing: "0.22em", color: amber, textTransform: "uppercase", marginBottom: 40, fontSize: "20px" }}>
              Animation &amp; Rigging Development
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
              {D.addons.map((a) =>
              <a key={a.name} href={a.href} target="_blank" rel="noopener" style={{ textDecoration: "none", color: text, background: ink, border: `1px solid ${line}`, display: "flex", flexDirection: "column" }}>
                  <Frame src={a.thumb} label={a.name.toUpperCase()} h={300} dark />
                  <div style={{ padding: 28, display: "flex", flexDirection: "column", flex: 1 }}>
                    <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "0.18em", color: amber, marginBottom: 10 }}>
                      {a.tag.toUpperCase()}
                    </div>
                    <div style={{ fontFamily: disp, fontSize: 44, lineHeight: 0.95 }}>{a.name}</div>
                    <div style={{ fontFamily: body, fontSize: 15, color: muted, marginTop: 12, lineHeight: 1.55, textWrap: "pretty" }}>{a.blurb}</div>
                    <div style={{ flex: 1 }} />
                    <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: "0.14em", color: text, marginTop: 24,
                    display: "inline-flex", alignItems: "center", gap: 8, borderBottom: `1.5px solid ${amber}`, paddingBottom: 3, alignSelf: "flex-start" }}>
                      VIEW ON SUPERHIVE →
                    </div>
                  </div>
                </a>
              )}
            </div>

            {/* GIF gallery — addons in action */}
            <div style={{ marginTop: 24, background: ink, border: `1px solid ${line}`, padding: 28 }}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 18 }}>
                <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.18em", color: amber, textTransform: "uppercase" }}>
                  Tools in action
                </div>
                <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: "0.12em", color: muted, textTransform: "uppercase" }}>
                  Mostly AnimToolbox
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
                {D.addonGifs.map((g, i) =>
                <div key={i}>
                    <Frame src={g.src} label={g.label} h={150} dark radius={2} style={{ border: `1px solid ${line}` }} />
                    <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "0.12em", color: muted, marginTop: 8, textTransform: "uppercase" }}>{g.label}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        <window.UI.ContactBand />
        <window.UI.Footer />
      </div>);

  }
  window.D1Cinematic = D1Cinematic;
})();