/* global React */
const { useState: useStateGal } = React;

function GalerijaPage() {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [active, setActive] = useStateGal(null);
  const [heroRef, heroVis] = useReveal(0.05);
  const [techRef, techVis] = useReveal(0.05);
  const [groupRef, groupVis] = useReveal(0.05);
  const [pensRef, pensVis] = useReveal(0.05);

  const videos = [
    { t:"O.A.A. C0-C1-C2 rotaciona manipulacija", r:"Vratna kičma", d:"2:14" },
    { t:"Classic DOG manipulacija torakalne kičme", r:"Torakalna", d:"1:48" },
    { t:"Lumbar Roll — demonstracija tehnike", r:"LS kičma", d:"3:02" },
    { t:"Chicago Roll — napredna varijanta", r:"LS kičma", d:"2:40" },
    { t:"Side Roll SI zglob manipulacija", r:"SI zglob", d:"1:32" },
    { t:"Miofascijalno opuštanje vratnog regiona", r:"Vratna kičma", d:"4:12" },
  ];

  const techPhotos = [
    { src:"assets/omt-centar-cervikalna-manipulacija-hvla-tehnika.jpeg", alt:"Praktična obuka — manuelna terapija, sala Beograd", label:"Praktična obuka" },
    { src:"assets/omt-centar-lumbalna-manuelna-terapija-vjezba.jpeg", alt:"Lumbalna manuelna terapija — vežbanje tehnike", label:"LS kičma" },
    { src:"assets/omt-centar-kiropraktika-demonstracija-lumbar-roll.jpeg", alt:"Cervikalna manipulacija — demonstracija tehnike", label:"Cervikalna kičma" },
    { src:"assets/omt-centar-hvla-torakalna-manipulacija-supine.jpeg", alt:"HVLA torakalna manipulacija — supine pozicija", label:"Torakalna kičma" },
    { src:"assets/omt-centar-torakalna-manipulacija-demonstracija.jpeg", alt:"Torakalna manipulacija — demonstracija na polazniku", label:"Torakalna kičma" },
    { src:"assets/omt-centar-demonstracija-tehnike-grupa-polaznici.jpeg", alt:"Cervikalna manipulacija — demonstracija pred polaznicima", label:"Cervikalna kičma" },
    { src:"assets/omt-centar-hvla-demonstracija-grupa-fizioterapeuta.jpeg", alt:"HVLA demonstracija pred grupom fizioterapeuta", label:"HVLA tehnika" },
    { src:"assets/omt-centar-prakticna-obuka-manuelna-terapija.jpeg", alt:"Praktična obuka — manuelna terapija, sala", label:"Praktična obuka" },
    { src:"assets/omt-centar-predavanje-medjunarodni-instruktor.jpeg", alt:"Predavanje — međunarodni instruktor, OMT kurs Beograd", label:"Predavanje" },
    { src:"assets/omt-centar-hvla-torakalna-manipulacija-supine-2.jpeg", alt:"HVLA torakalna manipulacija — supine pozicija, kurs Beograd", label:"Torakalna kičma" },
    { src:"assets/omt-centar-cervikalna-manipulacija-hvla-2.jpeg", alt:"Cervikalna manipulacija — HVLA tehnika, Beograd", label:"Cervikalna kičma" },
  ];

  const groupPhotos = [
    { src:"assets/omt-centar-grupna-fotografija-sertifikati-stepenice.jpeg", alt:"Grupna fotografija — polaznici sa sertifikatima, stepenice", label:"Sertifikati" },
    { src:"assets/omt-centar-ortopedska-medicina-sertifikati-grupna.jpeg", alt:"Ortopedska medicina — grupna fotografija sa sertifikatima", label:"Ortopedska medicina" },
    { src:"assets/omt-centar-medjunarodni-kurs-sertifikati-madarska.jpeg", alt:"Međunarodni kurs — grupna fotografija sa sertifikatima", label:"Međunarodni kurs" },
    { src:"assets/omt-centar-fizioterapija-kurs-sertifikati-polaznici-2.jpeg", alt:"Fizioterapija kurs — polaznici sa sertifikatima Beograd", label:"Sertifikati" },
    { src:"assets/omt-centar-manuelna-terapija-sertifikati-grupna.jpeg", alt:"Manuelna terapija kurs — grupna fotografija Beograd", label:"Sertifikati" },
    { src:"assets/omt-centar-fizioterapija-grupna-fotografija-sertifikati.jpeg", alt:"Fizioterapija kurs — grupna fotografija sa sertifikatima", label:"Sertifikati" },
    { src:"assets/omt-centar-grupna-fotografija-polaznici-sertifikati-1.jpeg", alt:"Grupna fotografija polaznika sa sertifikatima — OMT Centar", label:"Sertifikati" },
    { src:"assets/omt-centar-sertifikat-polaznik-beograd-1.jpeg", alt:"Polaznik sa OMT sertifikatom — OMT Centar Beograd", label:"Sertifikat" },
    { src:"assets/omt-centar-sertifikat-polaznik-beograd-2.jpeg", alt:"Polaznik sa OMT sertifikatom — OMT Centar Beograd", label:"Sertifikat" },
  ];

  const pensPhotos = [
    { src:"assets/omt-centar-pens-akupunktura-cervikalni-region.jpeg", alt:"PENS akupunktura — cervikalni region, elektrostimulacija", label:"PENS akupunktura" },
    { src:"assets/omt-centar-pens-elektroakupunktura-lumbalni.jpeg", alt:"PENS elektroakupunktura — lumbalni region, igle i elektrode", label:"Elektroakupunktura" },
  ];

  const PhotoCard = ({ photo, i, vis }) => (
    <div key={i} onClick={() => setActive(photo)} style={{ cursor:"pointer",
      opacity: vis ? 1 : 0, transform: vis ? "none" : "scale(0.95)",
      transition: `opacity 0.5s ${Math.min(i,5)*0.06}s var(--ease-spring), transform 0.5s ${Math.min(i,5)*0.06}s var(--ease-spring)` }}>
      <div style={{ borderRadius:bp(18,14,12), overflow:"hidden", aspectRatio: i%3===1?"4/5":"4/3", position:"relative", transition:"transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring)" }}
        onMouseEnter={e => { e.currentTarget.style.transform="scale(1.02)"; e.currentTarget.style.boxShadow="var(--shadow-hover)"; }}
        onMouseLeave={e => { e.currentTarget.style.transform="none"; e.currentTarget.style.boxShadow="none"; }}>
        <img src={photo.src} alt={photo.alt} loading="lazy"
          style={{ width:"100%", height:"100%", objectFit:"cover", display:"block",
            aspectRatio: i%3===1?"4/5":"4/3" }}
          onError={e => { e.target.style.display="none"; e.target.parentNode.style.background="var(--surface-2)"; }} />
        <div style={{ position:"absolute", bottom:0, left:0, right:0,
          background:"linear-gradient(transparent,rgba(14,26,23,0.65))",
          padding:"20px 12px 10px", color:"#fff", fontSize:10, fontWeight:700, letterSpacing:"0.06em", textTransform:"uppercase" }}>
          {photo.label}
        </div>
      </div>
    </div>
  );

  return (
    <main>
      <section style={{ padding:bp("64px 32px 40px","48px 24px 32px","40px 20px 28px"), background:"linear-gradient(180deg,#F0FBF7 0%,#fff 100%)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }} ref={heroRef}>
          <div style={{ opacity: heroVis ? 1 : 0, transform: heroVis ? "none" : "translateY(20px)", transition:"opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)", textAlign: isMobile ? "center" : "left" }}>
            <Eyebrow>Galerija · Fotografije iz prakse</Eyebrow>
            <h1 style={{ margin:"12px 0 12px", fontSize:bp("clamp(28px,4vw,48px)","clamp(24px,5vw,36px)","clamp(22px,6vw,30px)"), lineHeight:1.08, letterSpacing:"-0.028em", fontWeight:800, textWrap:"balance" }}>
              Pogledajte OMT Centre u akciji.
            </h1>
            <p style={{ fontSize:bp(16,15,14), lineHeight:1.6, color:"var(--text-secondary)", maxWidth:580, margin:0 }}>
              Fotografije iz stvarnih edukacija — tehnike, predavanja, i polaznici koji su završili naše programe.
            </p>
          </div>
        </div>
      </section>

      {/* ── PRAKTIČNA OBUKA ── */}
      <section ref={techRef} style={{ padding:bp("20px 32px 48px","16px 24px 36px","14px 20px 32px") }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <Eyebrow>Praktična obuka · Tehnike</Eyebrow>
          <div style={{ marginTop:16, display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(2,1fr)","repeat(2,1fr)"), gap:bp(16,14,10) }}>
            {techPhotos.map((photo, i) => (
              <PhotoCard key={i} photo={photo} i={i} vis={techVis} />
            ))}
          </div>
        </div>
      </section>

      {/* ── PENS & AKUPUNKTURA ── */}
      <section ref={pensRef} style={{ padding:bp("16px 32px 48px","14px 24px 36px","12px 20px 32px"), background:"var(--surface-1)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <Eyebrow>PENS · Moderna medicinska akupunktura</Eyebrow>
          <div style={{ marginTop:16, display:"grid", gridTemplateColumns:bp("repeat(2,1fr)","repeat(2,1fr)","repeat(2,1fr)"), gap:bp(16,14,10) }}>
            {pensPhotos.map((photo, i) => (
              <PhotoCard key={i} photo={photo} i={i} vis={pensVis} />
            ))}
          </div>
        </div>
      </section>

      {/* ── VIDEO DEMONSTRACIJE ── */}
      <section style={{ padding:bp("16px 32px 48px","14px 24px 36px","12px 20px 32px") }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <Eyebrow>Video demonstracije</Eyebrow>
          <div style={{ marginTop:16, display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(2,1fr)","1fr"), gap:bp(20,16,12) }}>
            {videos.map((v, i) => (
              <Card key={i} padding={0} hoverable style={{ overflow:"hidden",
                opacity: 1, transition:`opacity 0.5s ${Math.min(i,5)*0.06}s var(--ease-spring)` }}
                onClick={() => setActive({ type:"video", src:null, alt:v.t, label:v.r, ...v })}>
                <div style={{ position:"relative" }}>
                  <Photo ratio="16/10" label={v.r} icon="playSolid" style={{ borderRadius:0 }} dark/>
                  <div style={{ position:"absolute", bottom:10, right:10, background:"rgba(14,26,23,0.85)", color:"#fff", padding:"2px 8px", borderRadius:999, fontSize:10, fontWeight:700 }}>{v.d}</div>
                </div>
                <div style={{ padding:bp("16px 18px","14px 16px","12px 14px") }}>
                  <div style={{ fontSize:10, fontWeight:700, color:"var(--omt-green-ink)", textTransform:"uppercase", letterSpacing:"0.06em", marginBottom:4 }}>{v.r}</div>
                  <h3 style={{ margin:0, fontSize:bp(15,14,14), fontWeight:700, lineHeight:1.3 }}>{v.t}</h3>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── GRUPNE FOTOGRAFIJE ── */}
      <section ref={groupRef} style={{ padding:bp("16px 32px 96px","14px 24px 72px","12px 20px 56px"), background:"var(--surface-1)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <Eyebrow>Polaznici · Sertifikati · Grupne fotografije</Eyebrow>
          <div style={{ marginTop:16, display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(2,1fr)","1fr"), gap:bp(16,14,10) }}>
            {groupPhotos.map((photo, i) => (
              <div key={i} onClick={() => setActive(photo)} style={{ cursor:"pointer",
                opacity: groupVis ? 1 : 0, transform: groupVis ? "none" : "scale(0.95)",
                transition: `opacity 0.5s ${Math.min(i,5)*0.06}s var(--ease-spring), transform 0.5s ${Math.min(i,5)*0.06}s var(--ease-spring)` }}>
                <div style={{ borderRadius:bp(18,14,12), overflow:"hidden", aspectRatio:"4/3", position:"relative" }}>
                  <img src={photo.src} alt={photo.alt} loading="lazy"
                    style={{ width:"100%", height:"100%", objectFit:"cover", display:"block", aspectRatio:"4/3" }}
                    onError={e => { e.target.style.display="none"; e.target.parentNode.style.background="var(--surface-2)"; }} />
                  <div style={{ position:"absolute", bottom:0, left:0, right:0,
                    background:"linear-gradient(transparent,rgba(14,26,23,0.65))",
                    padding:"20px 12px 10px", color:"#fff", fontSize:10, fontWeight:700, letterSpacing:"0.06em", textTransform:"uppercase" }}>
                    {photo.label}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── LIGHTBOX ── */}
      {active && (
        <div onClick={() => setActive(null)} style={{ position:"fixed", inset:0, zIndex:100, background:"rgba(14,26,23,0.94)", display:"flex", alignItems:"center", justifyContent:"center", padding:bp(32,20,12), backdropFilter:"blur(10px)" }}>
          <div onClick={e => e.stopPropagation()} style={{ maxWidth:1000, width:"100%", animation:"omt-scale-in 0.25s var(--ease-spring)" }}>
            {active.src ? (
              <img src={active.src} alt={active.alt}
                style={{ width:"100%", maxHeight:"80vh", objectFit:"contain", borderRadius:bp(20,16,12), display:"block" }} />
            ) : (
              <Photo ratio="16/9" label={active.label || active.r} icon="playSolid" dark style={{ borderRadius:bp(20,16,12) }}/>
            )}
            <div style={{ color:"#fff", marginTop:14, display:"flex", justifyContent:"space-between", alignItems:"center" }}>
              <div style={{ fontSize:bp(16,14,13), fontWeight:600 }}>{active.alt || active.t}</div>
              <button onClick={() => setActive(null)} style={{ background:"rgba(255,255,255,0.12)", color:"#fff", border:0, borderRadius:"50%", width:38, height:38, cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 }}>
                <Icon name="close" size={16}/>
              </button>
            </div>
          </div>
        </div>
      )}
    </main>
  );
}
window.GalerijaPage = GalerijaPage;