/* ========== Página CONTACTO ========== */
/* Reutiliza globals de components-v2.jsx: Nav, Cursor, Footer, SilencioSticky,
   ArrowNE, HoldingBrandName. Diseño según Web_Contactus (Figma). */

function navTo(id) {
  if (id === "contacto") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
  if (id === "nosotros")  { window.location.href = "nosotros.html"; return; }
  if (id === "servicios") { window.location.href = "servicios.html"; return; }
  if (id === "archivo" || id === "prensa") { window.location.href = "archivo.html"; return; }
  window.location.href = "La Chismosa.html";
}

/* ---------- Hero + formulario ---------- */
function ContactHero() {
  const lang = useLang();
  const onSubmit = (e) => {
    e.preventDefault();
    // TODO: conectar a backend / servicio de email
    alert(t("¡Gracias! Te responderemos muy pronto.", "Thank you! We'll get back to you very soon."));
  };
  return (
    <section id="top" className="contact-hero" data-navbg="light">
      <div className="contact-hero-bg">
        <img src="assets/contacto/hero.jpg" alt="" />
        <div className="contact-hero-shade" />
      </div>
      <div className="contact-hero-inner">
        <h1 className="contact-hero-title">{t("Y SÍ, NOS", "AND YES, WE")}<br />{t("ENCANTA", "LOVE")}<br />{t("HABLAR DE TI", "TALKING ABOUT YOU")}</h1>

        <form id="contacto-form" className="contact-form" onSubmit={onSubmit}>
          <input className="cf-field" type="text" name="nombre" placeholder={t("Nombre", "Name")} required />
          <input className="cf-field" type="email" name="email" placeholder={t("Correo electrónico", "Email")} required />
          <input className="cf-field" type="tel" name="telefono" placeholder={t("Teléfono", "Phone")} />
          <textarea className="cf-field cf-textarea" name="mensaje" placeholder={t("Mensaje", "Message")} rows="3" />
          <label className="cf-check">
            <input type="checkbox" required />
            <span>{t("He leído la política de privacidad y acepto el tratamiento de mis datos personales conforme a la misma.", "I have read the privacy policy and accept the processing of my personal data in accordance with it.")}</span>
          </label>
          <button type="submit" className="cf-submit">{t("Enviar", "Send")} <ArrowNE size={16} /></button>
        </form>
      </div>
    </section>
  );
}

