// Blast Events — Portfolio page
const { useEffect, useState, useRef } = React;
const { TR, Nav, MobileMenu, Footer,
  useCursor, useReveal, useNavScroll } = window;

// ============ Page Hero ============
function PortfolioHero() {
  return (
    <section className="page-hero wrap" id="top">
      <div className="ph-top">
        <div className="mono">(LAVORI) · PORTFOLIO</div>
        <div className="mono">BL · BELLUNO · IT</div>
        <div className="mono">EST. 2019</div>
      </div>

      <div className="ph-lockup reveal has-title">
        <h1 className="ph-h1">
          <TR>Lavori</TR>
          <TR>recenti<span className="acc">.</span></TR>
        </h1>
        <p className="ph-sub">
          Una selezione di eventi, palchi e produzioni curati dal team. Galleria in continuo aggiornamento.
        </p>
      </div>

      <div className="ph-bottom">
        <div className="scroll"><span className="arr" /><span>scroll · gallery</span></div>
        <div></div>
        <div></div>
      </div>
    </section>);

}

// ============ Featured video band ============
function VideoBand() {
  const videoRef = useRef(null);
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const lock = () => {v.muted = true;v.volume = 0;v.setAttribute('muted', '');};
    lock();
    v.addEventListener('volumechange', lock);
    v.play().catch(() => {});
    return () => v.removeEventListener('volumechange', lock);
  }, []);

  return (
    <section className="wrap" style={{ paddingTop: 80, paddingBottom: 0 }}>
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(01) Showreel</div>
          <h2>
            <TR>Reel</TR>
            <TR>2024 / 2025.</TR>
          </h2>
        </div>
      </div>

      <div className="pf-hero-video reveal">
        <video
          ref={videoRef}
          poster="assets/hero-mobile-poster.jpg"
          autoPlay muted loop playsInline
          preload="metadata"
          controls={false}
          aria-hidden="true">
          <source src="assets/hero-mobile.mp4" type="video/mp4" />
        </video>

        <div className="vmeta">
          <span className="live">SHOWREEL · 2024 / 2025</span>
          <span>BLAST EVENTS · BL</span>
        </div>
      </div>
    </section>);

}

// ============ Gallery ============
const GALLERY = [
{ id: 'event-04', size: 's-8', alt: 'Concerto live a Belluno con regia luci Blast Events' },
{ id: 'event-02', size: 's-4', alt: 'Festival con palco e service audio luci Blast Events' },
{ id: 'event-01', size: 's-4', alt: 'Stage design ed effetti luce a un evento Blast Events' },
{ id: 'event-03', size: 's-4', alt: 'Light design con fasci luminosi a un evento in Veneto' },
{ id: 'event-06', size: 's-6', alt: 'Atmosfera di un evento prodotto da Blast Events' },
{ id: 'event-05', size: 's-6', alt: 'Palco illuminato con fumo e luci a un live Blast Events' },
{ id: 'event-07', size: 's-4', alt: 'Truss e americane montate per un evento a Belluno' },
{ id: 'event-08', size: 's-4', alt: 'Pubblico e luci a un evento Blast Events' },
{ id: 'event-09', size: 's-4', alt: 'Spettacolo dal vivo con impianto luci professionale' },
{ id: 'event-10', size: 's-4', alt: 'Palco e crowd a un evento serale Blast Events' },
{ id: 'event-11', size: 's-4', alt: 'Effetti luce simmetrici a un live in provincia di Belluno' },
{ id: 'event-12', size: 's-4', alt: 'Schermo LED e contenuti video a un evento Blast Events' }];


function Gallery({ onOpen }) {
  const realCount = GALLERY.filter((g) => !g.empty).length;
  return (
    <section id="gallery" className="pf-page wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(02) Galleria</div>
          <h2>
            <TR>Foto</TR>
            <TR>dagli eventi.</TR>
          </h2>
        </div>
      </div>

      <div className="gallery">
        {GALLERY.map((g, i) =>
        g.empty ?
        <div key={g.id} className={`g-item empty ${g.size} reveal`}>
              <div className="lbl">// foto<br />in arrivo</div>
            </div> :

        <div
          key={g.id}
          className={`g-item ${g.size} reveal`}
          onClick={() => onOpen(`assets/${g.id}.webp`)}>

              <picture>
                <source srcSet={`assets/${g.id}-thumb.webp`} type="image/webp" />
                <img src={`assets/${g.id}-thumb.jpg`} alt={g.alt || ''} loading="lazy" decoding="async" />
              </picture>
              <div className="corner">[{String(i + 1).padStart(2, '0')}]</div>
            </div>

        )}
      </div>
    </section>);

}

// ============ Lightbox ============
function Lightbox({ src, onClose }) {
  useEffect(() => {
    const k = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [onClose]);
  return (
    <div className={`lightbox ${src ? 'open' : ''}`} onClick={onClose}>
      <button className="close" onClick={onClose} aria-label="Chiudi">×</button>
      {src && <img src={src} alt="" onClick={(e) => e.stopPropagation()} />}
    </div>);

}

// ============ CTA ============
function CTA() {
  return (
    <section id="cta" className="about-cta wrap reveal has-title">
      <div className="section-kicker">(03) Prossimo evento</div>
      <h2 className="bigword">
        <TR>Il prossimo</TR>
        <TR>è il tuo<span className="acc">.</span></TR>
      </h2>
      <div className="actions">
        <a className="btn primary" href="contatti.html">
          <span className="dot" /> Parlaci del progetto
        </a>
        <a className="btn" href="servizi.html">Vedi i servizi</a>
      </div>
    </section>);

}

// ============ Root ============
function PortfolioApp({ tweaks }) {
  useCursor();
  useReveal();
  useNavScroll();
  const [menu, setMenu] = useState(false);
  const [lightbox, setLightbox] = useState(null);

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--accent', tweaks.accent);
    r.setProperty('--display', tweaks.display);
    r.setProperty('--density', tweaks.density);
    if (tweaks.theme === 'light') {
      r.setProperty('--bg', '#f4f1ea');r.setProperty('--bg-2', '#ebe7dd');
      r.setProperty('--fg', '#0a0a0a');r.setProperty('--fg-dim', '#666');
      r.setProperty('--line', '#dcd6c8');r.setProperty('--line-2', '#c8c1b0');
      r.setProperty('--accent-ink', '#f4f1ea');
    } else {
      r.setProperty('--bg', '#000');r.setProperty('--bg-2', '#0a0a0a');
      r.setProperty('--fg', '#ffffff');r.setProperty('--fg-dim', '#8a8a8a');
      r.setProperty('--line', '#1a1a1a');r.setProperty('--line-2', '#2a2a2a');
      r.setProperty('--accent-ink', '#000');
    }
  }, [tweaks]);

  return (
    <>
      <Nav onMenu={() => setMenu(true)} />
      <MobileMenu open={menu} onClose={() => setMenu(false)} />
      <PortfolioHero />
      <VideoBand />
      <Gallery onOpen={setLightbox} />
      <CTA />
      <Footer />
      <Lightbox src={lightbox} onClose={() => setLightbox(null)} />
    </>);

}

window.PortfolioApp = PortfolioApp;