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

  const principles = [
    ["01","Povratna informacija u realnom vremenu","Na grupnim kursevima instruktor ne može se posvetiti svakom polazniku. U individualnoj obuci prati položaj Vaših ruku, tela i pravac izvođenja tehnike.",
      [["Trenutna korekcija","Jasna povratna informacija o primenjenoj sili — odmah."],["Razvoj osećaja","Osetljivost na palpatorna ograničenja razvija se kroz vođenu praksu."]]],
    ["02","Personalizovani pristup","Svaki terapeut ima različitu građu i nivo snage. Tehnika prilagođena jednoj osobi može biti neadekvatna za drugu.",
      [["Mehanika tela","Prilagođavanje visine stola, stava i položaja Vašim karakteristikama."],["Dugovečnost","Učite da koristite težinu celog tela, a ne samo ruke."]]],
    ["03","Preciznije kliničko rezonovanje","Individualna obuka omogućava fokus na konkretne kliničke izazove i slučajeve iz prakse.",
      [["Prilagođen plan","Instruktor usmerava vreme ka oblastima gde Vam je potrebna sigurnost."],["Komunikacija","Vežbate kako da objasnite nalaze i plan lečenja pacijentima."]]],
    ["04","Bezbedno okruženje","Individualni rad uklanja pritisak grupe i omogućava postepeno savladavanje HVLA tehnika.",
      [["Smanjena anksioznost","Rad jedan na jedan znači opuštenije i efikasnije učenje."],["Kontrolisana praksa","Uvežbavate sve faze pokreta pre primene pune snage."]]],
  ];

  const [centerRef, centerVis] = useReveal(0.08);

  const courseCountries = [
    { flag:"🇷🇸", name:"Srbija" },
    { flag:"🇭🇺", name:"Mađarska" },
    { flag:"🇦🇹", name:"Austrija" },
  ];
  const instructorCountries = [
    { flag:"🇬🇧", name:"Engleska" },
    { flag:"🇳🇴", name:"Norveška" },
    { flag:"🇧🇷", name:"Brazil" },
    { flag:"🇵🇱", name:"Poljska" },
    { flag:"🇸🇮", name:"Slovenija" },
  ];

  return (
    <main>
      <section style={{ padding:bp("72px 32px 64px","56px 24px 48px","48px 20px 40px"), background:"linear-gradient(180deg,#F0FBF7 0%,#fff 100%)" }}>
        <div style={{ maxWidth:1320, margin:"0 auto",
          display:"grid", gridTemplateColumns:bp("1.1fr 1fr","1fr","1fr"), gap:bp(64,40,28), alignItems:"center" }}
          ref={heroRef}>
          <div style={{ opacity: heroVis ? 1 : 0, transform: heroVis ? "none" : "translateY(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 nama · Instruktor</Eyebrow>
            <h1 style={{ margin:"12px 0 18px", fontSize:bp("clamp(32px,4vw,52px)","clamp(28px,5vw,40px)","clamp(26px,7vw,36px)"), lineHeight:1.06, letterSpacing:"-0.028em", fontWeight:800, textWrap:"balance" }}>
              Aleksandar Bisić D.O.O.
            </h1>
            <p style={{ fontSize:bp(17,16,15), lineHeight:1.65, color:"var(--text-secondary)", margin:"0 0 16px" }}>
              Diplomirani osteopata i fizioterapeut specijalista. Osnivač OMT Centra —
              prostora za individualnu obuku iz osteopatske medicine, kiropraktike i manuelne terapije u Beogradu.
            </p>
            <p style={{ fontSize:bp(15,15,14), lineHeight:1.65, color:"var(--text-secondary)", margin:0 }}>
              Prava veština se razvija kroz vođenu praksu. Kod mene se radi jedan na jedan —
              sa punom pažnjom na položaj Vaših ruku, mehaniku tela i kontrolisano uvežbavanje HVLA tehnika.
            </p>
            <div style={{ marginTop:24, display:"flex", gap:24, flexWrap:"wrap", justifyContent: isMobile ? "center" : "flex-start" }}>
              {[["120+","polaznika"],["10+","godina prakse"],["15","tehnika"]].map(([b,s]) => (
                <div key={s}>
                  <div style={{ fontSize:bp(30,26,24), fontWeight:800, letterSpacing:"-0.02em",
                    background:"var(--omt-grad)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent" }}>{b}</div>
                  <div style={{ fontSize:12, color:"var(--text-tertiary)", marginTop:2, fontWeight:500 }}>{s}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop:28, display:"flex", gap:10, flexWrap:"wrap", justifyContent: isMobile ? "center" : "flex-start" }}>
              <Button variant="primary" size={isMobile?"md":"lg"} icon="arrowRight" onClick={() => onNav("contact")}>Prijavite se</Button>
              <Button variant="secondary" size={isMobile?"md":"lg"} iconLeft="phone" onClick={() => { window.location.href="tel:+381641973737"; }}>064 197 3737</Button>
            </div>
          </div>

          {!isMobile && (
            <div style={{ position:"relative", opacity: heroVis ? 1 : 0, transform: heroVis ? "none" : "translateX(24px)",
              transition: "opacity 0.65s 0.1s var(--ease-spring), transform 0.65s 0.1s var(--ease-spring)" }}>
              <img src="assets/omt-centar-grupna-fotografija-sertifikati-stepenice.jpeg"
                alt="Polaznici OMT Centra sa sertifikatima — Beograd"
                style={{ width:"100%", aspectRatio:"4/5", objectFit:"cover", borderRadius:22, display:"block" }} />
              <div style={{ position:"absolute", bottom:20, left:-24, width:210, background:"#fff", borderRadius:18, boxShadow:"var(--shadow-hover)", padding:16 }}>
                <div style={{ display:"flex", alignItems:"center", gap:10 }}>
                  <div style={{ width:36, height:36, borderRadius:"50%", background:"var(--omt-grad)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center" }}>
                    <Icon name="award" size={18}/>
                  </div>
                  <div>
                    <div style={{ fontSize:12, fontWeight:700 }}>Aleksandar Bisić D.O.O.</div>
                    <div style={{ fontSize:10, color:"var(--text-tertiary)" }}>Diplomirani osteopata</div>
                  </div>
                </div>
                <div style={{ height:1, background:"var(--border-subtle)", margin:"10px 0" }}/>
                <div style={{ fontSize:11, color:"var(--text-secondary)", lineHeight:1.5 }}>Specijalista fizioterapije · Osnivač OMT Centra</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* ── O OMT Centru ─────────────────────────────────────────── */}
      <section ref={centerRef} style={{ padding:bp("80px 32px 80px","60px 24px 60px","48px 20px 48px"), background:"var(--surface-1)", borderTop:"1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth:1080, margin:"0 auto" }}>
          <div style={{ opacity:centerVis?1:0, transform:centerVis?"none":"translateY(20px)", transition:"opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)" }}>
            <Eyebrow>O centru · Naša misija</Eyebrow>
            <h2 style={{ margin:"12px 0 28px", fontSize:bp("clamp(26px,3vw,40px)","clamp(24px,4vw,32px)","clamp(22px,6vw,28px)"), fontWeight:800, letterSpacing:"-0.025em", lineHeight:1.1, textWrap:"balance" }}>
              Vodeći centar za fizioterapeutsku edukaciju u regionu
            </h2>
          </div>

          <div style={{ display:"grid", gridTemplateColumns:bp("1.15fr 1fr","1fr","1fr"), gap:bp(64,40,32), alignItems:"flex-start" }}>
            {/* LEFT — tekst */}
            <div style={{ opacity:centerVis?1:0, transform:centerVis?"none":"translateY(20px)", transition:"opacity 0.6s 0.08s var(--ease-spring), transform 0.6s 0.08s var(--ease-spring)" }}>
              <p style={{ fontSize:bp(17,16,15), lineHeight:1.7, color:"var(--text-secondary)", margin:"0 0 18px" }}>
                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(17,16,15), lineHeight:1.7, color:"var(--text-secondary)", margin:"0 0 28px" }}>
                Do sada smo kurseve organizovali u Srbiji, Mađarskoj i Austriji, a u planu je proširenje aktivnosti i na druge zemlje u regionu. Posebno smo ponosni na naše instruktore — pored najvišeg nivoa akademskog znanja, poseduju i bogato međunarodno iskustvo. Deo našeg edukativnog tima su stručnjaci iz Engleske, Norveške, Brazila, Poljske i Slovenije.
              </p>

              {/* Zemlje kurseva */}
              <div style={{ marginBottom:24 }}>
                <div style={{ fontSize:11, fontWeight:700, letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--text-tertiary)", marginBottom:10 }}>Kursevi organizovani u</div>
                <div style={{ display:"flex", gap:10, flexWrap:"wrap" }}>
                  {courseCountries.map(c => (
                    <div key={c.name} style={{ display:"inline-flex", alignItems:"center", gap:7, background:"#fff", border:"1.5px solid var(--border-default)", borderRadius:100, padding:"6px 14px", fontSize:13, fontWeight:600, boxShadow:"var(--shadow-card)" }}>
                      <span style={{ fontSize:18 }}>{c.flag}</span> {c.name}
                    </div>
                  ))}
                </div>
              </div>

              {/* Zemlje instruktora */}
              <div>
                <div style={{ fontSize:11, fontWeight:700, letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--text-tertiary)", marginBottom:10 }}>Instruktori iz</div>
                <div style={{ display:"flex", gap:10, flexWrap:"wrap" }}>
                  {instructorCountries.map(c => (
                    <div key={c.name} style={{ display:"inline-flex", alignItems:"center", gap:7, background:"#fff", border:"1.5px solid var(--border-default)", borderRadius:100, padding:"6px 14px", fontSize:13, fontWeight:600, boxShadow:"var(--shadow-card)" }}>
                      <span style={{ fontSize:18 }}>{c.flag}</span> {c.name}
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* RIGHT — statistike */}
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:bp(16,14,12), opacity:centerVis?1:0, transform:centerVis?"none":"translateY(20px)", transition:"opacity 0.6s 0.16s var(--ease-spring), transform 0.6s 0.16s 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 }) => (
                <div key={label} style={{ background:"#fff", borderRadius:18, padding:bp("24px 20px","20px 16px","18px 14px"), boxShadow:"var(--shadow-card)", textAlign:"center" }}>
                  <div style={{ width:40, height:40, borderRadius:12, background:"linear-gradient(135deg,rgba(4,175,143,0.12),rgba(23,164,181,0.12))", 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,26), 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>
        </div>
      </section>

      {/* ── FOTO IZ KURSEVA ── */}
      <section style={{ padding:bp("0 32px 80px","0 24px 60px","0 20px 48px"), background:"var(--surface-1)" }}>
        <div style={{ maxWidth:1080, margin:"0 auto" }}>
          <div style={{ display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(3,1fr)","1fr"), gap:bp(14,12,10) }}>
            {[
              { src:"assets/omt-centar-grupna-fotografija-sertifikati-stepenice.jpeg", alt:"Polaznici sa sertifikatima — OMT Centar Beograd" },
              { src:"assets/omt-centar-ortopedska-medicina-sertifikati-grupna.jpeg", alt:"Ortopedska medicina kurs — grupna fotografija" },
              { src:"assets/omt-centar-medjunarodni-kurs-sertifikati-madarska.jpeg", alt:"Međunarodni kurs — polaznici sa sertifikatima" },
            ].map((img, i) => (
              <div key={i} style={{ borderRadius:bp(16,12,10), overflow:"hidden", aspectRatio:"4/3" }}>
                <img src={img.src} alt={img.alt} loading="lazy"
                  style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }}
                  onError={e => { e.target.style.display="none"; e.target.parentNode.style.background="var(--surface-2)"; }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      <section ref={principlesRef} style={{ padding:bp("80px 32px 96px","60px 24px 72px","48px 20px 56px") }}>
        <div style={{ maxWidth:1080, margin:"0 auto" }}>
          <div style={{ opacity: principlesVis ? 1 : 0, transform: principlesVis ? "none" : "translateY(18px)",
            transition: "opacity 0.55s var(--ease-spring), transform 0.55s var(--ease-spring)" }}>
            <Eyebrow>Kako radimo</Eyebrow>
            <h2 style={{ margin:"12px 0 36px", fontSize:bp("clamp(24px,3vw,36px)","28px","22px"), fontWeight:700, letterSpacing:"-0.02em", lineHeight:1.15 }}>
              Četiri principa koji definišu svaku obuku
            </h2>
          </div>
          <div style={{ display:"flex", flexDirection:"column", gap:28 }}>
            {principles.map(([n, title, lede, sub], idx) => (
              <div key={n} style={{
                display:"grid", gridTemplateColumns:bp("72px 1fr","60px 1fr","1fr"), gap:bp(24,20,0),
                paddingBottom:28, borderBottom:"1px solid var(--border-subtle)",
                opacity: principlesVis ? 1 : 0, transform: principlesVis ? "none" : "translateY(18px)",
                transition: `opacity 0.55s ${0.08 * idx}s var(--ease-spring), transform 0.55s ${0.08 * idx}s var(--ease-spring)` }}>
                <div style={{ fontSize:bp(44,36,32), fontWeight:800, letterSpacing:"-0.03em",
                  background:"var(--omt-grad)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent",
                  lineHeight:1, marginBottom: isMobile ? 8 : 0 }}>{n}</div>
                <div>
                  <h3 style={{ margin:"0 0 8px", fontSize:bp(22,20,18), fontWeight:700, letterSpacing:"-0.015em", lineHeight:1.2 }}>{title}</h3>
                  <p style={{ margin:"0 0 14px", fontSize:bp(15,14,14), lineHeight:1.65, color:"var(--text-secondary)" }}>{lede}</p>
                  <div style={{ display:"grid", gridTemplateColumns:bp("1fr 1fr","1fr 1fr","1fr"), gap:12 }}>
                    {sub.map(([h, b]) => (
                      <div key={h} style={{ padding:"12px 14px", background:"var(--surface-1)", borderRadius:10, border:"1px solid var(--border-subtle)" }}>
                        <div style={{ fontSize:12, fontWeight:700, color:"var(--text-primary)", marginBottom:3 }}>{h}</div>
                        <div style={{ fontSize:12, lineHeight:1.5, color:"var(--text-secondary)" }}>{b}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div ref={ctaRef} style={{ marginTop:40, textAlign:"center",
            opacity: ctaVis ? 1 : 0, transform: ctaVis ? "none" : "translateY(16px)",
            transition: "opacity 0.55s var(--ease-spring), transform 0.55s var(--ease-spring)" }}>
            <p style={{ fontSize:bp(18,16,15), lineHeight:1.55, fontStyle:"italic", color:"var(--text-primary)", maxWidth:680, margin:"0 auto 24px", fontWeight:500, textWrap:"balance" }}>
              "Ovakav pristup omogućava brži napredak, veću sigurnost u radu i kvalitetnije razumevanje osteopatskih principa."
            </p>
            <Button variant="primary" size={isMobile?"md":"lg"} icon="arrowRight" onClick={() => onNav("contact")}>Prijavite se</Button>
          </div>
        </div>
      </section>
    </main>
  );
}
window.ONamaPage = ONamaPage;