/* ---------- Let's get social ---------- */
function LetsSocial() {
  const lang = useLang();
  const links = [
    { label: "INSTAGRAM", href: "https://www.instagram.com/lachismosacomunicacion/" },
    { label: "LINKEDIN",  href: "https://www.linkedin.com/company/la-chismosa-comunicaci%C3%B3n/" },
  ];
  return (
    <section className="social reveal">
      <div className="contact-inner">
        <p className="social-overline">LET'S GET SOCIAL</p>
        <div className="social-grid">
          {links.map((l, i) => (
            <a key={i} className="social-item" href={l.href} target="_blank" rel="noopener noreferrer">
              <span>{l.label}</span>
              <ArrowNE size={20} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Workspaces ---------- */
const WORKSPACES = [
  { code: "AGP",  city: "MÁLAGA | SPAIN",        role: "HEADQUARTERS",             roleEn: "HEADQUARTERS",             img: "assets/contacto/ws-agp.jpg" },
  { code: "MAD",  city: "MADRID | SPAIN",        role: "OFICINAS COORPORATIVAS",   roleEn: "CORPORATE OFFICES",        img: "assets/contacto/ws-mad.jpg" },
  { code: "CDMX", city: "MEXICO CITY | MEXICO",  role: "ÁREA TÉCNICA Y COMERCIAL", roleEn: "TECHNICAL & SALES AREA",   img: "assets/contacto/ws-cdmx.jpg" },
  { code: "CUN",  city: "CANCUN | MEXICO",       role: "ÁREA TÉCNICA Y COMERCIAL", roleEn: "TECHNICAL & SALES AREA",   img: "assets/contacto/ws-cun.jpg" },
  { code: "GIG",  city: "RIO DE JANEIRO | BRAZIL", role: "ÁREA TÉCNICA Y COMERCIAL", roleEn: "TECHNICAL & SALES AREA", img: "assets/contacto/ws-rio.jpg" },
  { code: "MIA",  city: "MIAMI | USA",           role: "COMING SOON",              roleEn: "COMING SOON",              img: "assets/contacto/ws-mia.jpg" },
  { code: "RUH",  city: "RIYADH | KSA",          role: "COMING SOON",              roleEn: "COMING SOON",              img: "assets/contacto/ws-ruh.jpg" },
];

function Workspaces() {
  const lang = useLang();
  const loop = [...WORKSPACES, ...WORKSPACES]; // duplicado para marquesina sin costuras
  return (
    <section className="workspaces reveal">
      <div className="contact-inner">
        <p className="workspaces-overline">STRATEGICALLY PRESENT ACROSS KEY HOSPITALITY DESTINATIONS</p>
        <div className="workspaces-viewport">
          <div className="workspaces-track">
            {loop.map((w, i) => (
              <article key={i} className="ws-card" aria-hidden={i >= WORKSPACES.length ? "true" : undefined}>
                <img src={w.img} alt="" loading="lazy" />
                <div className="ws-shade" />
                <div className="ws-content">
                  <span className="ws-code">{w.code}</span>
                  <span className="ws-city">{w.city}</span>
                  <span className="ws-role">{t(w.role, w.roleEn)}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- LittleBig World ---------- */
const LBWORLD = [
  { cat: "FOOD & BEVERAGE",        slug: "talentchef",  desc: "We design high-end culinary concepts for iconic hotels, blending strategy, creativity, and culinary precision.", img: "assets/Talent Chef.png" },
  { cat: "HOTELS BRANDS",          slug: "tailors",     desc: "We create hospitality brands with tailor made concepts aligned with identity, market, and guest experience.", img: "assets/tailor.png", imgPos: "center 10%" },
  { cat: "INTERIOR DESIGN & FF&E", slug: "guinda",      desc: "We design interiors and FF&E with contrast, emotion, and attention to detail bringing soul and coherence to every space.", img: "assets/guinda.png" },
  { cat: "ARCHITECTURE",           slug: "alia",        desc: "We develop soulful, adaptable, and concept-driven spaces where functionality, emotion, and form coexist.", img: "assets/Alia.png" },
  { cat: "ASSETS GUARDIANSHIP",    slug: "libo",        desc: "We enhance the value of hotel assets through strategy, operational insight, and high-level culinary expertise.", img: "assets/Libro.png" },
  { cat: "COMMUNICATION",          slug: "lachismosa",  desc: "We turn unseen narratives into memorable, elegant, luxury and emotionally resonant hospitality campaigns.", img: "assets/contacto/lbw-chismosa.jpg", current: true },
];

function LittleBigWorld() {
  const lang = useLang();
  return (
    <section className="lbworld reveal">
      <div className="contact-inner">
        <div className="lbworld-head">
          <img src="assets/logos/littlebigworld.png" className="lbworld-logo" alt="LittleBig World" />
          <p className="lbworld-claim">{t("UN SOLO PUNTO DE CONTACTO,", "ONE SINGLE POINT OF CONTACT,")}<br />{t("CERRAMOS EL CÍRCULO DE LA HOSPITALIDAD", "WE CLOSE THE CIRCLE OF HOSPITALITY")}</p>
        </div>

        <div className="lbworld-grid">
          {LBWORLD.map((b, i) => (
            <div key={i} className={`lbw-col${b.current ? " lbw-col--current" : ""}`}>
              <div className="lbw-cat">{b.cat}</div>
              <div className="lbw-brand"><HoldingBrandName slug={b.slug} /></div>
              <div className="lbw-thumb">
                <img src={b.img} alt="" loading="lazy"
                     style={b.imgPos ? { objectPosition: b.imgPos } : undefined} />
                {b.current && <span className="lbw-here">— You are here</span>}
              </div>
              <p className="lbw-desc">{b.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Root ---------- */
function ContactoPage() {
  const lang = useLang();
  const [introGone, setIntroGone] = React.useState(false);
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      {!introGone && <Intro onDone={() => setIntroGone(true)} />}
      <Cursor />
      <Nav active="contacto" />
      <ContactHero />
      <LetsSocial />
      <Workspaces />
      <LittleBigWorld />
      <Footer />
      <SilencioSticky />
    </>
  );
}

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