// reels.jsx — Bonus "she moves things" + closing quote + footer
const { useEffect: _rUseE, useRef: _rUseR, useState: _rUseS } = React;

const REELS = [
  { src: "assets/reels/r-lucky-1.mp4",      brand: "Lucky Tiger",   line: "Cocktail reel" },
  { src: "assets/reels/r-lucky-11.mp4",     brand: "Lucky Tiger",   line: "Late-night reel" },
  { src: "assets/reels/r-ora-hanuman.mp4",  brand: "ORA",           line: "Hanuman Jayanti" },
  { src: "assets/reels/r-02.mp4",           brand: "Studio",        line: "Reel 02" },
  { src: "assets/reels/r-08.mp4",           brand: "Studio",        line: "Reel 08" },
  // Re-use ad campaign videos here as motion crossovers
  { src: "assets/creatives/c-jumpsuit.mp4", brand: "Apparel",       line: "Black Basic Jumpsuit" },
  { src: "assets/creatives/c-striped.mp4",  brand: "Apparel",       line: "Striped Strapless Top" },
];

function Reels() {
  const laneRef = _rUseR(null);

  // Drag-to-scroll
  _rUseE(() => {
    const lane = laneRef.current;
    if (!lane) return;
    let isDown = false, startX = 0, startScroll = 0, moved = 0;
    const down = (e) => {
      isDown = true;
      startX = (e.pageX || e.touches?.[0].pageX);
      startScroll = lane.scrollLeft;
      moved = 0;
      lane.classList.add("dragging");
    };
    const move = (e) => {
      if (!isDown) return;
      const x = (e.pageX || e.touches?.[0]?.pageX);
      const dx = x - startX;
      moved = Math.max(moved, Math.abs(dx));
      lane.scrollLeft = startScroll - dx;
    };
    const up = () => { isDown = false; lane.classList.remove("dragging"); };
    // If the drag moved meaningfully, suppress the next click (so lightbox doesn't open)
    const clickGuard = (e) => {
      if (moved > 8) { e.stopPropagation(); e.preventDefault(); moved = 0; }
    };
    lane.addEventListener("mousedown", down);
    lane.addEventListener("mousemove", move);
    document.addEventListener("mouseup", up);
    lane.addEventListener("click", clickGuard, true);
    return () => {
      lane.removeEventListener("mousedown", down);
      lane.removeEventListener("mousemove", move);
      document.removeEventListener("mouseup", up);
      lane.removeEventListener("click", clickGuard, true);
    };
  }, []);

  return (
    <section className="reels-section" id="reels" data-screen-label="08 Reels">
      <div className="container">
        <div className="sec-head">
          <div className="lead">
            <div className="eyebrow reveal">Plot twist</div>
            <WordsReveal as="h2" className="reveal" delay={100}>Oh, and she moves things too.</WordsReveal>
            <p className="reveal">
              She also edits reels and dabbles in motion graphics. Treat this as
              the bonus skill, not the headline.
            </p>
          </div>
          <span className="mono reveal" style={{ color: "rgba(243,239,230,0.6)" }}>{REELS.length} reels &middot; drag →</span>
        </div>

        <div className="reels-lane reveal" ref={laneRef}>
          {REELS.map((r, i) => (
            <div className="reel-card" key={i} data-cursor="play"
                 data-lb={r.src} data-lb-type="video" data-lb-caption={`${r.brand} — ${r.line}`} data-lb-ratio="9:16">
              <video
                src={r.src}
                muted loop playsInline autoPlay preload="auto"
              />
              <div className="wave"><span></span><span></span><span></span><span></span></div>
              <div className="meta">
                <div className="t">{r.line}</div>
                <div className="c">{r.brand}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="lane-hint">↓ drag the lane · tap any reel to open</div>
      </div>
    </section>
  );
}

function Closing() {
  return (
    <section className="closing" id="contact" data-screen-label="09 Closing">
      <div className="container">
        <div className="eyebrow reveal" style={{ justifyContent: "center", display: "flex" }}>The designer</div>

        <div className="closing-portrait reveal" data-cursor="hover me">
          <OrbitText text="UDITI DAS • GRAPHIC DESIGNER • KOLKATA • " />
          <div className="portrait">
            <img className="original" src="assets/portrait/original.png" alt="Uditi Das" loading="lazy" />
            <img className="animated" src="assets/portrait/animated.png" alt="Uditi Das — animated" loading="lazy" />
          </div>
          <div className="psst">psst — hover me <span className="arrow">↘</span></div>
        </div>

        <WordsReveal as="p" className="quote-small reveal" delay={150}>
          I'd rather design something quietly excellent
        </WordsReveal>
        <WordsReveal as="p" className="quote-small reveal" delay={350}>
          than loudly <i style={{ fontStyle: "italic", color: "var(--accent)" }}>average.</i>
        </WordsReveal>

        <div className="sign reveal">— Uditi Das</div>

        <div className="closing-actions reveal">
          <Magnetic>
            <a
              className="cta-big"
              href="mailto:uditidas92@gmail.com"
              data-cursor="say hi"
            >
              Let's make something embarrassingly good →
            </a>
          </Magnetic>
          <a
            className="cta-secondary uline"
            href="https://www.linkedin.com/in/uditi-das-63b28a227/"
            target="_blank" rel="noopener noreferrer"
            data-cursor="open"
          >
            LinkedIn ↗
          </a>
        </div>
      </div>
    </section>
  );
}

function FooterBlock() {
  return (
    <footer>
      <div className="container">
        <div className="foot">
          <div>
            <p className="end reveal">
              Available for <em>fun, weird,<br/>iconic work.</em>
            </p>
          </div>
          <div>
            <h4>Reach</h4>
            <ul>
              <li><a className="uline" href="mailto:uditidas92@gmail.com" data-cursor="email">uditidas92@gmail.com</a></li>
            </ul>
          </div>
          <div>
            <h4>Elsewhere</h4>
            <ul>
              <li>
                <a className="uline"
                   href="https://www.linkedin.com/in/uditi-das-63b28a227/"
                   target="_blank" rel="noopener noreferrer"
                   data-cursor="open">LinkedIn ↗</a>
              </li>
            </ul>
          </div>
          <div>
            <h4>Index</h4>
            <ul>
              <li><a className="uline" href="#work">Branding</a></li>
              <li><a className="uline" href="#banners">Banners</a></li>
              <li><a className="uline" href="#campaigns">Creatives</a></li>
              <li><a className="uline" href="#moodboards">Moodboards</a></li>
              <li><a className="uline" href="#social">Social</a></li>
              <li><a className="uline" href="#reels">Reels</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Uditi Das — made with too much coffee.</span>
          <span>Site: cream &times; ink &times; coral</span>
        </div>
      </div>
    </footer>
  );
}

window.Reels = Reels;
window.Closing = Closing;
window.FooterBlock = FooterBlock;