/* global React */
function ProgramPage({ onNav }) {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [heroRef, heroVis] = useReveal(0.05);
  const [modulesRef, modulesVis] = useReveal(0.1);
  const [ctaRef, ctaVis] = useReveal(0.15);

  const modules = [
    ["01", "Uvod", "Teorijske osnove osteopatske medicine, istorijski razvoj i savremena primena."],
    ["02", "Indikacije", "Kliničke indikacije za manualnu terapiju. Kada primeniti koju tehniku."],
    ["03", "Kontraindikacije", "Apsolutne i relativne kontraindikacije. Bezbednosni protokoli."],
    ["04", "Osteopatski testovi", "Sistematska procena kičme i perifernih zglobova. Palpatorna dijagnostika."],
    ["05", "Mobilizacione tehnike", "Spore, ritmičke tehnike za povećanje opsega pokreta."],
    ["06", "Manipulativne tehnike", "HVLA manipulacije — visoko precizne, male amplitude, velike brzine."],
    ["07", "Miofascijalno opuštanje", "Tehnike za oslobađanje fascijalnih restrikcija."],
    ["08", "Visceralne tehnike", "Generalne visceralne osteopatske tehnike za organski sistem."],
  ];

  return (
    <main>
      <section style={{ padding:bp("64px 32px 48px","48px 24px 36px","40px 20px 32px"), background:"linear-gradient(180deg,#F0FBF7 0%,#fff 100%)" }}>
        <div style={{ maxWidth:1280, 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>Program obuke</Eyebrow>
            <h1 style={{ margin:"12px 0 18px", fontSize:bp("clamp(32px,4vw,52px)","clamp(28px,5vw,40px)","clamp(24px,7vw,34px)"), lineHeight:1.08, letterSpacing:"-0.025em", fontWeight:800 }}>
              Osam modula.<br/>Od teorije do prirodne veštine.
            </h1>
            <p style={{ fontSize:bp(17,16,15), lineHeight:1.6, color:"var(--text-secondary)", maxWidth:640, margin:0 }}>
              Kompletan program obuhvata osnove, dijagnostiku, mobilizaciju, HVLA manipulacije i visceralne tehnike.
              Svaki modul se prilagođava Vašem iskustvu i tempu.
            </p>
          </div>
        </div>
      </section>

      <section ref={modulesRef} style={{ padding:bp("48px 32px 64px","36px 24px 48px","28px 20px 40px") }}>
        <div style={{ maxWidth:1280, margin:"0 auto", display:"grid", gridTemplateColumns:bp("repeat(2,1fr)","repeat(2,1fr)","1fr"), gap:bp(20,16,14) }}>
          {modules.map(([n, title, desc], i) => (
            <div key={n} style={{ background:"#fff", borderRadius:18, padding:bp("24px 24px","20px","18px 16px"),
              boxShadow:"var(--shadow-card)", display:"flex", gap:bp(20,16,14),
              opacity: modulesVis ? 1 : 0, transform: modulesVis ? "none" : "translateY(20px)",
              transition: `opacity 0.5s ${Math.floor(i/2)*0.09+(i%2)*0.04}s var(--ease-spring), transform 0.5s ${Math.floor(i/2)*0.09+(i%2)*0.04}s var(--ease-spring)` }}>
              <div style={{ fontSize:bp(30,26,24), fontWeight:800, letterSpacing:"-0.02em",
                background:"var(--omt-grad)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent",
                width:bp(56,48,44), flexShrink:0, lineHeight:1.1 }}>{n}</div>
              <div>
                <h3 style={{ margin:"0 0 6px", fontSize:bp(18,16,15), fontWeight:700, letterSpacing:"-0.012em" }}>{title}</h3>
                <p style={{ margin:0, fontSize:bp(14,13,13), lineHeight:1.55, color:"var(--text-secondary)" }}>{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section ref={ctaRef} style={{ padding:bp("0 32px 96px","0 24px 72px","0 20px 56px") }}>
        <div style={{
          maxWidth:1280, margin:"0 auto",
          background:"var(--omt-grad-soft)", borderRadius:bp(28,22,18), padding:bp("48px 48px","36px 28px","28px 20px"),
          display:"grid", gridTemplateColumns:bp("1fr 1fr","1fr","1fr"), gap:bp(40,28,24), alignItems:"center",
          opacity: ctaVis ? 1 : 0, transform: ctaVis ? "none" : "translateY(20px)",
          transition: "opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)" }}>
          <div style={{ textAlign: isMobile ? "center" : "left", display:"flex", flexDirection:"column", alignItems: isMobile ? "center" : "flex-start" }}>
            <Eyebrow>Format obuke</Eyebrow>
            <h2 style={{ margin:"10px 0 12px", fontSize:bp(30,26,22), fontWeight:700, letterSpacing:"-0.02em", lineHeight:1.2 }}>
              1 na 1 · 2 dana po modulu · Beograd
            </h2>
            <p style={{ fontSize:bp(15,14,14), lineHeight:1.6, color:"var(--text-secondary)", marginBottom:22 }}>
              Obuka se održava u našem centru, sa profesionalnim osteopatskim stolom.
              Raspored se dogovara prema Vašoj dostupnosti.
            </p>
            <Button variant="primary" size={isMobile?"md":"lg"} icon="arrowRight" onClick={() => onNav("contact")}>Zakažite konsultaciju</Button>
          </div>
          <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:12 }}>
            {["Povratna informacija u realnom vremenu","Prilagođena mehanika tela","Kontrolisana praksa pre pune snage","Rad sa stvarnim kliničkim slučajevima","Sertifikat po završetku modula"].map(x => (
              <li key={x} style={{ display:"flex", gap:10, alignItems:"flex-start", fontSize:bp(14,14,13), fontWeight:500 }}>
                <div style={{ width:22, height:22, borderRadius:"50%", background:"var(--omt-grad)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 }}>
                  <Icon name="check" size={12}/>
                </div>
                {x}
              </li>
            ))}
          </ul>
        </div>
      </section>
    </main>
  );
}
window.ProgramPage = ProgramPage;