// GetContent — "Live op het platform": donkere sectie na de USP's met drie
// iPhones (mini-versies van de mobiele site: opdrachtenlijst → opdrachtdetail
// → match-popup). Zodra de sectie in beeld komt spelen alle drie de telefoons
// als één gestaffelde entrance-animatie automatisch af (IntersectionObserver
// zet .lv-in; de animatie zelf is puur CSS). Geen scroll-scrub, geen
// kleurblend: één egaal donker vlak, identiek op desktop en mobiel.

function LiveShowcase() {
  const stageRef = React.useRef(null);
  const rowRef = React.useRef(null);

  React.useEffect(() => {
    const stage = stageRef.current, row = rowRef.current;
    if (!stage || !row) return;

    // waaier passend schalen op smalle schermen: de complete compositie
    // (incl. rotatie-uitloop) blijft binnen het scherm. We meten de echte
    // waaierbreedte en delen de huidige schaal eruit zodat de meting stabiel
    // blijft; --lv-rowcomp compenseert de ongeschaalde layout-hoogte zodat er
    // geen leeg gat onder de visueel gekrompen waaier ontstaat.
    const fit = () => {
      const prev = parseFloat(stage.style.getPropertyValue('--lv-ms')) || 1;
      let L = Infinity, R = -Infinity;
      row.querySelectorAll('.lv-slot').forEach((el) => {
        const r = el.getBoundingClientRect();
        L = Math.min(L, r.left); R = Math.max(R, r.right);
      });
      const layoutW = (R - L) / prev;
      const ms = Math.min(1, (window.innerWidth - 16) / layoutW);
      stage.style.setProperty('--lv-ms', ms.toFixed(4));
      stage.style.setProperty('--lv-rowcomp', (row.offsetHeight * (1 - ms)).toFixed(1) + 'px');
    };
    fit();
    window.addEventListener('resize', fit);

    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let io = null;
    if (reduce) {
      stage.classList.add('lv-in');
    } else {
      const scroller = document.querySelector('#gc-scroll');
      io = new IntersectionObserver((es) => {
        if (es.some((e) => e.isIntersecting)) {
          stage.classList.add('lv-in');
          io.disconnect(); io = null;
        }
      }, { root: scroller, threshold: 0.25 });
      io.observe(row);
    }
    return () => {
      window.removeEventListener('resize', fit);
      if (io) io.disconnect();
    };
  }, []);

  const MiniNav = () => (
    <div className="lv-mnav">
      <div className="lv-status">
        <b>9:41</b>
        <span className="lv-status-ic"><i data-lucide="signal"></i><i data-lucide="wifi"></i><i data-lucide="battery-full"></i></span>
      </div>
      <div className="lv-mbrand">
        <span className="lv-mlogo"><b>get</b>content</span>
        <span className="lv-mburger" aria-hidden><i /><i /></span>
      </div>
    </div>
  );

  const MiniJob = ({ title, meta, badge }) => (
    <div className="lv-mjob">
      <div className="lv-mjob-top">
        <span className="lv-mjob-title">{title}</span>
        <span className={'lv-mjob-badge' + (badge === 'Nieuw' ? ' is-new' : '')}>{badge}</span>
      </div>
      <span className="lv-mjob-meta">{meta}</span>
    </div>
  );

  const MiniDetail = () => (
    <div className="lv-mdetail">
      <span className="lv-mtag">UGC video</span>
      <b className="lv-mtitle">3 UGC-video’s voor onze skincare-launch</b>
      <p className="lv-mbrief">We zoeken een creator die drie korte video’s maakt voor de lancering van onze nieuwe lijn. Eigen stijl is welkom.</p>
      <div className="lv-mmeta">
        <span><i data-lucide="map-pin"></i>Amsterdam</span>
        <span><i data-lucide="wallet"></i>€400 budget</span>
        <span><i data-lucide="calendar"></i>Deadline 14 juli</span>
      </div>
      <span className="lv-mbtn">Reageer op opdracht<i data-lucide="arrow-right"></i></span>
      {/* hint dat de pagina doorloopt (skeleton-regels), zodat het scherm als
          een echte pagina leest en niet abrupt leeg eindigt */}
      <div className="lv-mmore" aria-hidden><i /><i /></div>
    </div>
  );

  // realistisch iPhone-frame: crème rail met zijknoppen, zwarte bezel,
  // statusbalk + dynamic island bovenin en home-indicator onderin
  const Phone = ({ n, children }) => (
    <figure className={'lv-slot lv-slot-' + n}>
      <div className={'lv-rise lv-rise-' + n}>
        <div className="lv-phone">
          <span className="lv-phbtn lv-phbtn-action" aria-hidden />
          <span className="lv-phbtn lv-phbtn-volup" aria-hidden />
          <span className="lv-phbtn lv-phbtn-voldn" aria-hidden />
          <span className="lv-phbtn lv-phbtn-power" aria-hidden />
          <div className="lv-bezel">
            <div className="lv-screen">
              <span className="lv-island" aria-hidden />
              {children}
              <span className="lv-homebar" aria-hidden />
            </div>
          </div>
        </div>
      </div>
    </figure>
  );

  return (
    <section ref={stageRef} className="lv-stage gc-dark-pattern" aria-label="Zo werkt GetContent, live">
      <div className="lv-inner">
        <header className="lv-head">
          <span className="gc-eyebrow">Live op het platform</span>
          <h2>Plaats je opdracht. Kies je creator.</h2>
        </header>
        <div className="lv-row" ref={rowRef}>
          <Phone n={1}>
            <MiniNav />
            <div className="lv-msub">
              <b>Open opdrachten</b>
              <span>Kies wat bij je past.</span>
            </div>
            <div className="lv-mlist">
              <MiniJob title="Aftermovie voor festival" meta="Den Haag · €750" badge="Nieuw" />
              <MiniJob title="3 UGC-video’s voor skincare-launch" meta="Amsterdam · €400" badge="Nieuw" />
              <MiniJob title="Productfoto’s voor koffielijn" meta="Rotterdam · €250" badge="Open" />
              <MiniJob title="Wekelijkse reels voor restaurant" meta="Utrecht · €400/mnd" badge="Open" />
              <MiniJob title="Lifestyle-shots voor fashion drop" meta="Amsterdam · €350" badge="Open" />
              <MiniJob title="TikTok-serie voor fitness-app" meta="Op afstand · €650" badge="Open" />
              <MiniJob title="Merkvideo voor koffiebar" meta="Eindhoven · €500" badge="Open" />
            </div>
          </Phone>
          <Phone n={2}>
            <MiniNav />
            <MiniDetail />
          </Phone>
          {/* scherm 3: opdrachtdetail gedimd + geblurd achter een prominente
              match-kaart die de gematchte creator toont (de payoff van het
              verhaal): foto, naam, discipline, rating en een directe CTA. */}
          <Phone n={3}>
            {/* de pagina-content wordt zélf geblurd (i.p.v. backdrop-filter):
                op een geroteerd, rond-geclipt scherm geeft backdrop-filter een
                gerafelde/gestippelde rand. content-blur roteert netjes mee.
                .lv-dim is een ongefilterde clip-laag met dezelfde afronding als
                het scherm, zodat de geblurde .lv-dim-blur strak binnen de ronde
                hoeken wordt geknipt (een filter-element ontsnapt anders aan de
                afgeronde overflow-clip van het scherm en steekt uit). */}
            <div className="lv-dim">
              <div className="lv-dim-blur">
                <MiniNav />
                <MiniDetail />
              </div>
            </div>
            <div className="lv-mscrim" aria-hidden />
            <div className="lv-match">
              <span className="lv-match-tag"><i data-lucide="sparkles"></i>Match gevonden</span>
              <span className="lv-match-av">
                <img src="https://i.pravatar.cc/120?img=47" alt="" />
                <span className="lv-match-verif" aria-hidden><i data-lucide="check"></i></span>
              </span>
              <b className="lv-match-name">Sanne de Vries</b>
              <span className="lv-match-role">UGC-creator · Amsterdam</span>
              <span className="lv-match-rating"><i data-lucide="star"></i>4,9 · 32 reviews</span>
              <span className="lv-match-btn">Start gesprek<i data-lucide="arrow-right"></i></span>
            </div>
          </Phone>
        </div>
      </div>
    </section>
  );
}
window.LiveShowcase = LiveShowcase;