// Sections for Hair by Gra landing
// Hero, Services (with vertical marquee), Gallery, Testimonial, About, Contact, Footer.
// All visible copy is pulled from the i18n tree so the page is fully translatable
// (EN ↔ ES) via the LangSwitch in the nav.

const { useState, useEffect, useRef } = React;

// ─── Phone / social hrefs ────────────────────────────────────────────────────
const PHONE_RAW = "16313531176";
const PHONE_DISPLAY = "+1 (631) 353-1176";
const HREF_WHATSAPP = `https://wa.me/${PHONE_RAW}?text=${encodeURIComponent("Hi Gra! I'd like to book an appointment.")}`;
const HREF_SMS = `sms:+${PHONE_RAW}`;
const HREF_TEL = `tel:+${PHONE_RAW}`;
const HREF_IG = "https://www.instagram.com/hairby.gra/";
const HREF_FB = "https://www.facebook.com/100086197693655/about/";

// ─── Reveal-on-scroll ────────────────────────────────────────────────────────
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

// ─── Language switcher ───────────────────────────────────────────────────────
function LangSwitch({ className = "" }) {
  const { lang, setLang } = useI18n();
  const toggle = () => setLang(lang === "en" ? "es" : "en");
  return (
    <button
      className={`lang-switch ${className}`}
      onClick={toggle}
      aria-label={lang === "en" ? "Switch to Spanish" : "Cambiar a inglés"}
    >
      <span className={`seg ${lang === "en" ? "on" : ""}`}>EN</span>
      <span className={`seg ${lang === "es" ? "on" : ""}`}>ES</span>
    </button>
  );
}

// ─── Nav ─────────────────────────────────────────────────────────────────────
function Nav({ onBook, onOpenMenu }) {
  const { T } = useI18n();
  return (
    <div className="nav-shell">
      <nav className="shell nav">
        <a href="#top" className="nav-logo" aria-label="Hair by Gra">
          <img src="assets/logo-pink.png" alt="" className="brand-mark" />
        </a>
        <div className="nav-links">
          <a href="#services">{T.nav.services}</a>
          <a href="#gallery">{T.nav.gallery}</a>
          <a href="#about">{T.nav.about}</a>
          <a href="#contact">{T.nav.contact}</a>
          <LangSwitch />
          <button className="btn btn-primary" onClick={onBook} style={{ padding: "10px 18px", fontSize: 12 }}>
            {T.nav.book} <IconArrow size={14} />
          </button>
        </div>
        <button className="menu-btn" onClick={onOpenMenu} aria-label="Open menu">
          <IconMenu />
        </button>
      </nav>
    </div>
  );
}

