/* global React */
(function(){
const { useState, useEffect } = React;
const SHOWS = window.ARK_SHOWS, STATS = window.ARK_STATS, SOCIAL = window.ARK_SOCIAL;
const { Diamond, SiteNav, Footer, Curtain, SummerBreak } = window;
// SiteNav je sticky i koristi se iz Homepage

/* ---------- HERO: prava slika loga ---------- */
function Hero(){
  return (
    <section className="hero-logo">
      <div className="wrap hero-logo-wrap">
        <img className="hero-kapa" src="logo/logo_kapa.png" alt="" />
        <img className="hero-tekst" src="logo/logo_tekst.png" alt="Arlekin Comedy" />
        <div className="hero-desc">
          <p>Putujuće kazalište koje donosi najbolje komedije i stand-up nastupe.</p>
          <p>Arlekin okuplja vrhunske izvođače i hit predstave te organizira nezaboravne večeri ispunjene smijehom.</p>
          <p className="hero-soon">Uskoro u vašem gradu!</p>
        </div>
        <div className="hero-cta">
          <a className="btn solid" href="repertoar.html">Mjesečni repertoar</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Sljedeće izvedbe → ljetna pauza (bez slika) ---------- */
function NextSection(){
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Sljedeće izvedbe</span>
          <h2 className="section-title">Pauza za hladnjak <em>&amp; ležaljku</em></h2>
        </div>
        <SummerBreak noImages />
      </div>
    </section>
  );
}

/* ---------- Repertoar — rotirajuće slike ---------- */
function RotatingCard({ pool, start }){
  const [i,setI] = useState(start % pool.length);
  useEffect(()=>{
    const t = setInterval(()=>{
      setI(prev=>{
        let next;
        do { next = Math.floor(Math.random()*pool.length); } while(next===prev);
        return next;
      });
    }, 3200 + (start*350)%1500);
    return ()=>clearInterval(t);
  },[pool.length, start]);
  const s = pool[i];
  return (
    <a className="rep" href={"predstava.html?id="+s.id} key={s.id}>
      <img src={s.poster} alt={s.name} />
      <div className="ov">
        <span className="tag">{s.tag}</span>
        <span className="name">{s.name}</span>
        <span className="line">{s.performer}</span>
      </div>
    </a>
  );
}

function Repertoar(){
  return (
    <section className="section tint" id="izdvojeno">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Izdvojeno iz našeg programa</span>
          <h2 className="section-title">Predstave i komičari koji su obilježili naše večeri.</h2>
          <p className="sec-sub">Pogledajte izbor naših najuspješnijih komedija i stand-up nastupa.</p>
        </div>
        <div className="rep-grid">
          {[0,1,2,3,4,5].map(k=>(
            <RotatingCard key={k} pool={SHOWS} start={k*3} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Brojke ---------- */
function Brojke(){
  return (
    <section className="brojke">
      <div className="wrap">
        <div className="sec-head">
          <h2 className="section-title gold" style={{color:"var(--gold-2)"}}>Arlekin u brojkama</h2>
          <p className="serif-italic" style={{textAlign:"center",color:"rgba(255,255,255,.7)",fontSize:20}}>sezona 2026.</p>
        </div>
        <div className="row">
          {STATS.map(s=>(
            <div className="stat" key={s.lab}>
              <Diamond style={{display:"block"}} />
              <div className="num">{s.num}{s.sup && <sup>{s.sup}</sup>}</div>
              <div className="lab">{s.lab}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Novosti i najave — Uskoro ---------- */
function Novosti(){
  return (
    <section className="section" id="novosti">
      <div className="wrap">
        <div className="sec-head">
          <span className="kicker">Arlekin comedy</span>
          <h2 className="section-title">Novosti i najave</h2>
        </div>
        <div className="soon">
          <Diamond />
          <h3>Pripremamo jesensku sezonu</h3>
          <p>Nove predstave, datumi turneja i ekskluzivne najave stižu uskoro.</p>
        </div>
      </div>
    </section>
  );
}

function Homepage(){
  return (
    <div className="ark">
      <Curtain />
      <SiteNav active="home" />
      <Hero />
      <NextSection />
      <Repertoar />
      <Brojke />
      <Novosti />
      <Footer />
    </div>
  );
}

window.Homepage = Homepage;
})();