/* ============================================================
   ARLEKIN — shared data + components
   ============================================================ */
/* global React */
(function(){
const { useState, useEffect } = React;

/* ----------------------------- ASSETS ----------------------------- */
const LOGO_KAPA = "logo/logo_kapa.png";
const LOGO_TEKST = "logo/logo_tekst.png";
// Aliasi za zatečene reference
const LOGO = LOGO_TEKST;
const LOGO_LIGHT = LOGO_KAPA;

/* ----------------------------- SOCIAL ----------------------------- */
const SOCIAL = {
  instagram: "https://www.instagram.com/arlekin.hr/",
  facebook:  "https://www.facebook.com/arlekin.comedy",
  tickets:   "https://www.adriaticket.com/",
};

/* ----------------------------- NAV ----------------------------- */
const NAV = [
  { label:"Naslovna",                   href:"index.html",              key:"home" },
  { label:"O nama",                     href:"o-nama.html",             key:"onama" },
  { label:"Mjesečni repertoar",         href:"repertoar.html",          key:"repertoar" },
  { label:"Izdvojeno iz našeg programa",href:"index.html#izdvojeno",    key:"izdvojeno" },
  { label:"Novosti i najave",           href:"index.html#novosti",      key:"novosti" },
  { label:"Kontakt",                    href:"#footer",                 key:"kontakt" },
];

/* ----------------------------- SHOWS ----------------------------- */
const POSTER = name => "predstave/" + encodeURIComponent(name) + ".jpg";

const SHOWS = [
  { id:"bloger-krule", name:"Bloger Krule", tag:"Stand-up", type:"standup",
    performer:"Stjepan Perić", poster:POSTER("bloger krule"),
    dur:"60 min", price:15,
    short:"Najtraženiji stand-up nastup u Arlekinovoj ponudi — rasprodane dvorane od Lopara do Čepina.",
    blurb:"Stjepan Perić, poznatiji kao Bloger Krule, donosi urnebesni pogled na svakodnevicu, društvene mreže i život malograđanina.",
    dates:[] },
  { id:"ricard-on-tour", name:"Ričard on tour", tag:"Stand-up komedija", type:"standup",
    performer:"Turneja po Jadranu", poster:POSTER("ricard on tour"),
    dur:"75 min", price:18,
    short:"Komedija koja putuje uz more — ljeto puno smijeha.",
    blurb:"Ričard kreće na turneju po jadranskoj obali. Ljetne pozornice, topla večer i nezaustavljiv smijeh.",
    dates:[] },
  { id:"ja-trudnica", name:"Ja, trudnica", tag:"Komedija", type:"komedija",
    performer:"Ana Begić Tahiri & Jan Kerekeš", poster:POSTER("ja trudnica"),
    dur:"95 min", price:20,
    short:"Topla i duhovita predstava o najljepšem (i najluđem) razdoblju života.",
    blurb:"Komedija o trudnoći kakvu nitko ne priča naglas — strahovi, hormoni, savjeti okoline i bezuvjetna ljubav.",
    dates:[] },
  { id:"parazitska-posla", name:"Parazitska posla", tag:"Komedija · turneja", type:"komedija",
    performer:"Dalmatinska turneja", poster:POSTER("parazitska posla"),
    dur:"90 min", price:17,
    short:"Urnebesna komedija koja obilazi dalmatinske gradove.",
    blurb:"Spletke, prijevare i likovi kakve svi poznajemo — Parazitska posla je komedija koja je nasmijala cijelu Dalmaciju.",
    dates:[] },
  { id:"zeljko-pervan", name:"Željko Pervan", tag:"Stand-up", type:"standup",
    performer:"Večer humora", poster:POSTER("pervan"),
    dur:"80 min", price:19,
    short:"Legenda hrvatske komedije uživo — večer zajamčenog smijeha.",
    blurb:"Željko Pervan — ime koje ne treba poseban uvod. Najbolji skečevi, nove priče i prepoznatljiv humor.",
    dates:[] },
  { id:"vlatko-stampar", name:"Vlatko Štampar", tag:"Stand-up", type:"standup",
    performer:"Vrlo dovoljan", poster:POSTER("stampar"),
    dur:"70 min", price:16,
    short:"„Vrlo dovoljan” — stand-up special pun samoironije i oštrog humora.",
    blurb:"Vlatko Štampar u svom prepoznatljivom stilu secira svakodnevicu, odnose i vlastite mane.",
    dates:[] },
  { id:"ako-sam-zena", name:"Ako sam žena nisam konj", tag:"Komedija", type:"komedija",
    performer:"Ženska komedija s mužjacima u publici", poster:POSTER("ako sam zena nisam konj"),
    dur:"85 min", price:18,
    short:"Beskompromisna ženska perspektiva na muški svijet — bez dlake na jeziku.",
    blurb:"Komedija o tome što sve žena nije dužna trpjeti — duhovito, oštro i istinito.",
    dates:[] },
  { id:"prekid-preko-veze", name:"Prekid preko veze", tag:"Komedija", type:"komedija",
    performer:"Ljubavni roller-coaster", poster:POSTER("prekid preko veze"),
    dur:"90 min", price:17,
    short:"Kad veza puca preko telefona — apsurd, drama i mnogo smijeha.",
    blurb:"Suvremena komedija o tome kako moderne tehnologije unište i ono malo iskrenosti u vezi.",
    dates:[] },
  { id:"ocat-i-sin", name:"Ocat i sin", tag:"Komedija", type:"komedija",
    performer:"Generacijski sudar", poster:POSTER("ocat i sin"),
    dur:"95 min", price:18,
    short:"Otac i sin pod jednim krovom — recept za eksploziju smijeha.",
    blurb:"Dvije generacije, jedan stan i tisuću razloga za svađu. Topla, duhovita predstava o obitelji.",
    dates:[] },
  { id:"kamo-ide", name:"Kamo ide ovaj svijet", tag:"Stand-up", type:"standup",
    performer:"Komentar svakodnevice", poster:POSTER("kamo ide ovai svijet"),
    dur:"75 min", price:16,
    short:"Pitanje koje svi postavljamo — sada s odgovorima (i smijehom).",
    blurb:"Stand-up koji secira sve što nas izluđuje u 21. stoljeću — od redova u dućanu do umjetne inteligencije.",
    dates:[] },
  { id:"brodolomke", name:"Brodolomke", tag:"Komedija", type:"komedija",
    performer:"Žene koje znaju plivati", poster:POSTER("brodolomke"),
    dur:"100 min", price:19,
    short:"Tri žene, jedan brod i more (ne)razumijevanja.",
    blurb:"Ženska komedija o prijateljstvu, životnim brodolomima i tome kako ostati na površini sa stilom.",
    dates:[] },
  { id:"gola-u-kavezu", name:"Gola u kavezu", tag:"Komedija", type:"komedija",
    performer:"Provokacija s osmijehom", poster:POSTER("gola u kavezu"),
    dur:"85 min", price:18,
    short:"Smiona predstava koja ruši tabue — i podiže publiku na noge.",
    blurb:"Hrabra i duhovita drama-komedija o slobodi, tijelu i očekivanjima društva.",
    dates:[] },
  { id:"vlajland", name:"Vlajland Cabaret", tag:"Glazbeno-scenski cabaret", type:"komedija",
    performer:"Slavonska razuzdanost", poster:POSTER("vlajland cabaret"),
    dur:"105 min", price:20,
    short:"Slavonija kakvu još niste vidjeli — pjesma, šala i lokalna duša.",
    blurb:"Glazbeno-scenski cabaret koji slavi slavonsku kulturu kroz duhovite priče i nezaboravne melodije.",
    dates:[] },
  { id:"rulet", name:"Rulet", tag:"Komedija", type:"komedija",
    performer:"Igra slučaja", poster:POSTER("rulet"),
    dur:"90 min", price:18,
    short:"Život je rulet — a ova predstava dobitni broj večeri.",
    blurb:"Brza, dinamična komedija o sudbinama koje se vrte oko jednog stola — i nizu nepredvidivih obrata.",
    dates:[] },
];

function showById(id){ return SHOWS.find(s=>s.id===id); }

const STATS = [
  { num:"15", lab:"Predstava u ponudi" },
  { num:"9",  lab:"Stand-up komičara" },
  { num:"120", sup:"+", lab:"Izvedbi godišnje" },
  { num:"34", lab:"Grada diljem Hrvatske" },
];

/* ----------------------------- ATOMS ----------------------------- */
function Diamond({ red, style, className }){ return <span className={"diamond"+(red?" red":"")+(className?" "+className:"")} style={style} /> }

/* Curtain — kazališna zavjesa pri učitavanju stranice */
function Curtain(){
  const [open,setOpen]   = useState(false);
  const [gone,setGone]   = useState(false);
  useEffect(()=>{
    const t1 = setTimeout(()=>setOpen(true), 280);
    const t2 = setTimeout(()=>setGone(true), 2400);
    return ()=>{ clearTimeout(t1); clearTimeout(t2); };
  },[]);
  if(gone) return null;
  return (
    <div className={"curtain-stage"+(open?" curtain-open":"")} aria-hidden="true">
      <div className="curtain-valance" />
      <div className="curtain-side left"><div className="curtain-fold"></div></div>
      <div className="curtain-side right"><div className="curtain-fold"></div></div>
    </div>
  );
}

/* Site nav — hamburger always present (sticky top) */
function SiteNav({ active }){
  const [open,setOpen] = useState(false);
  const close = ()=>setOpen(false);
  // zatvori meni kad korisnik klikne na anchor link unutar iste stranice
  return (
    <nav className="nav">
      <span className="nav-spacer" aria-hidden="true"></span>
      <button className={"nav-burger"+(open?" x":"")} aria-label="Izbornik" aria-expanded={open} onClick={()=>setOpen(o=>!o)}>
        <span></span><span></span><span></span>
      </button>
      <div className={"nav-menu"+(open?" open":"")} onClick={(e)=>{ if(e.target.tagName==="A") close(); }}>
        {NAV.map(n=>(
          <a key={n.key} href={n.href} className={active===n.key?"active":""}>{n.label}</a>
        ))}
        <div className="nav-soc">
          <a href={SOCIAL.instagram} target="_blank" rel="noopener">Instagram</a>
          <a href={SOCIAL.facebook}  target="_blank" rel="noopener">Facebook</a>
        </div>
      </div>
      {open && <div className="nav-scrim" onClick={close} />}
    </nav>
  );
}

/* Page hero band (bordo) */
function PageHero({ kicker, title, sub }){
  return (
    <section className="page-hero">
      <div className="wrap">
        <span className="kicker on-dark">{kicker}</span>
        <h1 dangerouslySetInnerHTML={{__html:title}} />
        {sub && <p className="ph-sub">{sub}</p>}
      </div>
    </section>
  );
}

/* AdriaTicket panel (zadržan radi jeseni) */
function UlaznicePanel({ show, date }){
  const sectors = date.sectors || ["Parter","Balkon"];
  const [sec,setSec] = useState(0);
  const [qty,setQty] = useState(2);
  const add = sectors[sec]==="VIP loža" ? 6 : (sectors[sec]==="Balkon" ? 2 : 0);
  const unit = show.price + add;
  return (
    <div className="uz">
      <div className="uz-top">
        <span>Odabir ulaznica</span>
        <span className="uz-brand">adriaticket.com</span>
      </div>
      <div className="uz-row" style={{marginTop:12}}>
        <span className="uz-label">Termin</span>
        <span style={{fontFamily:"var(--f-ui)",fontSize:13}}>{date.day}, {date.date} · {date.time}</span>
      </div>
      <div style={{marginTop:12}}>
        <span className="uz-label">Sektor</span>
        <div className="seg">
          {sectors.map((s,i)=>(
            <button key={s} className={i===sec?"on":""} onClick={()=>setSec(i)}>{s}</button>
          ))}
        </div>
      </div>
      <div className="uz-row" style={{marginTop:14}}>
        <span className="uz-label">Količina</span>
        <div className="qty">
          <button onClick={()=>setQty(Math.max(1,qty-1))}>–</button>
          <span>{qty}</span>
          <button onClick={()=>setQty(Math.min(8,qty+1))}>+</button>
        </div>
      </div>
      <div className="total">
        <span className="uz-label">Ukupno</span>
        <b>{(unit*qty).toFixed(2)} €</b>
      </div>
      <a className="btn solid uz-go" href={SOCIAL.tickets} target="_blank" rel="noopener">Nastavi na AdriaTicket</a>
      <p className="uz-note">SIGURNA KUPNJA · PARTNER ADRIATICKET.COM</p>
    </div>
  );
}

/* "Pauziramo preko ljeta" panel — koristi se na više mjesta */
function SummerBreak({ small, noImages }){
  const picks = [SHOWS[0],SHOWS[1],SHOWS[2]];
  return (
    <div className={"summer "+(small?"sm ":"")+(noImages?"plain":"")}>
      {!noImages && (
        <div className="summer-strip">
          {picks.map(p=>(
            <img key={p.id} src={p.poster} alt={p.name} />
          ))}
        </div>
      )}
      <div className="summer-text">
        <Diamond red />
        <h3>Odmaramo preko ljeta — vraćamo se na jesen!</h3>
        <p>Naši komičari trenutno pune baterije (i pivu) po jadranskim plažama. Čim sunce zađe i prvi puhne sjeverac — vraćamo se s novim predstavama, još više smijeha i rasprodanim dvoranama.</p>
        <p className="ps">Do tada — pratite nas na Instagramu, šaljemo ljetne pozdrave iz hladovine.</p>
        <a className="btn" href={SOCIAL.instagram} target="_blank" rel="noopener">Instagram @arlekin.hr</a>
      </div>
    </div>
  );
}

/* ----------------------------- FOOTER ----------------------------- */
function Footer(){
  return (
    <footer className="foot" id="footer">
      <div className="wrap">
        <div className="top two">
          <div className="flogo"><img src={LOGO_KAPA} alt="Arlekin comedy" /></div>
          <div>
            <h5>Kontakt</h5>
            <ul>
              <li><span className="gt">✉</span> <a href="mailto:info@arlekin.hr">info@arlekin.hr</a></li>
            </ul>
          </div>
          <div>
            <h5>Pratite nas</h5>
            <ul className="soc-list">
              <li><a href={SOCIAL.instagram} target="_blank" rel="noopener"><span className="gt">◆</span> Instagram @arlekin.hr</a></li>
              <li><a href={SOCIAL.facebook}  target="_blank" rel="noopener"><span className="gt">◆</span> Facebook /arlekin.comedy</a></li>
            </ul>
          </div>
        </div>
        <div className="bar">
          <span>© 2026. Arlekin comedy</span>
          <span>Agencija za kulturne manifestacije</span>
          <span className="soc">
            <a href={SOCIAL.facebook}  target="_blank" rel="noopener">Facebook</a>
            <a href={SOCIAL.instagram} target="_blank" rel="noopener">Instagram</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ----------------------------- EXPORT ----------------------------- */
Object.assign(window, {
  ARK_LOGO: LOGO, ARK_LOGO_LIGHT: LOGO_LIGHT,
  ARK_NAV: NAV, ARK_SHOWS: SHOWS, ARK_STATS: STATS, ARK_SOCIAL: SOCIAL,
  arkShowById: showById,
  Diamond, SiteNav, PageHero, UlaznicePanel, SummerBreak, Footer, Curtain,
});
})();