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

function KontaktPage() {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [sent, setSent] = useStateKo(false);
  const [loading, setLoading] = useStateKo(false);
  const [error, setError] = useStateKo(null);
  const [form, setForm] = useStateKo({ name: "", email: "", phone: "", profession: "", interest: "HVLA vratne kičme", message: "" });
  const [heroRef, heroVis] = useReveal(0.05);
  const [formRef, formVis] = useReveal(0.05);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const inp = { width:"100%", padding:"12px 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:600, color:"var(--text-secondary)", marginBottom:5 };

  return (
    <main>
      <section style={{ padding:bp("64px 32px 96px","48px 24px 72px","36px 20px 56px") }}>
        <div style={{ maxWidth:1120, margin:"0 auto", display:"grid", gridTemplateColumns:bp("1fr 1.2fr","1fr","1fr"), gap:bp(56,36,28) }}>
          <div ref={heroRef} 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>Kontakt</Eyebrow>
            <h1 style={{ margin:"12px 0 16px", fontSize:bp("clamp(26px,3.5vw,42px)","clamp(24px,4vw,34px)","clamp(22px,6vw,30px)"), fontWeight:800, letterSpacing:"-0.025em", lineHeight:1.1 }}>
              Zakažite besplatnu konsultaciju
            </h1>
            <p style={{ fontSize:bp(15,14,14), lineHeight:1.6, color:"var(--text-secondary)" }}>
              Razgovaramo o Vašem kliničkom iskustvu, oblastima u kojima želite dodatnu sigurnost i predlažemo plan prilagođen Vašim potrebama.
            </p>
            <div style={{ marginTop:28, display:"flex", flexDirection:"column", gap:16 }}>
              {[
                ["phone","064 197 3737","Radnim danima 9–17h","tel:+381641973737"],
                ["mail","kontakt@omtcentar.rs","Odgovaramo u roku od 24h","mailto:kontakt@omtcentar.rs"],
                ["mapPin","Beograd, Centar","Srbija",null],
              ].map(([ic, t, s, href]) => (
                <div key={t} style={{ display:"flex", gap:14, alignItems:"center" }}>
                  <div style={{ width:44, height:44, borderRadius:12, flexShrink:0, background:"linear-gradient(135deg,rgba(4,175,143,0.1),rgba(23,164,181,0.08))", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--omt-green-ink)" }}>
                    <Icon name={ic} size={18}/>
                  </div>
                  <div>
                    {href ? <a href={href} style={{ fontSize:15, fontWeight:700, textDecoration:"none", color:"var(--text-primary)" }}>{t}</a>
                           : <div style={{ fontSize:15, fontWeight:700 }}>{t}</div>}
                    <div style={{ fontSize:12, color:"var(--text-tertiary)", marginTop:1 }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop:32, padding:"20px 22px", background:"var(--omt-grad-soft)", borderRadius:16, border:"1px solid rgba(4,175,143,0.15)" }}>
              <div style={{ fontSize:12, fontWeight:700, color:"var(--omt-green-ink)", marginBottom:6 }}>WhatsApp — direktna rezervacija</div>
              <p style={{ margin:"0 0 12px", fontSize:12, color:"var(--text-secondary)", lineHeight:1.5 }}>Pošaljite nam poruku i javićemo se istog dana.</p>
              <a href="https://wa.me/381641973737" target="_blank" rel="noreferrer" style={{ textDecoration:"none" }}>
                <Button variant="primary" size="sm" iconLeft="whatsapp">WhatsApp</Button>
              </a>
            </div>
          </div>

          <div ref={formRef} style={{ opacity: formVis ? 1 : 0, transform: formVis ? "none" : "translateY(20px)", transition:"opacity 0.6s 0.1s var(--ease-spring), transform 0.6s 0.1s var(--ease-spring)" }}>
            <Card padding={bp(36,28,20)}>
              {sent ? (
                <div style={{ textAlign:"center", padding:"28px 0" }}>
                  <div style={{ width:60, height:60, borderRadius:"50%", background:"var(--omt-green)", color:"#fff", display:"inline-flex", alignItems:"center", justifyContent:"center", marginBottom:16 }}>
                    <Icon name="check" size={28}/>
                  </div>
                  <h2 style={{ margin:"0 0 8px", fontSize:22, fontWeight:700 }}>Hvala na prijavi.</h2>
                  <p style={{ fontSize:14, color:"var(--text-secondary)", lineHeight:1.55 }}>Javićemo se u roku od 24h da zakažemo konsultaciju.</p>
                  <Button variant="secondary" style={{ marginTop:18 }} onClick={() => { setSent(false); setForm({ name:"",email:"",phone:"",profession:"",interest:"HVLA vratne kičme",message:"" }); }}>Nova prijava</Button>
                </div>
              ) : (
                <form onSubmit={async e => {
                  e.preventDefault();
                  setLoading(true);
                  setError(null);
                  try {
                    const res = await fetch("/contact.php", {
                      method: "POST",
                      headers: { "Content-Type": "application/json" },
                      body: JSON.stringify(form),
                    });
                    const json = await res.json();
                    if (json.ok) { setSent(true); }
                    else { setError(json.error || "Greška pri slanju. Pokušajte ponovo."); }
                  } catch {
                    setError("Nema veze sa serverom. Pokušajte ponovo.");
                  } finally {
                    setLoading(false);
                  }
                }}>
                  <h2 style={{ margin:"0 0 20px", fontSize:bp(20,18,17), fontWeight:700 }}>Prijavite se</h2>
                  <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 123 4567"/></div>
                    <div style={{ gridColumn:bp("span 2","span 2","span 1") }}>
                      <label style={lbl}>Oblast interesovanja</label>
                      <select style={inp} value={form.interest} onChange={set("interest")}>
                        <option>HVLA vratne kičme</option><option>HVLA torakalne kičme</option>
                        <option>HVLA LS kičme (Lumbar / Chicago Roll)</option><option>SI zglob — Side Roll</option>
                        <option>Miofascijalno opuštanje</option><option>Visceralne tehnike</option>
                        <option>Kompletan program — 8 modula</option>
                      </select>
                    </div>
                    <div style={{ gridColumn:bp("span 2","span 2","span 1") }}>
                      <label style={lbl}>Poruka (opciono)</label>
                      <textarea style={{...inp, minHeight:90, resize:"vertical"}} value={form.message} onChange={set("message")} placeholder="Kratko o Vašem iskustvu…"/>
                    </div>
                  </div>
                  <label style={{ display:"flex", gap:8, alignItems:"flex-start", marginTop:14, fontSize:12, color:"var(--text-secondary)", lineHeight:1.5 }}>
                    <input type="checkbox" required defaultChecked style={{ accentColor:"var(--omt-green)", marginTop:2 }}/>
                    Saglasan sam sa obradom podataka u skladu sa politikom privatnosti.
                  </label>
                  {error && (
                    <div style={{ marginTop:14, padding:"10px 14px", background:"rgba(220,38,38,0.07)", border:"1px solid rgba(220,38,38,0.2)", borderRadius:8, fontSize:13, color:"#b91c1c" }}>
                      {error}
                    </div>
                  )}
                  <div style={{ marginTop:18 }}>
                    <Button variant="primary" size={isMobile?"md":"lg"} icon="arrowRight" disabled={loading}>
                      {loading ? "Slanje…" : "Pošaljite prijavu"}
                    </Button>
                  </div>
                </form>
              )}
            </Card>
          </div>
        </div>
      </section>
    </main>
  );
}
window.KontaktPage = KontaktPage;