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

function CourseDetailPage({ course, onNav }) {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [sent, setSent] = useStateCd(false);
  const [form, setForm] = useStateCd({ name: "", email: "", phone: "", profession: "", message: "" });
  const [heroRef, heroVis] = useReveal(0.02);
  const [bodyRef, bodyVis] = useReveal(0.05);
  const [formRef, formVis] = useReveal(0.05);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  if (!course) {
    return (
      <main style={{ padding:"120px 24px", textAlign:"center" }}>
        <h2 style={{ fontSize:24, fontWeight:700, marginBottom:16 }}>Kurs nije pronađen.</h2>
        <Button variant="primary" onClick={() => onNav("kursevi")}>Pogledaj sve kurseve</Button>
      </main>
    );
  }

  const inp = { width:"100%", padding:"11px 14px", fontSize:14, fontFamily:"inherit", border:"1.5px solid var(--border-default)", borderRadius:8, outline:0, background:"#fff", color:"var(--text-primary)", transition:"all 150ms" };
  const lbl = { display:"block", fontSize:11, fontWeight:700, color:"var(--text-secondary)", marginBottom:6, letterSpacing:"0.04em", textTransform:"uppercase" };

  const curriculum = course.curriculum || ["Anatomija i biomehanika regiona","Palpatorna dijagnostika","Indikacije i kontraindikacije","Osnove pozicioniranja pacijenta","Vođena praksa tehnika","Klinički slučajevi i primena","Komunikacija sa pacijentom"];
  const infoRows = [
    { icon:"calendar", label:"Datum početka", value:course.startDate || "Termin na dogovor" },
    { icon:"mapPin",   label:"Lokacija",     value:course.location  || "OMT Centar · Beograd, Centar" },
    { icon:"clock",    label:"Trajanje",      value:course.duration + (course.hours ? " · " + course.hours : "") },
    { icon:"user",     label:"Predavač",      value:course.instructor || "Aleksandar Bisić D.O.O." },
    { icon:"users",    label:"Format",        value:course.spots || "1-na-1 individualna obuka" },
    { icon:"grad",     label:"Nivo",          value:course.level },
    { icon:"shield",   label:"Prijave do",    value:course.deadline || "5 dana pre početka kursa" },
  ];

  return (
    <main>
      {/* HERO */}
      <section style={{ position:"relative", overflow:"hidden" }}>
        {course.imageUrl ? (
          <div style={{ position:"absolute", inset:0 }}>
            <img src={course.imageUrl} alt={course.title} style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }}/>
            <div style={{ position:"absolute", inset:0, background:"linear-gradient(135deg,rgba(14,26,23,0.9) 0%,rgba(14,26,23,0.75) 60%,rgba(14,26,23,0.6) 100%)" }}/>
          </div>
        ) : (
          <div style={{ position:"absolute", inset:0, background:"linear-gradient(135deg,#0E1A17 0%,#122e27 55%,#0d2420 100%)" }}>
            <div style={{ position:"absolute",top:-80,right:-60,width:360,height:360,borderRadius:"50%", background:"radial-gradient(circle,rgba(4,175,143,0.16) 0%,transparent 70%)", pointerEvents:"none" }} />
          </div>
        )}
        <div style={{ position:"relative", padding:bp("72px 32px 56px","56px 24px 44px","44px 20px 36px") }}>
          <div style={{ maxWidth:1320, margin:"0 auto" }} ref={heroRef}>
            <button onClick={() => onNav("kursevi")} style={{ display:"inline-flex", alignItems:"center", gap:7, background:"rgba(255,255,255,0.08)", border:"1px solid rgba(255,255,255,0.15)", borderRadius:100, padding:"7px 14px", color:"rgba(255,255,255,0.75)", fontSize:12, fontWeight:600, cursor:"pointer", fontFamily:"inherit", marginBottom:24 }}>
              <Icon name="chevronLeft" size={13}/> Svi kursevi
            </button>
            <div style={{ opacity: heroVis ? 1 : 0, transform: heroVis ? "none" : "translateY(20px)", transition:"opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)" }}>
              {isMobile && (
                <div style={{ background:"rgba(255,255,255,0.08)", border:"1px solid rgba(255,255,255,0.12)", borderRadius:16, padding:"20px 18px", marginBottom:24 }}>
                  <div style={{ fontSize:28, fontWeight:800, letterSpacing:"-0.03em", background:"linear-gradient(90deg,#04AF8F,#17A4B5)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent" }}>{course.price}</div>
                  <div style={{ fontSize:11, color:"rgba(255,255,255,0.45)", marginBottom:12 }}>po modulu · uključen sertifikat</div>
                  <Button variant="primary" size="md" icon="arrowRight" style={{ width:"100%", justifyContent:"center" }} onClick={() => document.getElementById("reservationForm").scrollIntoView({ behavior:"smooth" })}>Rezerviši mesto</Button>
                </div>
              )}
              <div style={{ display:"grid", gridTemplateColumns:bp("1fr auto","1fr","1fr"), gap:bp(40,28,0), alignItems:"flex-start" }}>
                <div style={{ textAlign: isMobile ? "center" : "left", display:"flex", flexDirection:"column", alignItems: isMobile ? "center" : "flex-start" }}>
                  {course.badge && <span style={{ display:"inline-block", background:"var(--omt-green)", color:"#fff", fontSize:10, fontWeight:700, padding:"3px 10px", borderRadius:100, letterSpacing:"0.06em", textTransform:"uppercase", marginBottom:12 }}>{course.badge}</span>}
                  <div style={{ fontSize:10, fontWeight:700, color:"rgba(4,175,143,0.9)", letterSpacing:"0.08em", textTransform:"uppercase", marginBottom:8 }}>{course.region}</div>
                  <h1 style={{ margin:"0 0 16px", fontSize:bp("clamp(26px,3.5vw,48px)","clamp(24px,4vw,36px)","clamp(22px,6vw,30px)"), fontWeight:800, letterSpacing:"-0.025em", lineHeight:1.08, color:"#fff", textWrap:"balance" }}>{course.title}</h1>
                  <p style={{ margin:0, fontSize:bp(16,15,14), lineHeight:1.65, color:"rgba(255,255,255,0.65)", maxWidth:540 }}>{course.description}</p>
                </div>
                {!isMobile && (
                  <div style={{ background:"rgba(255,255,255,0.07)", border:"1px solid rgba(255,255,255,0.12)", borderRadius:18, padding:"24px 28px", minWidth:220, flexShrink:0 }}>
                    <div style={{ fontSize:bp(34,30,28), fontWeight:800, letterSpacing:"-0.03em", background:"linear-gradient(90deg,#04AF8F,#17A4B5)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent", marginBottom:3 }}>{course.price}</div>
                    <div style={{ fontSize:11, color:"rgba(255,255,255,0.45)", marginBottom:16 }}>po modulu · uključen sertifikat</div>
                    <Stars count={5} total={5} />
                    <div style={{ fontSize:11, color:"rgba(255,255,255,0.4)", marginTop:3, marginBottom:16 }}>Prosečna ocena polaznika</div>
                    <Button variant="primary" size="md" icon="arrowRight" style={{ width:"100%", justifyContent:"center" }} onClick={() => document.getElementById("reservationForm").scrollIntoView({ behavior:"smooth" })}>Rezerviši mesto</Button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* BODY */}
      <section style={{ padding:bp("56px 32px","44px 24px","36px 20px") }}>
        <div style={{ maxWidth:1320, margin:"0 auto", display:"grid", gridTemplateColumns:bp("1fr 340px","1fr","1fr"), gap:bp(48,28,24), alignItems:"flex-start" }} ref={bodyRef}>
          <div style={{ opacity: bodyVis ? 1 : 0, transform: bodyVis ? "none" : "translateY(20px)", transition:"opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)" }}>
            <Eyebrow>Program kursa</Eyebrow>
            <h2 style={{ margin:"12px 0 20px", fontSize:bp(26,22,20), fontWeight:700, letterSpacing:"-0.018em" }}>Šta se uči na kursu?</h2>
            <div style={{ display:"flex", flexDirection:"column", gap:10, marginBottom:40 }}>
              {curriculum.map((item, i) => (
                <div key={i} style={{ display:"flex", alignItems:"flex-start", gap:12, padding:"14px 16px", background:"var(--surface-1)", borderRadius:12, border:"1px solid var(--border-subtle)" }}>
                  <div style={{ width:24, height:24, borderRadius:7, flexShrink:0, background:"linear-gradient(135deg,rgba(4,175,143,0.15),rgba(23,164,181,0.1))", display:"flex", alignItems:"center", justifyContent:"center" }}>
                    <Icon name="check" size={12} color="var(--omt-green)" />
                  </div>
                  <div style={{ fontSize:bp(14,13,13), fontWeight:500, color:"var(--text-primary)", lineHeight:1.4, paddingTop:1 }}>{item}</div>
                </div>
              ))}
            </div>

            {course.techniques && course.techniques.length > 0 && (
              <div style={{ marginBottom:36 }}>
                <Eyebrow>Tehnike</Eyebrow>
                <h2 style={{ margin:"12px 0 16px", fontSize:bp(24,20,18), fontWeight:700, letterSpacing:"-0.015em" }}>Savladane tehnike</h2>
                <div style={{ display:"flex", gap:8, flexWrap:"wrap" }}>
                  {course.techniques.map(t => (
                    <span key={t} style={{ background:"rgba(4,175,143,0.1)", color:"#02604F", border:"1px solid rgba(4,175,143,0.2)", fontSize:13, fontWeight:600, padding:"7px 14px", borderRadius:100 }}>{t}</span>
                  ))}
                </div>
              </div>
            )}

            <div style={{ background:"var(--omt-grad-soft)", borderRadius:18, padding:bp("24px 28px","20px 22px","18px 18px"), display:"flex", gap:16, alignItems:"center" }}>
              <div style={{ width:52, height:52, borderRadius:"50%", flexShrink:0, background:"linear-gradient(135deg,#04AF8F,#17A4B5)", display:"flex", alignItems:"center", justifyContent:"center", color:"#fff", fontSize:22, fontWeight:800 }}>A</div>
              <div>
                <div style={{ fontSize:15, fontWeight:700, marginBottom:2 }}>Aleksandar Bisić D.O.O.</div>
                <div style={{ fontSize:12, color:"var(--text-secondary)", marginBottom:7 }}>Diplomirani osteopata · Fizioterapeut specijalista · 10+ godina iskustva</div>
                <div style={{ display:"flex", gap:5, flexWrap:"wrap" }}>
                  {["Osteopatija","HVLA","Visceralne tehnike"].map(t => (
                    <span key={t} style={{ fontSize:10, fontWeight:600, padding:"2px 8px", borderRadius:100, background:"rgba(4,175,143,0.12)", color:"#02604F" }}>{t}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Sticky info — desktop/tablet only */}
          {!isMobile && (
            <div style={{ position:"sticky", top:100, opacity: bodyVis ? 1 : 0, transform: bodyVis ? "none" : "translateX(20px)", transition:"opacity 0.6s 0.1s var(--ease-spring), transform 0.6s 0.1s var(--ease-spring)" }}>
              <div style={{ background:"#fff", borderRadius:18, boxShadow:"var(--shadow-card)", padding:"24px 22px" }}>
                <Eyebrow>Detalji kursa</Eyebrow>
                <div style={{ marginTop:14, display:"flex", flexDirection:"column", gap:14 }}>
                  {infoRows.map(({ icon, label, value }) => (
                    <div key={label} style={{ display:"flex", gap:10, alignItems:"flex-start" }}>
                      <div style={{ width:32, height:32, borderRadius:9, flexShrink:0, background:"linear-gradient(135deg,rgba(4,175,143,0.1),rgba(23,164,181,0.08))", display:"flex", alignItems:"center", justifyContent:"center" }}>
                        <Icon name={icon} size={14} color="var(--omt-green)" />
                      </div>
                      <div>
                        <div style={{ fontSize:10, fontWeight:700, color:"var(--text-tertiary)", letterSpacing:"0.04em", textTransform:"uppercase", marginBottom:2 }}>{label}</div>
                        <div style={{ fontSize:13, fontWeight:600, color:"var(--text-primary)" }}>{value}</div>
                      </div>
                    </div>
                  ))}
                </div>
                <div style={{ height:1, background:"var(--border-subtle)", margin:"18px 0" }}/>
                <Button variant="primary" size="md" icon="arrowRight" style={{ width:"100%", justifyContent:"center" }} onClick={() => document.getElementById("reservationForm").scrollIntoView({ behavior:"smooth" })}>Rezervišite mesto</Button>
                <div style={{ marginTop:10, textAlign:"center", fontSize:11, color:"var(--text-tertiary)" }}>Besplatna konsultacija pre upisa</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Info table on mobile */}
      {isMobile && (
        <section style={{ padding:"0 20px 28px" }}>
          <div style={{ background:"#fff", borderRadius:16, boxShadow:"var(--shadow-card)", padding:"20px 18px" }}>
            <Eyebrow>Detalji kursa</Eyebrow>
            <div style={{ marginTop:12, display:"flex", flexDirection:"column", gap:12 }}>
              {infoRows.map(({ icon, label, value }) => (
                <div key={label} style={{ display:"flex", gap:10, alignItems:"center" }}>
                  <div style={{ width:30, height:30, borderRadius:8, flexShrink:0, background:"rgba(4,175,143,0.1)", display:"flex", alignItems:"center", justifyContent:"center" }}>
                    <Icon name={icon} size={13} color="var(--omt-green)" />
                  </div>
                  <div>
                    <div style={{ fontSize:10, fontWeight:700, color:"var(--text-tertiary)", textTransform:"uppercase", letterSpacing:"0.04em" }}>{label}</div>
                    <div style={{ fontSize:13, fontWeight:600, color:"var(--text-primary)" }}>{value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* FORM */}
      <section id="reservationForm" ref={formRef} style={{ padding:bp("0 32px 96px","0 24px 72px","0 20px 56px"), background:"var(--surface-1)" }}>
        <div style={{ maxWidth:680, margin:"0 auto", paddingTop:56,
          opacity: formVis ? 1 : 0, transform: formVis ? "none" : "translateY(20px)",
          transition:"opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)",
          textAlign: isMobile ? "center" : "left" }}>
          <Eyebrow>Rezervacija</Eyebrow>
          <h2 style={{ margin:"12px 0 6px", fontSize:bp(28,24,22), fontWeight:800, letterSpacing:"-0.02em" }}>Pošaljite zahtev za rezervaciju</h2>
          <p style={{ margin:"0 0 28px", fontSize:14, color:"var(--text-secondary)", lineHeight:1.6 }}>Javićemo se u roku od 24h da potvrdimo termin.</p>

          {sent ? (
            <div style={{ textAlign:"center", padding:"40px 24px", background:"#fff", borderRadius:18, boxShadow:"var(--shadow-card)" }}>
              <div style={{ width:64, height:64, borderRadius:"50%", background:"var(--omt-green)", color:"#fff", display:"inline-flex", alignItems:"center", justifyContent:"center", marginBottom:18 }}>
                <Icon name="check" size={32}/>
              </div>
              <h3 style={{ margin:"0 0 8px", fontSize:22, fontWeight:700 }}>Zahtev primljen!</h3>
              <p style={{ margin:"0 0 22px", fontSize:14, color:"var(--text-secondary)" }}>Javićemo se na {form.email || "Vašu email adresu"} u roku od 24h.</p>
              <div style={{ display:"flex", gap:10, justifyContent:"center", flexWrap:"wrap" }}>
                <Button variant="secondary" onClick={() => setSent(false)}>Novi zahtev</Button>
                <Button variant="primary" icon="arrowRight" onClick={() => onNav("kursevi")}>Svi kursevi</Button>
              </div>
            </div>
          ) : (
            <div style={{ background:"#fff", borderRadius:18, boxShadow:"var(--shadow-card)", padding:bp("32px 32px","28px 24px","22px 18px"), textAlign:"left" }}>
              <div style={{ marginBottom:14, padding:"10px 14px", background:"rgba(4,175,143,0.08)", borderRadius:9, display:"flex", alignItems:"center", gap:8 }}>
                <Icon name="book" size={14} color="var(--omt-green)" />
                <span style={{ fontSize:12, fontWeight:600, color:"var(--omt-green-ink)" }}>Kurs: {course.title}</span>
              </div>
              <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
                <div style={{ display:"grid", gridTemplateColumns:bp("1fr 1fr","1fr 1fr","1fr"), gap:14 }}>
                  <div><label style={lbl}>Ime i prezime</label><input style={inp} required value={form.name} onChange={set("name")} placeholder="Milan Jovanović"/></div>
                  <div><label style={lbl}>Profesija</label><input style={inp} required value={form.profession} onChange={set("profession")} placeholder="Fizijatar…"/></div>
                  <div><label style={lbl}>Email</label><input type="email" style={inp} required value={form.email} onChange={set("email")} placeholder="milan@klinika.rs"/></div>
                  <div><label style={lbl}>Telefon</label><input style={inp} required value={form.phone} onChange={set("phone")} placeholder="+381 64…"/></div>
                  <div style={{ gridColumn:bp("span 2","span 2","span 1") }}>
                    <label style={lbl}>Napomena (opciono)</label>
                    <textarea style={{...inp, minHeight:80, resize:"vertical"}} value={form.message} onChange={set("message")} placeholder="Iskustvo, pitanja…"/>
                  </div>
                </div>
                <label style={{ display:"flex", gap:9, alignItems:"flex-start", marginTop:14, fontSize:12, color:"var(--text-secondary)", lineHeight:1.5 }}>
                  <input type="checkbox" required style={{ accentColor:"var(--omt-green)", marginTop:2 }}/>
                  Saglasan sam sa obradom podataka u skladu sa politikom privatnosti OMT Centra.
                </label>
                <div style={{ marginTop:18 }}>
                  <Button variant="primary" size={isMobile?"md":"lg"} icon="arrowRight">Pošaljite zahtev</Button>
                </div>
              </form>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}
window.CourseDetailPage = CourseDetailPage;