// d1-mobile.jsx — Cinematic homepage, mobile format (~390 wide).
// Addon GIFs become a swipeable snap-scroll gallery instead of a cramped 4-up grid.
// Exports window.D1Mobile.
(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 W = 390;

  function D1Mobile() {
    const D = window.DATA, { Frame, PlayBadge } = window;
    const [playing, setPlaying] = React.useState(false);

    return (
      <div style={{ width: W, background: ink, color: text, fontFamily: body, overflow: "hidden" }}>
        <window.UI.NavMobile active="Reel" />

        {/* HERO — plays inline in place */}
        <div style={{ position: "relative", height: 540, 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="DEMOREEL"
              h={540} w="100%" dark style={{ position: "absolute", inset: 0 }} />
              <div style={{ position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(7,7,7,.5) 0%, rgba(7,7,7,.1) 36%, rgba(7,7,7,.9) 100%)" }} />
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <PlayBadge size={72} ring="rgba(255,255,255,.9)" />
              </div>
              <div style={{ position: "absolute", left: 20, right: 20, bottom: 36 }}>
                <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "0.2em", color: amber, marginBottom: 12 }}>
                ▶ WATCH THE 2026 DEMOREEL
              </div>
                <div style={{ fontFamily: disp, fontSize: 52, lineHeight: 0.9, letterSpacing: "0.01em" }}>
                TAL<br />HERSHKOVICH
              </div>
                <div style={{ fontFamily: body, fontSize: 14, color: "rgba(236,236,236,.8)", marginTop: 10 }}>
                  {D.tagline}
                </div>
              </div>
            </a>

        </div>

        {/* BIO */}
        <div style={{ borderBottom: `1px solid ${line}`, padding: "40px 24px", textAlign: "center" }}>
          <div style={{ fontFamily: body, fontSize: 19, lineHeight: 1.5, fontWeight: 400, textWrap: "pretty" }}>
            {D.bio}
          </div>
        </div>

        {/* ADDONS */}
        <div style={{ background: panel, borderBottom: `1px solid ${line}`, padding: "44px 0" }}>
          <div style={{ padding: "0 24px" }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 8 }}>
              <span style={{ fontFamily: mono, fontSize: 11, letterSpacing: "0.2em", color: amber }}>01</span>
              <span style={{ fontFamily: disp, fontSize: 40, lineHeight: 1, letterSpacing: "0.02em" }}>BLENDER ADDONS</span>
            </div>
            <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.18em", color: amber, textTransform: "uppercase", marginBottom: 28 }}>
              Animation &amp; Rigging Development
            </div>
            {/* stacked cards */}
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              {D.addons.map((a) => (
                <div key={a.name} style={{ background: ink, border: `1px solid ${line}` }}>
                  <Frame src={a.thumb} label={a.name.toUpperCase()} h={200} dark />
                  <div style={{ padding: 20 }}>
                    <div style={{ fontFamily: mono, fontSize: 9, letterSpacing: "0.18em", color: amber, marginBottom: 8 }}>
                      {a.tag.toUpperCase()}
                    </div>
                    <div style={{ fontFamily: disp, fontSize: 34, lineHeight: 0.95 }}>{a.name}</div>
                    <div style={{ fontFamily: body, fontSize: 13.5, color: muted, marginTop: 10, lineHeight: 1.5, textWrap: "pretty" }}>{a.blurb}</div>
                    <div style={{ fontFamily: mono, fontSize: 10.5, letterSpacing: "0.14em", color: text, marginTop: 16,
                      display: "inline-flex", alignItems: "center", gap: 8, borderBottom: `1.5px solid ${amber}`, paddingBottom: 3 }}>
                      VIEW ON SUPERHIVE →
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* GIF gallery — swipeable carousel */}
          <div style={{ marginTop: 28 }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "0 24px", marginBottom: 14 }}>
              <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: "0.18em", color: amber, textTransform: "uppercase" }}>Tools in action</div>
              <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "0.12em", color: muted, textTransform: "uppercase" }}>Swipe →</div>
            </div>
            <div style={{ display: "flex", gap: 12, overflowX: "auto", padding: "0 24px 4px",
              scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}>
              {D.addonGifs.map((g, i) => (
                <div key={i} style={{ flex: "0 0 300px", scrollSnapAlign: "center" }}>
                  <Frame src={g.src} label={g.label} h={188} w={300} dark radius={3} 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>
            {/* dots */}
            <div style={{ display: "flex", gap: 7, justifyContent: "center", marginTop: 14 }}>
              {D.addonGifs.map((g, i) => (
                <span key={i} style={{ width: i === 0 ? 18 : 6, height: 6, borderRadius: 3,
                  background: i === 0 ? amber : "rgba(236,236,236,.25)" }} />
              ))}
            </div>
          </div>
        </div>

        <window.UI.ContactBand mobile />
        <window.UI.Footer mobile />
      </div>
    );
  }
  window.D1Mobile = D1Mobile;
})();