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

function KurseviPage({ onNav, onViewCourse }) {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [courses] = useCourses();
  const [filter, setFilter] = useStateKur("Svi");
  const [listRef, listVis] = useReveal(0.05);

  const regions = ["Svi", "Vratna kičma", "Torakalna", "LS kičma", "SI zglob", "Visceralno", "Periferne", "Dijagnostika", "Kiropraktika", "Akupunktura"];
  const list = courses.filter(c => c.active && (filter === "Svi" || c.region === filter));

  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", textAlign: isMobile ? "center" : "left" }}>
          <Eyebrow>Kursevi · Termini 2026</Eyebrow>
          <h1 style={{ margin:"12px 0 12px", fontSize:bp("clamp(30px,4vw,52px)","clamp(26px,5vw,38px)","clamp(24px,7vw,32px)"), lineHeight:1.08, letterSpacing:"-0.028em", fontWeight:800, textWrap:"balance" }}>
            Raspored obuka za 2026.
          </h1>
          <p style={{ fontSize:bp(15,14,14), lineHeight:1.6, color:"var(--text-secondary)", maxWidth:600, margin:"0 0 24px" }}>
            Individualni termini po Vašoj dostupnosti. Svaki modul se vodi jedan na jedan sa Aleksandrom Bisićem D.O.O.
          </p>
          <div style={{ display:"flex", gap:10, flexWrap:"wrap", justifyContent: isMobile ? "center" : "flex-start" }}>
            <Button variant="primary" size="md" icon="arrowRight" onClick={() => onNav("contact")}>Prijavite se</Button>
            <Button variant="secondary" size="md" iconLeft="phone" onClick={() => { window.location.href="tel:+381641973737"; }}>064 197 3737</Button>
          </div>
        </div>
      </section>

      <section style={{ padding:bp("20px 32px 14px","16px 24px 10px","12px 20px 8px") }}>
        <div style={{ maxWidth:1320, margin:"0 auto", display:"flex", gap:8, flexWrap:"wrap" }}>
          {regions.map(r => <Chip key={r} active={filter===r} onClick={() => setFilter(r)}>{r}</Chip>)}
        </div>
      </section>

      <section ref={listRef} style={{ padding:bp("20px 32px 96px","16px 24px 72px","16px 20px 56px") }}>
        <div style={{ maxWidth:1320, margin:"0 auto", display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(2,1fr)","1fr"), gap:bp(22,18,14) }}>
          {list.map((c, i) => (
            <div key={c.id} style={{ background:"#fff", borderRadius:18, overflow:"hidden",
              boxShadow:"var(--shadow-card)", display:"flex", flexDirection:"column", cursor:"pointer",
              opacity: listVis ? 1 : 0, transform: listVis ? "none" : "translateY(24px)",
              transition: `opacity 0.5s ${Math.min(i,5)*0.07}s var(--ease-spring), transform 0.5s ${Math.min(i,5)*0.07}s var(--ease-spring)` }}
              onClick={() => onViewCourse && onViewCourse(c)}
              onMouseEnter={e => { e.currentTarget.style.transform="translateY(-3px)"; e.currentTarget.style.boxShadow="var(--shadow-hover)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform="none"; e.currentTarget.style.boxShadow="var(--shadow-card)"; }}>
              <div style={{ position:"relative" }}>
                <Photo ratio="16/10" src={c.imageUrl || ""} label={c.region} style={{ borderRadius:0 }}/>
                {c.badge && <div style={{ position:"absolute", top:12, left:12, background:"var(--omt-green)", color:"#fff", padding:"3px 10px", borderRadius:100, fontSize:10, fontWeight:700, letterSpacing:"0.04em", textTransform:"uppercase" }}>{c.badge}</div>}
                <div style={{ position:"absolute", top:12, right:12, background:"rgba(14,26,23,0.75)", color:"#fff", backdropFilter:"blur(4px)", borderRadius:100, padding:"3px 10px", fontSize:12, fontWeight:800 }}>{c.price}</div>
              </div>
              <div style={{ padding:bp("20px 20px 22px","18px 18px 20px","16px 16px 18px"), flex:1, display:"flex", flexDirection:"column" }}>
                <div style={{ fontSize:10, fontWeight:700, letterSpacing:"0.08em", color:"var(--omt-green-ink)", textTransform:"uppercase" }}>{c.level}</div>
                <h3 style={{ margin:"7px 0 8px", fontSize:bp(17,16,15), fontWeight:700, letterSpacing:"-0.01em", lineHeight:1.3 }}>{c.title}</h3>
                <p style={{ margin:"0 0 12px", fontSize:13, lineHeight:1.5, color:"var(--text-secondary)" }}>{c.description}</p>
                <div style={{ display:"flex", flexDirection:"column", gap:5, fontSize:12, color:"var(--text-secondary)" }}>
                  <span style={{ display:"inline-flex", alignItems:"center", gap:5 }}><Icon name="calendar" size={13}/> {c.startDate || "Termin na dogovor"}</span>
                  <span style={{ display:"inline-flex", alignItems:"center", gap:5 }}><Icon name="clock" size={13}/> {c.duration} · {c.hours}</span>
                  <span style={{ display:"inline-flex", alignItems:"center", gap:5 }}><Icon name="users" size={13}/> {c.spots}</span>
                </div>
                {c.techniques && c.techniques.length > 0 && (
                  <div style={{ marginTop:10, display:"flex", gap:5, flexWrap:"wrap" }}>
                    {c.techniques.slice(0,3).map(t => (
                      <span key={t} style={{ fontSize:10, fontWeight:600, padding:"2px 8px", borderRadius:100, background:"rgba(4,175,143,0.1)", color:"#02604F", border:"1px solid rgba(4,175,143,0.2)" }}>{t}</span>
                    ))}
                  </div>
                )}
                <div style={{ marginTop:"auto", paddingTop:14, display:"flex", justifyContent:"space-between", alignItems:"center", borderTop:"1px solid var(--border-subtle)" }}>
                  <Stars count={5} total={5} />
                  <Button size="sm" variant="primary" icon="arrowRight" onClick={e => { e.stopPropagation(); onViewCourse && onViewCourse(c); }}>Detalji</Button>
                </div>
              </div>
            </div>
          ))}
        </div>
        {list.length === 0 && (
          <div style={{ textAlign:"center", padding:"48px 20px", color:"var(--text-tertiary)", maxWidth:360, margin:"0 auto" }}>
            <Icon name="search" size={28} color="var(--border-default)" />
            <div style={{ marginTop:14, fontSize:15, fontWeight:600 }}>Nema aktivnih kurseva.</div>
            <div style={{ marginTop:6, fontSize:13 }}>Izaberite drugu kategoriju ili nas <a onClick={() => onNav("contact")} style={{ color:"var(--omt-green-ink)", cursor:"pointer", fontWeight:600 }}>kontaktirajte</a>.</div>
          </div>
        )}
      </section>
    </main>
  );
}
window.KurseviPage = KurseviPage;