/* global React, ReactDOM, I18N, LINKS, Icon, BrandMark,
   Hero, Services, Manifesto, MediaStrip, Process, FaqBook,
   AboutModal, TestimonialsModal, CredentialsModal */
const { useState, useEffect } = React;

/* ============== Nav ============== */
function Nav({ lang, setLang, t, openModal }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const close = () => setMenuOpen(false);
  const openM = (k) => { close(); openModal(k); };

  return (
    <>
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${menuOpen ? "menu-open" : ""}`}>
      <div className="wrap nav-row">
        <a className="brand" href="#top" onClick={close}>
          <BrandMark size={40} />
          <div className="brand-text">
            <span className="name">Guillermina Gómez</span>
            <span className="tag">{lang === "es" ? "psicoterapia online" : "online psychotherapy"}</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#servicios">{t.nav.services}</a>
          <button className="nav-linkbtn" onClick={() => openModal("about")}>{t.nav.about}</button>
          <button className="nav-linkbtn" onClick={() => openModal("testimonials")}>{lang === "es" ? "Opiniones" : "Reviews"}</button>
          <a href="#proceso">{t.nav.process}</a>
          <a href="#faq">{t.nav.faq}</a>
        </div>
        <div className="nav-right">
          <a className="ig-btn" href={LINKS.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram">{Icon.ig(18)}</a>
          <button className="lang-toggle" onClick={() => setLang(lang === "es" ? "en" : "es")} aria-label="Language">
            <span className="dot"></span>
            <span>{lang.toUpperCase()} <span style={{ opacity: .5 }}>/</span> {t.nav.lang}</span>
          </button>
          <a className="btn btn-sm nav-cta" href="#contacto">{t.nav.book} {Icon.arrow()}</a>
          <button className={`burger ${menuOpen ? "open" : ""}`} onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </nav>

    <div className={`mobile-menu ${menuOpen ? "open" : ""}`}>
      <div className="mm-inner">
        <a href="#servicios" onClick={close}>{t.nav.services}</a>
        <button className="mm-linkbtn" onClick={() => openM("about")}>{t.nav.about}</button>
        <button className="mm-linkbtn" onClick={() => openM("testimonials")}>{lang === "es" ? "Opiniones" : "Reviews"}</button>
        <a href="#proceso" onClick={close}>{t.nav.process}</a>
        <a href="#faq" onClick={close}>{t.nav.faq}</a>
        <a href="#contacto" onClick={close} className="mm-cta">{t.nav.book} {Icon.arrow()}</a>
        <a href={LINKS.instagram} target="_blank" rel="noopener noreferrer" onClick={close} className="mm-ig">{Icon.ig(18)} Instagram</a>
      </div>
    </div>
    </>);
}

/* ============== Footer ============== */
function Footer({ t, lang, openModal }) {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <BrandMark size={40} />
              <div>
                <div className="name">Guillermina Gómez</div>
                <div className="tagline">{t.footer.tagline}</div>
              </div>
            </div>
            <p style={{ marginTop: 24, fontSize: 13, color: "var(--ink-3)", maxWidth: "32ch" }}>
              {lang === "es" ?
                "Lic. María Guillermina Gómez. MP 47.834. Atención clínica online con base en Mar del Plata, Argentina." :
                "Lic. María Guillermina Gómez. MP 47.834. Online clinical practice based in Mar del Plata, Argentina."}
            </p>
          </div>
          <div className="footer-col">
            <h5>{t.footer.cols.explore}</h5>
            <ul>
              <li><a href="#servicios">{t.nav.services}</a></li>
              <li><button className="foot-linkbtn" onClick={() => openModal("about")}>{t.nav.about}</button></li>
              <li><button className="foot-linkbtn" onClick={() => openModal("testimonials")}>{lang === "es" ? "Opiniones" : "Reviews"}</button></li>
              <li><button className="foot-linkbtn" onClick={() => openModal("credentials")}>{lang === "es" ? "Formación" : "Training"}</button></li>
              <li><a href="#faq">{t.nav.faq}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>{t.footer.cols.legal}</h5>
            <ul>{t.footer.legal.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h5>{t.footer.cols.contact}</h5>
            <ul>
              <li><a href={`https://wa.me/${LINKS.whatsapp}`} target="_blank" rel="noopener noreferrer">WhatsApp</a></li>
              <li><a href={LINKS.instagram} target="_blank" rel="noopener noreferrer">Instagram {LINKS.igHandle}</a></li>
              <li><a href={`mailto:${LINKS.email}`}>{LINKS.email}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copy}</span>
          <span>{lang === "es" ? "Hecho con cuidado · Mar del Plata, AR" : "Made with care · Mar del Plata, AR"}</span>
        </div>
      </div>
    </footer>);
}

/* ============== App ============== */
function App() {
  const [lang, setLang] = useState(() => {
    const saved = typeof localStorage !== "undefined" && localStorage.getItem("gg_lang");
    return saved === "en" ? "en" : "es";
  });
  const [modal, setModal] = useState(null); // null | 'about' | 'testimonials' | 'credentials'
  const [cur, setCur] = useState(() => detectCurrency());

  useEffect(() => {
    try { localStorage.setItem("gg_lang", lang); } catch (_) {}
    document.documentElement.lang = lang;
  }, [lang]);
  useEffect(() => {
    try { localStorage.setItem("gg_cur", cur); } catch (_) {}
  }, [cur]);

  const t = I18N[lang];
  const openModal = (k) => setModal(k);
  const closeModal = () => setModal(null);

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={t} openModal={openModal} />
      <div className="intro-gradient">
        <Hero t={t} lang={lang} openModal={openModal} />
        <Services t={t} cur={cur} setCur={setCur} />
      </div>
      <MediaStrip t={t} lang={lang} />
      <Process t={t} />
      <FaqBook t={t} lang={lang} cur={cur} setCur={setCur} />
      <Footer t={t} lang={lang} openModal={openModal} />

      <AboutModal t={t} lang={lang} open={modal === "about"} onClose={closeModal} />
      <TestimonialsModal t={t} open={modal === "testimonials"} onClose={closeModal} />
      <CredentialsModal t={t} open={modal === "credentials"} onClose={closeModal} />

      <a className="fab-wa" href={`https://wa.me/${LINKS.whatsapp}?text=${encodeURIComponent(lang === "es" ? "Hola Guillermina, me gustaría agendar mi primera cita." : "Hi Guillermina, I'd like to book my first session.")}`} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">{Icon.wa(24)}</a>
    </>);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
