/* ========== Página SERVICIOS ========== */
/* Reutiliza globals de components-v2.jsx: Nav, Cursor, Holding, Footer,
   SilencioSticky, ArrowNE. Diseño según Web_Servicios (Figma 339-1580). */

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

/* ---------- Chevron derecho ---------- */
function Chevron({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         style={{ flexShrink: 0 }} aria-hidden="true">
      <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="1.4"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ---------- Hero ---------- */
function ServiciosHero() {
  const lang = useLang();
  return (
    <section id="top" className="serv-hero" data-navbg="dark">
      <div className="serv-hero-dark" />
      <div className="serv-hero-grid">
        <h1 className="serv-hero-heading">
          {t(
            "Estrategias de comunicación para marcas de lujo y hospitalidad: creativas, globales y con un enfoque elegante.",
            "Communication strategies for luxury and hospitality brands: creative, global and with an elegant touch."
          )}
        </h1>
        <div className="serv-hero-photo">
          <img src="assets/servicios/hero-foto.jpg" alt="" />
        </div>
      </div>
    </section>
  );
}

/* ---------- Lista de servicios ---------- */
function getServicios() {
  return [
    {
      nombre: t("Prensa", "Press"),
      tagline: t(
        "Lo que susurramos, se convierte en titular.",
        "What we whisper becomes a headline."
      ),
      texto: t(
        "Transformamos cada historia en noticia. Posicionamos tu marca donde todos miran y la hacemos brillar en los medios más relevantes.",
        "We turn every story into news. We position your brand where all eyes are and make it shine in the most relevant media."
      ),
    },
    {
      nombre: t("Influencer marketing", "Influencer Marketing"),
      tagline: t(
        "Ponemos tu marca en boca de todos.",
        "We get your brand on everyone's lips."
      ),
      texto: t(
        "Creamos conexiones auténticas con quienes realmente influyen, amplificando tu mensaje hasta convertirlo en tendencia.",
        "We build authentic connections with those who truly influence, amplifying your message until it becomes a trend."
      ),
    },
    {
      nombre: t("Estrategia Digital", "Digital Strategy"),
      tagline: t(
        "Para que te vean en todos lados.",
        "So you're seen everywhere."
      ),
      texto: t(
        "Diseñamos estrategias que conectan, posicionan y mantienen tu marca en el centro de la conversación digital.",
        "We design strategies that connect, position and keep your brand at the center of the digital conversation."
      ),
    },
    {
      nombre: t("Email Marketing", "Email Marketing"),
      tagline: t(
        "Campañas irresistibles, palomitas incluidas.",
        "Irresistible campaigns, popcorn included."
      ),
      texto: t(
        "Cada correo es una experiencia que engancha, sorprende y convierte. No mandamos emails, creamos expectativa.",
        "Every email is an experience that hooks, surprises and converts. We don't send emails, we create anticipation."
      ),
    },
    {
      nombre: t("Online Reputation", "Online Reputation"),
      tagline: t(
        "Sabemos lo que se dice de ti… y lo que realmente importa.",
        "We know what's said about you… and what really matters."
      ),
      texto: t(
        "Monitorizamos, interpretamos y actuamos para que tu marca siempre tenga la mejor versión de sí misma.",
        "We monitor, interpret and act so your brand always shows its best self."
      ),
    },
  ];
}

function ServicesList() {
  const lang = useLang();
  const SERVICIOS = getServicios();
  const [abierto, setAbierto] = React.useState(null);

  return (
    <section className="serv-list reveal">
      <ul className="serv-list-ul">
        {SERVICIOS.map((s, i) => {
          const isOpen = abierto === i;
          return (
            <li key={i} className={"serv-item" + (isOpen ? " is-open" : "")}>
              <button className="serv-item-head" aria-expanded={isOpen}
                      onClick={() => setAbierto(isOpen ? null : i)}>
                <span className="serv-item-name">{s.nombre}</span>
                <span className="serv-item-chevron"><Chevron /></span>
              </button>
              <div className="serv-item-panel">
                <div className="serv-item-panel-inner">
                  <p className="serv-item-tagline">{s.tagline}</p>
                  <p className="serv-item-text">{s.texto}</p>
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

/* ---------- CTA: Si el chisme importa ---------- */
function ChismeCTA() {
  const lang = useLang();
  return (
    <section className="chisme-cta">
      <div className="chisme-inner">
        <h2 className="chisme-headline">
          {t("Algunas ", "Some ")}<em>{t("historias,", "stories")}</em><br />
          {t("merecen ", "deserve ")}<em>{t("ser contadas.", "to be told.")}</em>
        </h2>
        <p className="chisme-sub">{t("Todo empieza con personas que entienden cómo dejar huella.", "It all starts with people who understand how to leave a mark.")}</p>
        <a className="chisme-mail" href="contacto.html">
          {t("CONTÁCTANOS", "CONTACT US")} <ArrowNE size={16} />
        </a>
      </div>
    </section>
  );
}

/* ---------- Root ---------- */
function ServiciosPage() {
  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="servicios" onNav={navTo} />
      <ServiciosHero />
      <ServicesList />
      <ChismeCTA />
      <Holding />
      <Footer />
      <SilencioSticky />
    </>
  );
}

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