/* ========== Página NOSOTROS ========== */
/* Reutiliza componentes globales definidos en components-v2.jsx:
   Nav, Cursor, Intro, QuoteSection, Holding, Footer, ArrowNE  */

/* ---------- Navegación multipágina ----------
   Nav llama onNav(id); aquí lo redirigimos a páginas reales.
   Mientras el resto de páginas no existan, caen en anclas de la home. */
function navTo(id) {
  if (id === "nosotros") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
  if (id === "top")      { window.location.href = "La Chismosa.html"; return; }
  const map = {
    servicios: "servicios.html",
    archivo:   "archivo.html",
    prensa:    "archivo.html",
    contacto:  "contacto.html",
  };
  window.location.href = map[id] || "La Chismosa.html";
}

/* ---------- Hero Nosotros (imagen a sangre) ---------- */
function NosHero() {
  return (
    <section id="top" className="nos-hero" data-navbg="light">
      <img src="assets/nosotros/hero.jpg" alt="" className="nos-hero-img" />
      <div className="nos-hero-dark" />
    </section>
  );
}

/* ---------- Titular "Chispa" + intro a dos columnas ---------- */
function ChispaIntro() {
  const lang = useLang();
  return (
    <section className="chispa reveal">
      <h1 className="chispa-title">
        <span className="chispa-l1">{t("SOMOS ", "WE ARE ")}<strong>{t("LA CHISPA", "THE SPARK")}</strong></span>
        <span className="chispa-l2">{t("QUE ", "THAT ")}<em>{t("PRENDE", "IGNITES")}</em></span>
        <span className="chispa-l3">{t("El Chisme", "The Buzz")}</span>
      </h1>
      <p className="chispa-overline">
        {t("COMUNICACIÓN ESPECIALIZADA EN HOSPITALITY, GASTRONOMÍA Y MARCAS QUE SABEN DEJAR HUELLA", "COMMUNICATIONS SPECIALIZED IN HOSPITALITY, GASTRONOMY AND BRANDS THAT KNOW HOW TO LEAVE A MARK")}
      </p>

      <div className="chispa-intro">
        <div className="chispa-col">
          <p>{t("laChismosa nace de una idea muy simple: las marcas que realmente dejan huella siempre terminan formando parte de la conversación.", "laChismosa was born from a very simple idea: the brands that truly leave a mark always end up becoming part of the conversation.")}</p>
          <p>{t("Trabajamos con hoteles, restaurantes y marcas que entienden que hoy la experiencia no termina en una mesa, una estancia o una apertura. Continúa en lo que las personas recuerdan, recomiendan y cuentan.", "We work with hotels, restaurants and brands that understand that today the experience doesn't end at a table, a stay or an opening. It continues in what people remember, recommend and talk about.")}</p>
        </div>
        <div className="chispa-col">
          <p>{t("Nos interesa la comunicación con intención. La que genera deseo sin hacer ruido, construye percepción sin forzarla y convierte historias en algo difícil de ignorar.", "We're interested in communication with intention. The kind that creates desire without making noise, builds perception without forcing it, and turns stories into something hard to ignore.")}</p>
          <p>{t("Porque sí: nos encanta hablar de marcas. Sobre todo de las que merecen quedarse en la conversación.", "Because yes: we love talking about brands. Especially the ones that deserve to stay in the conversation.")}</p>
        </div>
      </div>
    </section>
  );
}

/* ---------- Hospitality View — carrusel horizontal ---------- */
function getHView() {
  return [
    { tag: t("HOSPITALITY QUE DEJA HUELLA", "HOSPITALITY THAT LEAVES A MARK"),
      body: t("Entendemos la hospitalidad como una experiencia que también se comunica, se recuerda y se comparte.", "We see hospitality as an experience that is also communicated, remembered and shared."),
      img: "assets/nosotros/carrusel-1.jpg" },
    { tag: t("IRREVERENTES & ELEGANTES", "IRREVERENT & ELEGANT"),
      body: t("Desafiamos lo convencional sin perder sofisticación. Nos gusta la comunicación con carácter, intención y un punto de atrevimiento.", "We challenge the conventional without losing sophistication. We like communication with character, intention and a touch of daring."),
      img: "assets/nosotros/carrusel-2.jpg" },
    /* TODO: confirmar copy (3ª tarjeta cortada en el PDF) */
    { tag: t("DETALLISTAS POR NATURALEZA", "DETAIL-ORIENTED BY NATURE"),
      body: t("Con elegancia y precisión, cuidamos cada palabra y cada gesto, porque en hospitality el detalle no decora: define.", "With elegance and precision, we look after every word and every gesture, because in hospitality the detail doesn't decorate: it defines."),
      img: "assets/nosotros/carrusel-3.jpg" },
  ];
}

