/* global React */
const { useState: useStateHP, useEffect: useEffectHP } = React;

function HomePage({ onNav }) {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [courses] = useCourses();
  const activeCourses = (courses && courses.length > 0 ? courses : DEFAULT_COURSES).filter(c => c.active !== false);
  const [carouselIdx, setCarouselIdx] = useStateHP(0);
  useEffectHP(() => {
    if (activeCourses.length <= 1) return;
    const t = setInterval(() => setCarouselIdx(i => (i + 1) % activeCourses.length), 5000);
    return () => clearInterval(t);
  }, [activeCourses.length]);

  const [heroRef, heroVis] = useReveal(0.05);
  const [featRef, featVis] = useReveal(0.1);
  const [statsRef, statsVis] = useReveal(0.1);
  const [aboutRef, aboutVis] = useReveal(0.08);
  const [coursesRef, coursesVis] = useReveal(0.1);
  const [howRef, howVis] = useReveal(0.05);
  const [spineRef, spineVis] = useReveal(0.1);
  const [whyRef, whyVis] = useReveal(0.05);
  const [blogRef, blogVis] = useReveal(0.05);
  const [faqRef, faqVis] = useReveal(0.1);
  const [testRef, testVis] = useReveal(0.05);
  const [ctaRef, ctaVis] = useReveal(0.1);

  const sectionPad = bp("80px 32px", "60px 24px", "48px 20px");
  const darkSectionPad = bp("80px 32px 96px", "60px 24px 72px", "48px 20px 56px");

  const testimonials = [
    { name: "Marija R.", role: "Fizioterapeut", text: "Aleksandar je strpljiv i neverovatno precizan instruktor. Petogodišnji Program mi je konačno dao samopouzdanje u radu sa pacijentima.", stars: 5 },
    { name: "Nikola T.", role: "Sportski terapeut", text: "Lumbar Roll tehnika mi je bila potpuna misterija. Nakon dva dana intenzivnog rada sve je kliknulo. Preporučujem svima koji žele da napreduju.", stars: 5 },
    { name: "Ana V.", role: "Fizioterapeut specijalista", text: "Godinama sam radila na grupnim kursevima, ali individualni rad sa OMT Centrom je razlika između dana i noći.", stars: 5 },
  ];

  const steps = [
    { n: "01", icon: "phone", title: "Besplatna Konsultacija", body: "Razgovaramo o Vašem iskustvu, ciljevima i odabiru odgovarajućeg modula." },
    { n: "02", icon: "clipboard", title: "Personalizovani Plan", body: "Kreiramo program prilagođen Vašem tempu i specifičnim oblastima rada." },
    { n: "03", icon: "users", title: "1-na-1 Rad", body: "Intenzivna obuka uz trenutnu povratnu informaciju o položaju i sili." },
    { n: "04", icon: "award", title: "Sertifikat", body: "Po završetku dobijate zvanični sertifikat OMT Centra sa opisom savladanih tehnika." },
  ];

  return (
    <main>
      {/* ── HERO ── */}
      <section style={{
        background: "#fff",
        minHeight: isMobile ? "auto" : "min(88vh,820px)",
        display: "flex", alignItems: "center",
        padding: bp("80px 32px 64px", "60px 24px 48px", "56px 20px 48px"),
        position: "relative", overflow: "hidden",
      }}>
        {/* Dekorativne zelene šare */}
        <div style={{ position:"absolute", top:-160, right:-160, width:520, height:520, borderRadius:"50%",
          background:"radial-gradient(circle,rgba(4,175,143,0.13) 0%,transparent 65%)", pointerEvents:"none" }} />
        <div style={{ position:"absolute", bottom:-100, left:-100, width:380, height:380, borderRadius:"50%",
          background:"radial-gradient(circle,rgba(4,175,143,0.09) 0%,transparent 65%)", pointerEvents:"none" }} />
        <div style={{ position:"absolute", top:"30%", left:"45%", width:220, height:220, borderRadius:"50%",
          background:"radial-gradient(circle,rgba(23,164,181,0.07) 0%,transparent 70%)", pointerEvents:"none" }} />
        {/* Linija akcenat */}
        <div style={{ position:"absolute", top:0, left:0, right:0, height:4,
          background:"linear-gradient(90deg,#04AF8F,#17A4B5,transparent)", pointerEvents:"none" }} />

        <div style={{ maxWidth:1320, margin:"0 auto", width:"100%",
          display:"grid",
          gridTemplateColumns: isMobile ? "1fr" : isTablet ? "1fr" : "1fr 1fr",
          gap: bp(64, 40, 32), alignItems:"center" }}
          ref={heroRef}>

          {/* LEFT */}
          <div style={{ opacity: heroVis ? 1 : 0, transform: heroVis ? "none" : "translateY(28px)",
            transition: "opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring)",
            textAlign: isMobile ? "center" : "left",
            display: "flex", flexDirection: "column", alignItems: isMobile ? "center" : "flex-start" }}>
            <div style={{ display:"inline-flex", alignItems:"center", gap:8,
              background:"rgba(4,175,143,0.1)", border:"1px solid rgba(4,175,143,0.25)",
              borderRadius:100, padding:"6px 14px", fontSize:12, fontWeight:700, color:"#02604F",
              letterSpacing:"0.06em", textTransform:"uppercase", marginBottom:22 }}>
              <span style={{ width:6, height:6, borderRadius:"50%", background:"#04AF8F", animation:"omt-pulse 2s infinite" }} />
              Osteopatija &amp; Kiropraktika · Beograd
            </div>
            <h1 style={{ margin:"0 0 20px", fontSize:bp("clamp(36px,4.5vw,60px)", "clamp(32px,5vw,52px)", "clamp(30px,8vw,42px)"),
              fontWeight:800, lineHeight:1.06, letterSpacing:"-0.03em", color:"var(--text-primary)", textWrap:"balance" }}>
              Edukacije{" "}
              <span style={{ background:"linear-gradient(90deg,#04AF8F,#17A4B5)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent" }}>
                Osteopatije
              </span>{" "}I Kiropraktike
            </h1>
            <p style={{ margin:"0 0 32px", fontSize:bp(17, 16, 15), lineHeight:1.65, color:"var(--text-secondary)", maxWidth:440 }}>
              Individualna 1-na-1 obuka sa diplomiranim osteopatom. 15+ HVLA tehnika,
              personalizovani plan i zvanični sertifikat.
            </p>
            <div style={{ display:"flex", gap:12, flexWrap:"wrap", justifyContent: isMobile ? "center" : "flex-start" }}>
              <Button variant="primary" size={isMobile ? "md" : "lg"} icon="arrowRight" onClick={() => onNav("contact")}>Kontakt</Button>
              <Button variant="secondary" size={isMobile ? "md" : "lg"} onClick={() => onNav("kursevi")}>
                Cenovnik edukacija
              </Button>
            </div>
            <div style={{ marginTop:32, display:"inline-flex", alignItems:"center",
              background:"var(--surface-1)", border:"1px solid var(--border-subtle)", borderRadius:100, overflow:"hidden" }}>
              {[["120+","polaznika"],["4.9","ocena"],["10+","godina"]].map(([b,s], i) => (
                <div key={s} style={{ padding:"10px 18px", display:"flex", flexDirection:"column", alignItems:"center",
                  borderRight: i < 2 ? "1px solid var(--border-subtle)" : "none" }}>
                  <span style={{ fontSize:bp(16,15,14), fontWeight:800, color:"var(--text-primary)", letterSpacing:"-0.02em" }}>{b}</span>
                  <span style={{ fontSize:10, color:"var(--text-tertiary)", marginTop:1 }}>{s}</span>
                </div>
              ))}
            </div>
          </div>

          {/* CENTER FLOAT — vidljivo samo na desktopu */}
          {!isMobile && !isTablet && (
            <div style={{ position:"absolute", left:"50%", top:"50%", transform:"translate(-50%,-50%)", zIndex:10,
              background:"#fff", borderRadius:16, padding:"14px 18px", boxShadow:"0 8px 32px rgba(0,0,0,0.12)",
              border:"1px solid var(--border-subtle)", display:"flex", flexDirection:"column", alignItems:"center", gap:6, minWidth:130 }}>
              <div style={{ width:36, height:36, borderRadius:"50%", background:"linear-gradient(135deg,#04AF8F,#17A4B5)", display:"flex", alignItems:"center", justifyContent:"center" }}>
                <Icon name="award" size={18} color="#fff" />
              </div>
              <div style={{ fontSize:13, fontWeight:800, color:"var(--text-primary)", textAlign:"center", lineHeight:1.2 }}>Međunarodni<br/>sertifikat</div>
              <div style={{ fontSize:10, color:"var(--text-tertiary)", textAlign:"center" }}>OMT Centar · Beograd</div>
            </div>
          )}

          {/* RIGHT — hidden on mobile */}
          {!isMobile && (
            <div style={{ position:"relative", display:"flex", justifyContent:"center",
              opacity: heroVis ? 1 : 0, transform: heroVis ? "none" : "translateX(28px)",
              transition: "opacity 0.7s 0.15s var(--ease-spring), transform 0.7s 0.15s var(--ease-spring)" }}>
              <div style={{ width:"100%", maxWidth:380, position:"relative" }}>
                <img src="assets/omt-centar-sertifikat-polaznik-beograd-1.jpeg"
                  alt="Aleksandar Bisić D.O.O. · OMT Centar Beograd"
                  style={{ width:"100%", aspectRatio:"4/5", objectFit:"cover", borderRadius:24, display:"block", boxShadow:"0 24px 64px rgba(0,0,0,0.5)" }} />
                <div style={{ position:"absolute", bottom:24, left:-28, width:200,
                  background:"#fff", borderRadius:16, padding:"14px 16px",
                  boxShadow:"0 12px 40px rgba(0,0,0,0.35)", animation:"omt-float 4s ease-in-out infinite" }}>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:8 }}>
                    <div style={{ fontSize:12, fontWeight:700, color:"var(--text-primary)", lineHeight:1.3 }}>Kurs Osteopatije</div>
                    <span style={{ background:"var(--omt-green)", color:"#fff", fontSize:9, fontWeight:700, padding:"2px 7px", borderRadius:100, letterSpacing:"0.04em", textTransform:"uppercase" }}>Popularno</span>
                  </div>
                  <Stars count={5} total={5} />
                  <div style={{ marginTop:6, fontSize:10, color:"var(--text-tertiary)" }}>120+ polaznika</div>
                  <Button variant="primary" size="sm" style={{ marginTop:8, width:"100%", justifyContent:"center", fontSize:11 }} onClick={() => onNav("contact")}>Prijavi se</Button>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* ── FEATURES BAR ── */}
      <section ref={featRef} style={{ background:"#fff", borderBottom:"1px solid var(--border-subtle)", padding:bp("40px 32px","32px 24px","28px 20px") }}>
        <div style={{ maxWidth:1320, margin:"0 auto", display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(3,1fr)","1fr"), gap:bp(32,24,20) }}>
          {[
            { icon:"user", title:"Kvalifikovani Predavači", body:"Aleksandar Bisić D.O.O. — diplomirani osteopata, fizioterapeut specijalista, 10+ godina iskustva." },
            { icon:"checkCircle", title:"Akreditovani Kursevi", body:"Sertifikat koji se uklapa u kontinuiranu medicinsku edukaciju i priznat je u struci." },
            { icon:"award", title:"Obezbeđen Sertifikat", body:"Svaki polaznik dobija zvanični sertifikat sa opisom savladanih tehnika i modula." },
          ].map(({ icon, title, body }, i) => (
            <div key={title} style={{ display:"flex", gap:16, alignItems:"flex-start",
              opacity: featVis ? 1 : 0, transform: featVis ? "none" : "translateY(16px)",
              transition: `opacity 0.5s ${0.07 * i}s var(--ease-spring), transform 0.5s ${0.07 * i}s var(--ease-spring)` }}>
              <div style={{ flexShrink:0, width:44, height:44, borderRadius:12,
                background:"linear-gradient(135deg,rgba(4,175,143,0.12),rgba(23,164,181,0.1))",
                display:"flex", alignItems:"center", justifyContent:"center" }}>
                <Icon name={icon} size={20} color="var(--omt-green)" />
              </div>
              <div>
                <div style={{ fontSize:14, fontWeight:700, color:"var(--text-primary)", marginBottom:3 }}>{title}</div>
                <div style={{ fontSize:13, lineHeight:1.5, color:"var(--text-secondary)" }}>{body}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── STATS ── */}
      <section ref={statsRef} style={{ padding:sectionPad, background:"var(--surface-1)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto", textAlign:"center" }}>
          <Eyebrow>Rezultati koji govore</Eyebrow>
          <h2 style={{ margin:"12px auto 36px", fontSize:bp("clamp(26px,3vw,40px)","30px","26px"), fontWeight:800, letterSpacing:"-0.025em", lineHeight:1.1, maxWidth:620, textWrap:"balance" }}>
            Više od decenije posvećenosti stručnoj edukaciji
          </h2>
          <div style={{ display:"grid", gridTemplateColumns:bp("repeat(4,1fr)","repeat(2,1fr)","repeat(2,1fr)"), gap:bp(24,16,12) }}>
            {[
              { val:"120+", label:"Polaznika", icon:"users" },
              { val:"15+", label:"HVLA tehnika", icon:"zap" },
              { val:"10+", label:"Godina prakse", icon:"calendar" },
              { val:"4.9", label:"Prosečna ocena", icon:"star" },
            ].map(({ val, label, icon }, i) => (
              <div key={label} style={{ background:"#fff", borderRadius:18, padding:bp("28px 20px","22px 16px","20px 14px"),
                boxShadow:"var(--shadow-card)", textAlign:"center",
                opacity: statsVis ? 1 : 0, transform: statsVis ? "none" : "translateY(20px)",
                transition: `opacity 0.55s ${0.08 * i}s var(--ease-spring), transform 0.55s ${0.08 * i}s var(--ease-spring)` }}>
                <div style={{ width:44, height:44, borderRadius:12, margin:"0 auto 12px",
                  background:"linear-gradient(135deg,rgba(4,175,143,0.1),rgba(23,164,181,0.1))",
                  display:"flex", alignItems:"center", justifyContent:"center" }}>
                  <Icon name={icon} size={20} color="var(--omt-green)" />
                </div>
                <div style={{ fontSize:bp(40,34,30), fontWeight:800, letterSpacing:"-0.03em", lineHeight:1,
                  background:"var(--omt-grad)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent" }}>{val}</div>
                <div style={{ fontSize:12, color:"var(--text-tertiary)", marginTop:5, fontWeight:500 }}>{label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── O CENTRU ── */}
      <section ref={aboutRef} style={{ padding:bp("80px 32px","60px 24px","48px 20px"), background:"#fff", borderTop:"1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto",
          display:"grid", gridTemplateColumns:bp("1.2fr 1fr","1fr","1fr"), gap:bp(72,40,28), alignItems:"center" }}>
          <div style={{ opacity:aboutVis?1:0, transform:aboutVis?"none":"translateX(-24px)", transition:"opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring)", textAlign: isMobile ? "center" : "left", display:"flex", flexDirection:"column", alignItems: isMobile ? "center" : "flex-start" }}>
            <Eyebrow>O centru</Eyebrow>
            <h2 style={{ margin:"12px 0 18px", fontSize:bp("clamp(26px,3vw,40px)","28px","24px"), fontWeight:800, letterSpacing:"-0.025em", lineHeight:1.1, textWrap:"balance" }}>
              Vodeći centar za fizioterapeutsku edukaciju u regionu
            </h2>
            <p style={{ fontSize:bp(16,15,14), lineHeight:1.7, color:"var(--text-secondary)", margin:"0 0 16px" }}>
              Vodeći smo centar za edukaciju u oblasti fizioterapije u regionu, sa posebnim fokusom na manuelnu terapiju, osteopatiju i kiropraktiku. Sa organizacijom kurseva započeli smo 2022. godine i od tada smo edukovali više stotina kolega, fizioterapeuta i lekara iz Srbije, ali i iz drugih zemalja sveta.
            </p>
            <p style={{ fontSize:bp(16,15,14), lineHeight:1.7, color:"var(--text-secondary)", margin:"0 0 28px" }}>
              Do sada smo kurseve organizovali u Srbiji, Mađarskoj i Austriji. Deo našeg edukativnog tima su stručnjaci iz Engleske, Norveške, Brazila, Poljske i Slovenije.
            </p>
            <div style={{ display:"flex", gap:10, flexWrap:"wrap", marginBottom:28 }}>
              {[{flag:"🇷🇸",name:"Srbija"},{flag:"🇭🇺",name:"Mađarska"},{flag:"🇦🇹",name:"Austrija"}].map(c => (
                <div key={c.name} style={{ display:"inline-flex", alignItems:"center", gap:7, background:"var(--surface-1)", border:"1.5px solid var(--border-default)", borderRadius:100, padding:"6px 14px", fontSize:13, fontWeight:600 }}>
                  <span style={{ fontSize:17 }}>{c.flag}</span> {c.name}
                </div>
              ))}
            </div>
            <Button variant="primary" size={isMobile?"md":"lg"} icon="arrowRight" onClick={() => onNav("about")}>Saznaj više o nama</Button>
          </div>

          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:bp(16,14,12),
            opacity:aboutVis?1:0, transform:aboutVis?"none":"translateX(24px)", transition:"opacity 0.65s 0.12s var(--ease-spring), transform 0.65s 0.12s var(--ease-spring)" }}>
            {[
              { val:"2022", label:"Godina osnivanja", icon:"calendar" },
              { val:"3", label:"Države organizacije", icon:"mapPin" },
              { val:"5", label:"Zemalja instruktora", icon:"sparkle" },
              { val:"500+", label:"Edukovanih kolega", icon:"users" },
            ].map(({ val, label, icon }, i) => (
              <div key={label} style={{ background:"var(--surface-1)", borderRadius:18, padding:bp("24px 20px","20px 16px","18px 14px"), boxShadow:"var(--shadow-card)", textAlign:"center",
                opacity:aboutVis?1:0, transform:aboutVis?"none":"translateY(16px)",
                transition:`opacity 0.5s ${0.12 + i*0.07}s var(--ease-spring), transform 0.5s ${0.12 + i*0.07}s var(--ease-spring)` }}>
                <div style={{ width:40, height:40, borderRadius:12, background:"linear-gradient(135deg,rgba(4,175,143,0.12),rgba(23,164,181,0.1))", display:"flex", alignItems:"center", justifyContent:"center", margin:"0 auto 10px" }}>
                  <Icon name={icon} size={18} color="var(--omt-green-ink)" />
                </div>
                <div style={{ fontSize:bp(32,28,24), fontWeight:800, letterSpacing:"-0.03em", background:"var(--omt-grad)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent", lineHeight:1 }}>{val}</div>
                <div style={{ fontSize:11, color:"var(--text-tertiary)", marginTop:5, fontWeight:500, lineHeight:1.3 }}>{label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── NAJNOVIJI KURSEVI — CAROUSEL ── */}
      <section ref={coursesRef} style={{ padding:sectionPad }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom:28, flexWrap:"wrap", gap:12 }}>
            <div>
              <Eyebrow>Kursevi</Eyebrow>
              <h2 style={{ margin:"10px 0 0", fontSize:bp("clamp(24px,3vw,38px)","28px","24px"), fontWeight:800, letterSpacing:"-0.022em", lineHeight:1.1 }}>Aktuelni kursevi</h2>
            </div>
            <a onClick={() => onNav("kursevi")} style={{ fontSize:14, fontWeight:700, color:"var(--omt-green)", cursor:"pointer", textDecoration:"none", display:"flex", alignItems:"center", gap:6 }}>
              Svi moduli <Icon name="arrowRight" size={16}/>
            </a>
          </div>

          {/* Carousel card */}
          <div style={{ opacity: coursesVis ? 1 : 0, transform: coursesVis ? "none" : "translateY(24px)", transition:"opacity 0.55s var(--ease-spring), transform 0.55s var(--ease-spring)" }}>
            {activeCourses.length > 0 && (() => {
              const c = activeCourses[carouselIdx];
              return (
                <div key={carouselIdx} style={{ background:"#fff", borderRadius:bp(22,18,16), overflow:"hidden", boxShadow:"var(--shadow-card)", display:"grid", gridTemplateColumns:isMobile ? "1fr" : "2fr 3fr", animation:"omt-fade-in 0.4s var(--ease-spring)" }}>
                  {/* Image */}
                  <div style={{ position:"relative", minHeight:isMobile ? 180 : 280 }}>
                    {c.imageUrl ? (
                      <img src={c.imageUrl} alt={c.title} style={{ width:"100%", height:"100%", objectFit:"cover", display:"block", minHeight:isMobile ? 180 : 280 }}/>
                    ) : (
                      <div style={{ width:"100%", height:"100%", minHeight:isMobile ? 180 : 280, background:"linear-gradient(135deg,#122e27,#0E1A17)", display:"flex", alignItems:"center", justifyContent:"center" }}>
                        <Icon name="activity" size={48} color="rgba(4,175,143,0.3)"/>
                      </div>
                    )}
                    {c.badge && <div style={{ position:"absolute", top:14, left:14, background:"var(--omt-green)", color:"#fff", fontSize:10, fontWeight:700, padding:"3px 10px", borderRadius:100, textTransform:"uppercase", letterSpacing:"0.04em" }}>{c.badge}</div>}
                    <div style={{ position:"absolute", top:14, right:14, background:"rgba(14,26,23,0.8)", backdropFilter:"blur(6px)", borderRadius:100, padding:"4px 12px", fontSize:13, fontWeight:800, color:"#fff" }}>{c.price}</div>
                  </div>
                  {/* Info */}
                  <div style={{ padding:bp("32px 36px","24px 28px","20px 22px"), display:"flex", flexDirection:"column", justifyContent:"center" }}>
                    <div style={{ fontSize:10, fontWeight:700, color:"var(--omt-green-ink)", textTransform:"uppercase", letterSpacing:"0.08em", marginBottom:8 }}>{c.level} · {c.region}</div>
                    <h3 style={{ margin:"0 0 12px", fontSize:bp("clamp(20px,2.5vw,28px)","22px","20px"), fontWeight:800, letterSpacing:"-0.02em", lineHeight:1.2 }}>{c.title}</h3>
                    <p style={{ margin:"0 0 20px", fontSize:bp(15,14,14), lineHeight:1.6, color:"var(--text-secondary)" }}>{c.description}</p>
                    <div style={{ display:"flex", flexWrap:"wrap", gap:14, marginBottom:24, fontSize:13, color:"var(--text-secondary)" }}>
                      {c.startDate && <span style={{ display:"inline-flex", alignItems:"center", gap:5 }}><Icon name="calendar" size={14}/> {c.startDate}</span>}
                      <span style={{ display:"inline-flex", alignItems:"center", gap:5 }}><Icon name="clock" size={14}/> {c.duration} · {c.hours}</span>
                      <span style={{ display:"inline-flex", alignItems:"center", gap:5 }}><Icon name="users" size={14}/> {c.spots}</span>
                    </div>
                    <div style={{ display:"flex", gap:10, flexWrap:"wrap" }}>
                      <Button variant="primary" size={isMobile ? "md" : "lg"} icon="arrowRight" onClick={() => onNav("kursevi")}>Prijavi se</Button>
                      <Button variant="secondary" size={isMobile ? "md" : "lg"} onClick={() => onNav("kursevi")}>Detalji</Button>
                    </div>
                  </div>
                </div>
              );
            })()}

            {/* Controls */}
            {activeCourses.length > 1 && (
              <div style={{ marginTop:20, display:"flex", alignItems:"center", justifyContent:"center", gap:16 }}>
                <button onClick={() => setCarouselIdx(i => (i - 1 + activeCourses.length) % activeCourses.length)}
                  style={{ width:36, height:36, borderRadius:"50%", border:"1.5px solid var(--border-default)", background:"#fff", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--text-primary)" }}>
                  <Icon name="chevronLeft" size={18}/>
                </button>
                <div style={{ display:"flex", gap:8, alignItems:"center" }}>
                  {activeCourses.map((_, i) => (
                    <button key={i} onClick={() => setCarouselIdx(i)} style={{ width: i === carouselIdx ? 24 : 8, height:8, borderRadius:999, border:0, cursor:"pointer", padding:0, background: i === carouselIdx ? "var(--omt-green)" : "var(--border-default)", transition:"all 0.3s var(--ease-spring)" }}/>
                  ))}
                </div>
                <button onClick={() => setCarouselIdx(i => (i + 1) % activeCourses.length)}
                  style={{ width:36, height:36, borderRadius:"50%", border:"1.5px solid var(--border-default)", background:"#fff", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--text-primary)" }}>
                  <Icon name="chevronRight" size={18}/>
                </button>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── KAKO FUNKCIONIŠE ── */}
      <section ref={howRef} style={{ padding:sectionPad, background:"var(--surface-1)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <div style={{ textAlign:"center", marginBottom:40 }}>
            <Eyebrow>Proces</Eyebrow>
            <h2 style={{ margin:"12px auto 0", fontSize:bp("clamp(24px,3vw,38px)","28px","24px"), fontWeight:800, letterSpacing:"-0.022em", lineHeight:1.1, maxWidth:400, textWrap:"balance" }}>Kako funkcioniše?</h2>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:bp("repeat(4,1fr)","repeat(2,1fr)","1fr"), gap:bp(20,16,14) }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{ background:"#fff", borderRadius:18, padding:bp("24px 20px","20px 18px","18px 16px"),
                boxShadow:"var(--shadow-card)",
                opacity: howVis ? 1 : 0, transform: howVis ? "none" : "translateY(20px)",
                transition: `opacity 0.55s ${0.08 * i}s var(--ease-spring), transform 0.55s ${0.08 * i}s var(--ease-spring)` }}>
                <div style={{ fontSize:10, fontWeight:800, color:"var(--omt-green)", letterSpacing:"0.08em", marginBottom:12 }}>{s.n}</div>
                <div style={{ width:40, height:40, borderRadius:12, marginBottom:12,
                  background:"linear-gradient(135deg,rgba(4,175,143,0.12),rgba(23,164,181,0.1))",
                  display:"flex", alignItems:"center", justifyContent:"center" }}>
                  <Icon name={s.icon} size={20} color="var(--omt-green)" />
                </div>
                <h3 style={{ margin:"0 0 6px", fontSize:15, fontWeight:700, lineHeight:1.25 }}>{s.title}</h3>
                <p style={{ margin:0, fontSize:13, lineHeight:1.5, color:"var(--text-secondary)" }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SPINE / PROGRAM TEASER ── */}
      <section ref={spineRef} style={{ padding:sectionPad, overflow:"hidden" }}>
        <div style={{ maxWidth:1320, margin:"0 auto",
          display:"grid", gridTemplateColumns:bp("1fr 1fr","1fr","1fr"), gap:bp(64,36,28), alignItems:"center" }}>
          <div style={{ opacity: spineVis ? 1 : 0, transform: spineVis ? "none" : "translateX(-24px)",
            transition: "opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring)",
            textAlign: isMobile ? "center" : "left", display:"flex", flexDirection:"column", alignItems: isMobile ? "center" : "flex-start" }}>
            <Eyebrow>Program</Eyebrow>
            <h2 style={{ margin:"12px 0 16px", fontSize:bp("clamp(24px,3vw,38px)","28px","24px"), fontWeight:800, letterSpacing:"-0.024em", lineHeight:1.1, textWrap:"balance" }}>
              Od cervikalnih do visceralnih — kompletan program
            </h2>
            <p style={{ fontSize:bp(16,15,14), lineHeight:1.65, color:"var(--text-secondary)", margin:"0 0 24px" }}>
              Program pokriva kičmeni stub od C1 do sakruma, SI zglob, periferne zglobove i visceralne tehnike.
            </p>
            <div style={{ display:"flex", flexDirection:"column", gap:10, marginBottom:28 }}>
              {["Cervikalna kičma (C1–C7)","Torakalna kičma","Lumbalna kičma — Lumbar & Chicago Roll","SI zglob","Visceralne i periferne tehnike"].map(item => (
                <div key={item} style={{ display:"flex", alignItems:"center", gap:10, fontSize:14 }}>
                  <div style={{ width:18, height:18, borderRadius:"50%", flexShrink:0, background:"rgba(4,175,143,0.12)", display:"flex", alignItems:"center", justifyContent:"center" }}>
                    <Icon name="check" size={10} color="var(--omt-green)" />
                  </div>
                  <span style={{ color:"var(--text-secondary)", fontWeight:500 }}>{item}</span>
                </div>
              ))}
            </div>
            <Button variant="primary" size={isMobile ? "md" : "lg"} icon="arrowRight" onClick={() => onNav("program")}>Pogledaj kompletan program</Button>
          </div>
          {!isMobile && (
            <div style={{ opacity: spineVis ? 1 : 0, transform: spineVis ? "none" : "translateX(24px)",
              transition: "opacity 0.65s 0.15s var(--ease-spring), transform 0.65s 0.15s var(--ease-spring)" }}>
              <img src="assets/omt-centar-hvla-demonstracija-grupa-fizioterapeuta.jpeg"
                alt="HVLA demonstracija — OMT Centar program"
                style={{ width:"100%", aspectRatio:"4/5", objectFit:"cover", borderRadius:22, display:"block", boxShadow:"var(--shadow-card)" }} />
            </div>
          )}
        </div>
      </section>

      {/* ── ZAŠTO NAS BIRATI ── */}
      <section ref={whyRef} style={{ padding:sectionPad, background:"var(--surface-1)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <div style={{ textAlign:"center", marginBottom:36 }}>
            <Eyebrow>Razlika</Eyebrow>
            <h2 style={{ margin:"12px auto 0", fontSize:bp("clamp(24px,3vw,38px)","28px","22px"), fontWeight:800, letterSpacing:"-0.022em", lineHeight:1.1, maxWidth:480, textWrap:"balance" }}>
              Zašto individualna obuka a ne grupni kurs?
            </h2>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:bp("1fr 1fr","1fr","1fr"), gap:bp(24,16,14) }}>
            {[
              { side:"Grupni kurs", dark:false, items:[
                ["Podeljena pažnja instruktora", false],
                ["Standardizovani tempo bez prilagođavanja", false],
                ["Retka povratna informacija na Vaš rad", false],
                ["Generična mehanika tela", false],
                ["Ograničena klinička diskusija", false],
              ]},
              { side:"OMT Centar 1-na-1", dark:true, items:[
                ["Puna pažnja instruktora tokom cele obuke", true],
                ["Tempo i sadržaj prilagođeni Vašim potrebama", true],
                ["Trenutna korekcija položaja, sile i smera", true],
                ["Ergonomija prilagođena Vašoj anatomiji", true],
                ["Detaljna klinička diskusija i praktični slučajevi", true],
              ]},
            ].map(({ side, dark, items }, col) => (
              <div key={side} style={{ background: dark ? "linear-gradient(135deg,#0E1A17 0%,#122e27 100%)" : "#fff",
                borderRadius:18, padding:bp("26px 24px","22px 20px","20px 18px"),
                boxShadow:"var(--shadow-card)",
                opacity: whyVis ? 1 : 0, transform: whyVis ? "none" : `translateY(20px)`,
                transition: `opacity 0.6s ${col * 0.1}s var(--ease-spring), transform 0.6s ${col * 0.1}s var(--ease-spring)` }}>
                <div style={{ fontSize:12, fontWeight:800, letterSpacing:"0.05em", textTransform:"uppercase", marginBottom:18, color: dark ? "rgba(4,175,143,0.9)" : "var(--text-tertiary)" }}>{side}</div>
                <div style={{ display:"flex", flexDirection:"column", gap:11 }}>
                  {items.map(([text, good]) => (
                    <div key={text} style={{ display:"flex", gap:10, alignItems:"flex-start" }}>
                      <div style={{ width:20, height:20, borderRadius:"50%", flexShrink:0, marginTop:1,
                        background: good ? "rgba(4,175,143,0.18)" : dark ? "rgba(255,255,255,0.06)" : "var(--surface-2)",
                        display:"flex", alignItems:"center", justifyContent:"center" }}>
                        <Icon name={good ? "check" : "minus"} size={10} color={good ? "#04AF8F" : dark ? "rgba(255,255,255,0.3)" : "var(--text-tertiary)"} />
                      </div>
                      <span style={{ fontSize:13, lineHeight:1.5, fontWeight:500, color: dark ? (good ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,0.4)") : (good ? "var(--text-primary)" : "var(--text-tertiary)") }}>{text}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── BLOG PREVIEW ── */}
      <section ref={blogRef} style={{ padding:sectionPad }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom:28, flexWrap:"wrap", gap:12 }}>
            <div>
              <Eyebrow>Blog</Eyebrow>
              <h2 style={{ margin:"10px 0 0", fontSize:bp("clamp(22px,3vw,34px)","26px","22px"), fontWeight:800, letterSpacing:"-0.02em", lineHeight:1.1 }}>Iz prakse · Klinička znanja</h2>
            </div>
            <a onClick={() => onNav("blog")} style={{ fontSize:14, fontWeight:700, color:"var(--omt-green)", cursor:"pointer", textDecoration:"none", display:"flex", alignItems:"center", gap:6 }}>
              Svi tekstovi <Icon name="arrowRight" size={15}/>
            </a>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(2,1fr)","1fr"), gap:bp(20,16,14) }}>
            {[
              ["Zašto individualna obuka pobeđuje grupne kurseve","10 min","Klinička praksa"],
              ["HVLA tehnike: kada i kako ih bezbedno primeniti","7 min","Tehnike"],
              ["Ergonomija osteopate: kako raditi 20 godina bez povrede","6 min","Karijera"],
            ].map(([title, read, cat], i) => (
              <div key={title} style={{ background:"#fff", borderRadius:16, overflow:"hidden", boxShadow:"var(--shadow-card)", cursor:"pointer",
                opacity: blogVis ? 1 : 0, transform: blogVis ? "none" : "translateY(20px)",
                transition: `opacity 0.5s ${i * 0.08}s var(--ease-spring), transform 0.5s ${i * 0.08}s var(--ease-spring)` }}
                onClick={() => onNav("blog")}>
                <Photo ratio="16/9" label={cat} style={{ borderRadius:0 }} />
                <div style={{ padding:"16px 18px" }}>
                  <span style={{ fontSize:10, fontWeight:700, letterSpacing:"0.06em", textTransform:"uppercase", color:"var(--omt-green-ink)", background:"rgba(4,175,143,0.08)", padding:"2px 7px", borderRadius:5 }}>{cat}</span>
                  <h3 style={{ margin:"8px 0 8px", fontSize:15, fontWeight:700, lineHeight:1.3, letterSpacing:"-0.01em" }}>{title}</h3>
                  <div style={{ fontSize:12, color:"var(--text-tertiary)", display:"flex", alignItems:"center", gap:4 }}>
                    <Icon name="clock" size={11}/> {read} čitanja
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FAQ TEASER ── */}
      <section ref={faqRef} style={{ padding:sectionPad, background:"var(--surface-1)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto",
          display:"grid", gridTemplateColumns:bp("1fr 1.4fr","1fr","1fr"), gap:bp(56,28,20), alignItems:"flex-start" }}>
          <div style={{ opacity: faqVis ? 1 : 0, transform: faqVis ? "none" : "translateX(-20px)",
            transition: "opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)" }}>
            <Eyebrow>Pitanja i odgovori</Eyebrow>
            <h2 style={{ margin:"12px 0 14px", fontSize:bp("clamp(22px,3vw,36px)","26px","22px"), fontWeight:800, letterSpacing:"-0.02em", lineHeight:1.1, textWrap:"balance" }}>Najčešća pitanja polaznika</h2>
            <p style={{ margin:"0 0 24px", fontSize:14, lineHeight:1.65, color:"var(--text-secondary)" }}>Odgovaramo na sve što Vas zanima pre nego što se prijavite.</p>
            <Button variant="primary" size="md" icon="arrowRight" onClick={() => onNav("faq")}>Sva pitanja i odgovori</Button>
          </div>
          <div style={{ display:"flex", flexDirection:"column", gap:12,
            opacity: faqVis ? 1 : 0, transform: faqVis ? "none" : "translateX(20px)",
            transition: "opacity 0.6s 0.1s var(--ease-spring), transform 0.6s 0.1s var(--ease-spring)" }}>
            {[
              ["Kome je obuka namenjena?", "Fizioterapeutima, lekarima, osteopatama, hiropraktičarima i studentima završnih godina."],
              ["Da li dobijam sertifikat?", "Da. Sertifikat OMT Centra sa opisom tehnika, satima prakse i QR kodom za verifikaciju."],
              ["Mogu li doći iz drugog grada?", "Svakako — dobar deo polaznika dolazi iz regiona. Pomažemo sa preporukama za smeštaj."],
            ].map(([q, a]) => (
              <div key={q} style={{ background:"#fff", borderRadius:14, padding:"16px 18px", border:"1px solid var(--border-subtle)" }}>
                <div style={{ fontSize:14, fontWeight:700, color:"var(--text-primary)", marginBottom:5 }}>{q}</div>
                <div style={{ fontSize:13, lineHeight:1.55, color:"var(--text-secondary)" }}>{a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section ref={testRef} style={{ padding:sectionPad }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <div style={{ textAlign:"center", marginBottom:36 }}>
            <Eyebrow>Utisci polaznika</Eyebrow>
            <h2 style={{ margin:"12px auto 0", fontSize:bp("clamp(24px,3vw,38px)","28px","24px"), fontWeight:800, letterSpacing:"-0.022em", lineHeight:1.1, maxWidth:400, textWrap:"balance" }}>Šta kažu naši polaznici?</h2>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","1fr","1fr"), gap:bp(20,16,14) }}>
            {testimonials.map((t, i) => (
              <div key={t.name} style={{ background:"#fff", borderRadius:18, padding:bp("24px 22px","20px","18px 16px"),
                boxShadow:"var(--shadow-card)",
                opacity: testVis ? 1 : 0, transform: testVis ? "none" : "translateY(20px)",
                transition: `opacity 0.55s ${0.1 * i}s var(--ease-spring), transform 0.55s ${0.1 * i}s var(--ease-spring)` }}>
                <Stars count={t.stars} total={5} />
                <p style={{ margin:"12px 0 16px", fontSize:14, lineHeight:1.65, color:"var(--text-secondary)", fontStyle:"italic" }}>"{t.text}"</p>
                <div style={{ display:"flex", alignItems:"center", gap:10 }}>
                  <div style={{ width:36, height:36, borderRadius:"50%", background:"linear-gradient(135deg,#04AF8F,#17A4B5)", display:"flex", alignItems:"center", justifyContent:"center", color:"#fff", fontSize:14, fontWeight:800 }}>{t.name[0]}</div>
                  <div>
                    <div style={{ fontSize:13, fontWeight:700, color:"var(--text-primary)" }}>{t.name}</div>
                    <div style={{ fontSize:11, color:"var(--text-tertiary)", marginTop:1 }}>{t.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA BANNER ── */}
      <section ref={ctaRef} style={{ padding:sectionPad }}>
        <div style={{ maxWidth:1320, margin:"0 auto" }}>
          <div style={{
            background:"linear-gradient(135deg,#0E1A17 0%,#122e27 60%,#0d2420 100%)",
            borderRadius:bp(28,22,20), padding:bp("56px 48px","40px 32px","32px 24px"),
            display:"grid", gridTemplateColumns:bp("1fr auto","1fr","1fr"), gap:bp(40,28,24), alignItems:"center",
            position:"relative", overflow:"hidden",
            opacity: ctaVis ? 1 : 0, transform: ctaVis ? "none" : "translateY(20px)",
            transition: "opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring)",
          }}>
            <div style={{ position:"absolute",top:-80,right:120,width:280,height:280,borderRadius:"50%",
              background:"radial-gradient(circle,rgba(4,175,143,0.18) 0%,transparent 70%)", pointerEvents:"none" }} />
            <div>
              <div style={{ fontSize:10, fontWeight:800, color:"var(--omt-green)", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:10 }}>Počni danas</div>
              <h2 style={{ margin:"0 0 12px", fontSize:bp("clamp(24px,3vw,38px)","28px","24px"), fontWeight:800, letterSpacing:"-0.024em", lineHeight:1.1, color:"#fff", textWrap:"balance" }}>Spreman/a za sledeći nivo?</h2>
              <p style={{ margin:0, fontSize:bp(15,14,14), lineHeight:1.6, color:"rgba(255,255,255,0.6)", maxWidth:440 }}>
                Zakaži besplatnu konsultaciju i saznaj koji modul odgovara tvom nivou.
              </p>
            </div>
            <div style={{ display:"flex", flexDirection:"column", gap:10, flexShrink:0, minWidth:isMobile ? "auto" : 200 }}>
              {!isMobile && <img src="assets/logomark.svg" alt="" style={{ width:52, margin:"0 auto", filter:"brightness(0) invert(1) opacity(0.25)", animation:"omt-float 4s ease-in-out infinite" }} />}
              <Button variant="primary" size={isMobile ? "md" : "lg"} icon="arrowRight" onClick={() => onNav("contact")} style={{ whiteSpace:"nowrap", justifyContent:"center" }}>Zakažite konsultaciju</Button>
              <Button variant="ghost" size="md" onClick={() => onNav("kursevi")} style={{ color:"#fff", borderColor:"rgba(255,255,255,0.2)", background:"rgba(255,255,255,0.07)", justifyContent:"center" }}>Pogledaj kurseve</Button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.HomePage = HomePage;