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

function FaqPage({ onNav }) {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [open, setOpen] = useStateFaq(0);
  const [heroRef, heroVis] = useReveal(0.05);
  const [faqsRef, faqsVis] = useReveal(0.1);
  const [ctaRef, ctaVis] = useReveal(0.2);

  const faqs = [
    ["Kome je obuka namenjena?",
     "Obuka je namenjena fizioterapeutima, lekarima, osteopatama, hiropraktičarima i studentima završnih godina srodnih medicinskih pravaca. Prethodno iskustvo nije obavezno, ali se program prilagođava Vašem nivou."],
    ["Kakav je format obuke?",
     "Obuka se održava jedan na jedan u našem centru u Beogradu. Svaki modul traje 1–3 dana, sa profesionalnim osteopatskim stolom i svom potrebnom opremom. Termini se dogovaraju prema Vašoj dostupnosti."],
    ["Šta je HVLA i da li je bezbedno?",
     "HVLA (High-Velocity Low-Amplitude) je kontrolisana manipulativna tehnika male amplitude i velike brzine. Individualna obuka omogućava postepeno savladavanje svih faza pokreta pre primene pune snage, što minimizuje rizike i razvija siguran pristup."],
    ["Da li dobijam sertifikat?",
     "Da. Po uspešno završenom modulu dobijate sertifikat OMT Centra sa spiskom ovladanih tehnika, brojem sati prakse i QR kodom za verifikaciju."],
    ["Koliko košta obuka i šta je uključeno?",
     "Cene po modulu kreću se od €600 do €880, zavisno od trajanja i složenosti. U cenu su uključeni: individualni rad sa instruktorom, materijali, praktikum, osteopatski sto i oprema, kao i sertifikat."],
    ["Mogu li doći iz drugog grada ili zemlje?",
     "Svakako — dobar deo naših polaznika dolazi iz regiona. Pomažemo sa preporukama za smeštaj u blizini centra. Termini se dogovaraju u blokovima da biste putovanje učinili isplativim."],
    ["Kako da se prijavim?",
     "Popunite prijavu na stranici Kontakt, pozovite 064 197 3737 ili pošaljite poruku na kontakt@omtcentar.rs. Javićemo se u roku od 24h da zakažemo besplatnu 20-minutnu konsultaciju."],
    ["Da li nudite samo kompletan program ili i pojedinačne module?",
     "Oba. Možete izabrati pojedinačni modul (npr. samo Lumbar Roll) ili prošireni kompletan program od 8 modula. Preporučujemo konsultaciju pre izbora, da bismo program prilagodili Vašim kliničkim potrebama."],
  ];

  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: 840, margin: "0 auto" }} 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",
          }}>
            <Eyebrow>Pitanja i odgovori</Eyebrow>
            <h1 style={{ margin: "14px 0 14px", fontSize: bp("clamp(30px,4vw,48px)","clamp(26px,5vw,36px)","clamp(22px,6vw,30px)"), lineHeight: 1.08, letterSpacing: "-0.028em", fontWeight: 800, textWrap: "balance" }}>
              Na sve što Vas zanima — jasni odgovori.
            </h1>
            <p style={{ fontSize: bp(17,15,14), lineHeight: 1.6, color: "var(--text-secondary)", margin: 0 }}>
              Ako ne nađete odgovor, pozovite 064 197 3737 ili zakažite konsultaciju.
            </p>
          </div>
        </div>
      </section>

      <section ref={faqsRef} style={{ padding: bp("0 32px 64px","0 24px 48px","0 20px 40px") }}>
        <div style={{ maxWidth: 840, margin: "0 auto", display: "flex", flexDirection: "column", gap: 10 }}>
          {faqs.map(([q, a], i) => (
            <div key={i} style={{
              background: "#fff", borderRadius: bp(18,16,14), boxShadow: "var(--shadow-card)", overflow: "hidden",
              opacity: faqsVis ? 1 : 0, transform: faqsVis ? "none" : "translateY(16px)",
              transition: `opacity 0.5s ${i * 0.05}s var(--ease-spring), transform 0.5s ${i * 0.05}s var(--ease-spring)`,
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: "100%", padding: bp("22px 26px","18px 22px","16px 18px"),
                display: "flex", justifyContent: "space-between", alignItems: "center",
                background: "transparent", border: 0, cursor: "pointer", fontFamily: "inherit",
                textAlign: "left", gap: 16,
              }}>
                <span style={{ fontSize: bp(17,15,14), fontWeight: 700, letterSpacing: "-0.01em", color: "var(--text-primary)" }}>{q}</span>
                <span style={{
                  width: 32, height: 32, borderRadius: "50%", flexShrink: 0,
                  background: open === i ? "var(--omt-green)" : "var(--surface-2)",
                  color: open === i ? "#fff" : "var(--text-primary)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  transition: "transform 200ms, background 200ms",
                  transform: open === i ? "rotate(45deg)" : "rotate(0)",
                }}>
                  <Icon name="plus" size={16}/>
                </span>
              </button>
              {open === i && (
                <div style={{ padding: bp("0 26px 24px","0 22px 20px","0 18px 18px"), fontSize: bp(15,14,14), lineHeight: 1.65, color: "var(--text-secondary)" }}>{a}</div>
              )}
            </div>
          ))}
        </div>
      </section>

      <section ref={ctaRef} style={{ padding: bp("0 32px 96px","0 24px 72px","0 20px 56px") }}>
        <div style={{
          maxWidth: 840, margin: "0 auto",
          background: "var(--omt-grad-soft)", borderRadius: bp(24,20,16), padding: bp(40,32,24), textAlign: "center",
          opacity: ctaVis ? 1 : 0, transform: ctaVis ? "none" : "translateY(20px)",
          transition: "opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring)",
        }}>
          <h3 style={{ margin: 0, fontSize: bp(22,20,18), fontWeight: 700, letterSpacing: "-0.015em" }}>Niste našli odgovor?</h3>
          <p style={{ margin: "8px 0 24px", fontSize: bp(15,14,14), color: "var(--text-secondary)" }}>
            Pozovite nas ili zakažite besplatnu 20-minutnu konsultaciju.
          </p>
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" iconLeft="phone" onClick={() => { window.location.href = "tel:+381641973737"; }}>064 197 3737</Button>
            <Button variant="secondary" icon="arrowRight" onClick={() => onNav("contact")}>Zakažite konsultaciju</Button>
          </div>
        </div>
      </section>
    </main>
  );
}
window.FaqPage = FaqPage;