function HospitalityView() {
  const lang = useLang();
  const HVIEW = getHView();
  // Duplicamos el set para una marquesina continua sin costuras (-50%).
  const loop = [...HVIEW, ...HVIEW];
  return (
    <section className="hview reveal">
      <div className="hview-inner">
        <p className="hview-overline">{t("| HOSPITALITY VIEW", "| HOSPITALITY VIEW")}</p>
        <div className="hview-viewport">
          <div className="hview-track">
            {loop.map((c, i) => (
            <article key={i} className="hview-card" aria-hidden={i >= HVIEW.length ? "true" : undefined}>
              <div className="hview-thumb">
                <img src={c.img} alt="" loading="lazy" />
              </div>
              <h3 className="hview-tag">{c.tag}</h3>
              <p className="hview-body">{c.body}</p>
            </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Equipo ---------- */
function Team() {
  const lang = useLang();
  return (
    <section className="team" aria-label={t("Equipo", "Team")}>
      {/* Andrea — fondo burdeos, foto izquierda */}
      <div className="team-row team-andrea reveal">
        <div className="team-photo">
          <img src="assets/nosotros/andrea.jpg" alt="Andrea Blanco" loading="lazy" />
        </div>
        <div className="team-text">
          <h2 className="team-name">Andrea<br />Blanco</h2>
          <p className="team-role">CEO</p>
          <div className="team-bio">
            <p>{t("Andrea Blanco lidera laChismosa desde una visión donde la comunicación, la hospitalidad y la conversación van siempre de la mano.", "Andrea Blanco leads laChismosa from a vision where communication, hospitality and conversation always go hand in hand.")}</p>
            <p>{t("Con una mirada estratégica, intuitiva y profundamente conectada con el universo hospitality, dirige una agencia que entiende que hoy las marcas no solo necesitan visibilidad, sino una forma propia de permanecer en la conversación.", "With a strategic, intuitive eye that is deeply connected to the hospitality world, she leads an agency that understands that today brands don't just need visibility, but their own way of staying in the conversation.")}</p>
            <p>{t("Porque en laChismosa comunicar no consiste en hacer ruido, sino en construir percepción, deseo y relevancia alrededor de las historias correctas.", "Because at laChismosa, communicating isn't about making noise, but about building perception, desire and relevance around the right stories.")}</p>
          </div>
        </div>
      </div>

      {/* Antonio — fondo ivory, foto derecha */}
      <div className="team-row team-antonio reveal">
        <div className="team-text">
          <h2 className="team-name">Antonio<br />de Juan</h2>
          <p className="team-role">CO-FOUNDER &amp; CHAIRMAN</p>
          <div className="team-bio">
            <p>{t("Antonio de Juan forma parte del origen y la visión detrás de laChismosa, después de años desarrollando proyectos de hospitality y food & beverage en distintos mercados internacionales y algunos de los entornos más exigentes del sector.", "Antonio de Juan is part of the origin and the vision behind laChismosa, after years developing hospitality and food & beverage projects across different international markets and some of the most demanding environments in the sector.")}</p>
            <p>{t("Hoy impulsa laChismosa desde una mirada estratégica y global, entendiendo la comunicación como una parte esencial de la experiencia hospitality y de las marcas que quieren mantenerse relevantes en la conversación.", "Today he drives laChismosa from a strategic and global perspective, understanding communication as an essential part of the hospitality experience and of the brands that want to stay relevant in the conversation.")}</p>
          </div>
        </div>
        <div className="team-photo">
          <img src="assets/nosotros/antonio.jpg" alt="Antonio de Juan" loading="lazy" />
        </div>
      </div>
    </section>
  );
}

/* ---------- Root ---------- */
function Nosotros() {
  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.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      {!introGone && <Intro onDone={() => setIntroGone(true)} />}
      <Cursor />
      <Nav active="nosotros" onNav={navTo} />
      <NosHero />
      <ChispaIntro />
      <HospitalityView />
      <div className="nos-quote"><QuoteSection /></div>
      <Team />
      <Holding />
      <Footer />
      <SilencioSticky />
    </>
  );
}

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