function MobileMenu({ open, onClose, onBook }) {
  const { T } = useI18n();
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`}>
      <div className="mm-head">
        <span className="nav-logo" aria-label="Hair by Gra">
          <img src="assets/logo-pink.png" alt="" className="brand-mark" />
        </span>
        <button className="menu-btn" onClick={onClose} aria-label="Close menu">
          <IconX />
        </button>
      </div>
      <a href="#services" onClick={onClose}>{T.nav.services}</a>
      <a href="#gallery" onClick={onClose}>{T.nav.gallery}</a>
      <a href="#about" onClick={onClose}>{T.nav.about}</a>
      <a href="#contact" onClick={onClose}>{T.nav.contact}</a>
      <LangSwitch className="lang-switch-mobile" />
      <div style={{ marginTop: 24 }}>
        <button className="btn btn-primary" onClick={() => { onClose(); onBook(); }}>
          {T.nav.bookFull} <IconArrow size={14} />
        </button>
      </div>
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────────────
function Hero({ onBook }) {
  const { T } = useI18n();
  return (
    <section className="hero shell" id="top">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow-row">
            <span className="eyebrow">{T.hero.eyebrow}</span>
            <span style={{
              fontFamily: "var(--f-mono)", fontSize: 11, fontWeight: 500,
              letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--c-ink-3)"
            }}>
              {T.hero.byAppointment}
            </span>
          </div>
          <h1>
            {T.hero.headlineA}<br />
            <em>{T.hero.headlineB}</em>{T.hero.headlineBSuffix}<br />
            {T.hero.headlineC}<span className="amp">.</span>
          </h1>
          <p className="lede">{T.hero.lede}</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onBook}>
              {T.hero.ctaBook} <IconArrow size={14} />
            </button>
            <a className="btn btn-ghost" href="#services">
              {T.hero.ctaExplore}
            </a>
          </div>
        </div>

        <div className="hero-image-wrap">
          <img src="chair.png" alt="Hair by Gra studio" className="hero-photo" />
          <div className="badge" aria-label="Hair by Gra">
            <img src="assets/logo-black.png" alt="" className="badge-logo" />
          </div>
        </div>
      </div>

      <div className="hero-meta">
        {T.hero.stats.map((s, i) => (
          <div className="item" key={i}>
            <div className="k">{s.k}</div>
            <div className="v">{s.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Vertical marquee (inside Services) ──────────────────────────────────────
function VerticalMarquee() {
  const { T } = useI18n();
  const items = T.marquee;
  // Doubled track so the -50% translate loops seamlessly.
  const loop = [...items, ...items];
  return (
    <aside className="v-marquee-col" aria-hidden="true">
      <div className="v-marquee-track">
        {loop.map((t, i) => (
          <span key={i} className="v-marquee-item">{t}</span>
        ))}
      </div>
    </aside>
  );
}

// ─── Services ────────────────────────────────────────────────────────────────
function Services({ onBook }) {
  const wrap = useReveal();
  const { T } = useI18n();
  return (
    <section className="section section-tinted" id="services" ref={wrap}>
      <div className="shell services-shell">
        <div className="services-content">
          <div className="section-head reveal">
            <div>
              <span className="eyebrow">{T.services.eyebrow}</span>
              <h2>{T.services.titlePre} <em>{T.services.titleEm}</em></h2>
            </div>
            <p className="right">{T.services.intro}</p>
          </div>

          <div className="services reveal">
            {T.services.items.map((s) => (
              <div key={s.num} className="service-row" onClick={onBook} role="button" tabIndex={0}>
                <div className="svc-num">{s.num}</div>
                <div className="svc-name">{s.pre} <em>{s.em}</em></div>
                <div className="svc-desc">{s.desc}</div>
                <div className="svc-price">
                  <span className="from">{T.services.from}</span>{s.price}
                  <span style={{ display: "block", fontSize: 10, color: "var(--c-ink-3)", letterSpacing: ".1em", marginTop: 2, fontWeight: 500 }}>
                    {s.dur}
                  </span>
                </div>
                <div className="svc-arrow"><IconArrowUpRight size={20} /></div>
              </div>
            ))}
          </div>

          <div className="reveal" style={{ marginTop: 40, display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={onBook}>
              {T.services.cta} <IconArrow size={14} />
            </button>
          </div>
        </div>

        <VerticalMarquee />
      </div>
    </section>
  );
}

// ─── Gallery ─────────────────────────────────────────────────────────────────
// Tiles are matched to actual portfolio images in /hair, classified by what's
// visible in each photo (cool ash balayage, caramel highlights, bridal half-up,
// cherry-red lob, honey balayage, layered blowout, smoothing-treatment shine,
// silver layered short cut).
const TILES = [
  { cls: "g-1", cat: "Color",  src: "hair/cut1.png", tagEn: "Ash blonde balayage",   tagEs: "Balayage rubio ceniza" },
  { cls: "g-2", cat: "Bridal", src: "hair/cut4.png", tagEn: "Bridal half-up, braid", tagEs: "Novia, semirecogido con trenza" },
  { cls: "g-3", cat: "Cuts",   src: "hair/cut5.png", tagEn: "Cherry-red blunt lob",  tagEs: "Lob rojo cereza" },
  { cls: "g-4", cat: "Color",  src: "hair/cut2.png", tagEn: "Caramel highlights",    tagEs: "Mechas caramelo" },
  { cls: "g-5", cat: "Color",  src: "hair/cut6.png", tagEn: "Honey balayage",        tagEs: "Balayage miel" },
  { cls: "g-6", cat: "Cuts",   src: "hair/cut7.png", tagEn: "Layered cut, blowout",  tagEs: "Corte en capas, blowout" },
  { cls: "g-7", cat: "Cuts",   src: "hair/cut8.png", tagEn: "Smoothing treatment",   tagEs: "Tratamiento alisante" },
  { cls: "g-8", cat: "Cuts",   src: "hair/cut3.png", tagEn: "Silver layered short cut", tagEs: "Corte corto plateado" },
];

function Gallery() {
  const [active, setActive] = useState("All");
  const wrap = useReveal();
  const { T, lang } = useI18n();
  const tabs = [
    { key: "All", label: T.gallery.tabs.all },
    { key: "Color", label: T.gallery.tabs.color },
    { key: "Cuts", label: T.gallery.tabs.cuts },
    { key: "Bridal", label: T.gallery.tabs.bridal },
    { key: "Extensions", label: T.gallery.tabs.extensions },
  ];
  return (
    <section className="section" id="gallery" ref={wrap}>
      <div className="shell">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">{T.gallery.eyebrow}</span>
            <h2>{T.gallery.titlePre} <em>{T.gallery.titleEm}</em></h2>
          </div>
          <p className="right">
            {T.gallery.introA}
            <a href={HREF_IG} target="_blank" rel="noreferrer" style={{ color: "var(--c-ink)", textDecoration: "underline", textUnderlineOffset: "3px" }}>
              {T.gallery.introLink}
            </a>
            {T.gallery.introB}
          </p>
        </div>

        <div className="gallery-tabs reveal">
          {tabs.map((t) => (
            <button
              key={t.key}
              className={`gallery-tab ${active === t.key ? "active" : ""}`}
              onClick={() => setActive(t.key)}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="gallery-grid reveal">
          {TILES.map((tile, i) => {
            const dim = active !== "All" && tile.cat !== active;
            const tag = lang === "es" ? tile.tagEs : tile.tagEn;
            return (
              <div
                key={i}
                className={`g-item ${tile.cls}`}
                style={{ opacity: dim ? 0.25 : 1, filter: dim ? "grayscale(0.6)" : "none", transition: "opacity .3s, filter .3s" }}
              >
                <img src={tile.src} alt={tag} className="g-photo" loading="lazy" />
                <div className="g-caption">{tag}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Testimonial ─────────────────────────────────────────────────────────────
function Testimonial() {
  const wrap = useReveal();
  const { T } = useI18n();
  return (
    <section className="section section-tinted" ref={wrap}>
      <div className="shell">
        <div className="testimonial reveal">
          <div className="testimonial-quote">"</div>
          <span className="eyebrow">{T.testimonial.eyebrow}</span>
          <blockquote>
            {T.testimonial.quote.a}<em>{T.testimonial.quote.em}</em>{T.testimonial.quote.b}
          </blockquote>
          <cite>{T.testimonial.cite}</cite>
        </div>
      </div>
    </section>
  );
}

// ─── About ───────────────────────────────────────────────────────────────────
function About() {
  const wrap = useReveal();
  const { T } = useI18n();
  return (
    <section className="section" id="about" ref={wrap}>
      <div className="shell">
        <div className="about-grid">
          <div className="about-portrait reveal">
            <img src="gra.JPG" alt="Graciela Alvarado Rodríguez" className="about-photo" />
          </div>
          <div className="reveal">
            <span className="eyebrow">{T.about.eyebrow}</span>
            <h3 className="about-name">Graciela <em>Alvarado</em><br />Rodríguez</h3>
            <div className="about-role">{T.about.role}</div>
            <div className="about-body">
              <p>{T.about.bodyA}</p>
              <p>
                {T.about.bodyB.a}<em>{T.about.bodyB.em}</em>{T.about.bodyB.b}
              </p>
            </div>
            <div className="about-pull">
              "{T.about.pull}"
            </div>
            <div className="about-credentials">
              {T.about.creds.map((c, i) => (
                <div className="item" key={i}>
                  <div className="k">{c.k}</div>
                  <div className="v">{c.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Contact ─────────────────────────────────────────────────────────────────
function Contact({ onBook }) {
  const wrap = useReveal();
  const { T } = useI18n();
  return (
    <section className="section" id="contact" ref={wrap}>
      <div className="shell">
        <div className="contact-card reveal">
          <div>
            <span className="eyebrow contact-eyebrow">{T.contact.eyebrow}</span>
            <h2>{T.contact.titlePre} <em>{T.contact.titleEm}</em></h2>
            <p className="lede">{T.contact.lede}</p>
            <button className="btn btn-pink" onClick={onBook}>
              {T.contact.cta} <IconArrow size={14} />
            </button>
            <div style={{ marginTop: 28, fontFamily: "var(--f-mono)", fontWeight: 500, fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>
              <div>{T.contact.hoursA}</div>
              <div>{T.contact.hoursB}</div>
            </div>
          </div>

          <div className="contact-channels">
            <a className="channel whatsapp" href={HREF_WHATSAPP} target="_blank" rel="noreferrer">
              <span className="ic"><IconWhatsApp /></span>
              <span className="meta">
                <span className="label">{T.contact.ch.whatsapp}</span>
                <span className="val">{PHONE_DISPLAY}</span>
              </span>
              <span className="arrow"><IconArrowUpRight size={16} /></span>
            </a>
            <a className="channel text" href={HREF_SMS}>
              <span className="ic"><IconMessage /></span>
              <span className="meta">
                <span className="label">{T.contact.ch.text}</span>
                <span className="val">{PHONE_DISPLAY}</span>
              </span>
              <span className="arrow"><IconArrowUpRight size={16} /></span>
            </a>
            <a className="channel instagram" href={HREF_IG} target="_blank" rel="noreferrer">
              <span className="ic"><IconInstagram /></span>
              <span className="meta">
                <span className="label">{T.contact.ch.ig}</span>
                <span className="val">@hairby.gra</span>
              </span>
              <span className="arrow"><IconArrowUpRight size={16} /></span>
            </a>
            <a className="channel facebook" href={HREF_FB} target="_blank" rel="noreferrer">
              <span className="ic"><IconFacebook /></span>
              <span className="meta">
                <span className="label">{T.contact.ch.fb}</span>
                <span className="val">{T.contact.ch.fbVal}</span>
              </span>
              <span className="arrow"><IconArrowUpRight size={16} /></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────────────
function Footer() {
  const { T } = useI18n();
  return (
    <footer>
      <div className="shell footer-row">
        <div>© {new Date().getFullYear()} {T.footer.rights}</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a href={HREF_IG} target="_blank" rel="noreferrer">Instagram</a>
          <a href={HREF_FB} target="_blank" rel="noreferrer">Facebook</a>
          <a href={HREF_WHATSAPP} target="_blank" rel="noreferrer">WhatsApp</a>
        </div>
        <div>{T.footer.locale}</div>
      </div>
    </footer>
  );
}

// ─── Booking Modal ───────────────────────────────────────────────────────────
function BookingModal({ open, onClose }) {
  const { T } = useI18n();
  const [submitted, setSubmitted] = useState(false);
  const [via, setVia] = useState("text"); // "text" or "whatsapp" — drives success copy
  const [form, setForm] = useState({
    name: "", service: T.services.items[0].pre + " " + T.services.items[0].em, date: "", note: ""
  });

  // When language flips while modal is open, refresh the default service label.
  useEffect(() => {
    setForm((f) => ({
      ...f,
      service: T.services.items[0].pre + " " + T.services.items[0].em,
    }));
    // eslint-disable-next-line
  }, [T]);

  useEffect(() => {
    if (!open) {
      const t = setTimeout(() => setSubmitted(false), 320);
      return () => clearTimeout(t);
    }
  }, [open]);
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

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

  // Compose the message that will pre-fill SMS / WhatsApp.
  const composeBody = () => T.modal.msg(form);

  const sendVia = (channel) => (e) => {
    e.preventDefault();
    if (!form.name.trim()) return; // name is required, native validation handles UI
    const body = encodeURIComponent(composeBody());
    const url = channel === "whatsapp"
      ? `https://wa.me/${PHONE_RAW}?text=${body}`
      : `sms:+${PHONE_RAW}?&body=${body}`; // `?&` keeps both iOS and Android happy
    setVia(channel);
    // Open in a new tab (WhatsApp Web/desktop) or trigger handler (sms:)
    window.open(url, channel === "whatsapp" ? "_blank" : "_self");
    setSubmitted(true);
  };

  return (
    <div className={`modal-backdrop ${open ? "open" : ""}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close"><IconX size={18} /></button>

        {!submitted ? (
          <>
            <span className="eyebrow">{T.modal.eyebrow}</span>
            <h3>{T.modal.titlePre} <em>{T.modal.titleEm}</em></h3>
            <p className="lede">{T.modal.lede}</p>
            <form onSubmit={sendVia("text")}>
              <div className="field">
                <label>{T.modal.name}</label>
                <input type="text" required value={form.name} onChange={update("name")} placeholder={T.modal.namePh} />
              </div>
              <div className="field">
                <label>{T.modal.date}</label>
                <input type="date" value={form.date} onChange={update("date")} />
              </div>
              <div className="field">
                <label>{T.modal.service}</label>
                <select value={form.service} onChange={update("service")}>
                  {T.services.items.map((s, i) => {
                    const v = `${s.pre} ${s.em}`;
                    return <option key={i} value={v}>{v}</option>;
                  })}
                  <option>{T.modal.notSure}</option>
                </select>
              </div>
              <div className="field">
                <label>{T.modal.notes}</label>
                <textarea value={form.note} onChange={update("note")} placeholder={T.modal.notesPh} />
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap" }}>
                <button className="btn btn-primary" type="submit">
                  <IconMessage size={14} /> {T.modal.ctaSend}
                </button>
                <button className="btn btn-pink" type="button" onClick={sendVia("whatsapp")}>
                  <IconWhatsApp size={14} /> {T.modal.ctaWa}
                </button>
              </div>
            </form>
          </>
        ) : (
          <div className="modal-success">
            <div className="check"><IconCheck /></div>
            <h3>{T.modal.successPre} <em>{T.modal.successEm}</em></h3>
            <p className="lede" style={{ margin: "8px auto 24px", maxWidth: "34ch" }}>
              {T.modal.successLede(form.name)}
            </p>
            <button className="btn btn-ghost" onClick={onClose}>{T.modal.close}</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  Nav, MobileMenu, Hero, Services, Gallery, Testimonial,
  About, Contact, Footer, BookingModal, LangSwitch,
  HREF_WHATSAPP, HREF_SMS, HREF_TEL, HREF_IG, HREF_FB, PHONE_DISPLAY,
});