/* ========== Página ARCHIVO / PRENSA ========== */
/* Reutiliza globals de components-v2.jsx: Nav, Cursor, Holding, Footer,
   SilencioSticky. Diseño según Web_Archivo (Figma 330-1128).
   Archivo y Prensa son la misma página. */

function navTo(id) {
  if (id === "archivo" || id === "prensa") { 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 === "top")       { window.location.href = "La Chismosa.html"; return; }
  if (id === "contacto")  { window.location.href = "contacto.html"; return; }
  window.location.href = "La Chismosa.html";
}

/* ---------- Noticia destacada (grande) ---------- */
const FEATURED = {
  outlet: "FORBES",
  region: () => t("ESPAÑA", "SPAIN"),
  title: () => t(
    "Así es Antonio de Juan, el desconocido empresario español que enamora las cadenas hoteleras americanas con sus conceptos gastronómicos",
    "This is Antonio de Juan, the unknown Spanish entrepreneur winning over American hotel chains with his culinary concepts"
  ),
  img: "assets/archivo/forbes.jpg",
};

/* ---------- Lista lateral (4) ---------- */
const FEATURED_SIDE = [
  { outlet: "EL CONFIDENCIAL", region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Marriott elige una firma española para crear el primer 'todo incluido' de un Ritz-Carlton", "Marriott chooses a Spanish firm to create the first 'all-inclusive' for a Ritz-Carlton"), img: "assets/archivo/confidencial.jpg" },
  { outlet: "AD",              region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Estos son los mejores destinos gastronómicos para 2024", "These are the best culinary destinations for 2024"), img: "assets/archivo/ad.jpg" },
  { outlet: "EL ESPAÑOL",      region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Talentchef, la consultora de grandes cadenas hoteleras que trabaja desde Estepona", "Talentchef, the consultancy for major hotel chains working out of Estepona"), img: "assets/archivo/espanol.jpg" },
  { outlet: "ELLE",            region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Las 6 ciudades españolas de moda donde comer muy bien y algunas direcciones recomendadas", "The 6 trending Spanish cities to eat exceptionally well, plus a few recommended spots"), img: "assets/archivo/elle.jpg" },
];

function FeaturedNews() {
  const lang = useLang();
  return (
    <section className="archivo-featured" data-navbg="light">
      <div className="archivo-inner">
        <p className="archivo-overline">{t("NUESTRAS NOTICIAS", "OUR NEWS")}</p>
        <h1 className="archivo-title">{t("DESTACADAS", "FEATURED NEWS")}</h1>

        <div className="featured-grid">
          <article className="featured-main">
            <img src={FEATURED.img} alt="" />
            <div className="featured-main-shade" />
            <div className="featured-main-text">
              <p className="fm-outlet">{FEATURED.outlet}</p>
              <p className="fm-region">{FEATURED.region()}</p>
              <p className="fm-title">{FEATURED.title()}</p>
            </div>
          </article>

          <div className="featured-list">
            {FEATURED_SIDE.map((n, i) => (
              <a key={i} href="#" className="featured-item" onClick={(e) => e.preventDefault()}>
                <div className="fi-thumb"><img src={n.img} alt="" loading="lazy" /></div>
                <div className="fi-text">
                  <p className="fi-outlet">{n.outlet}</p>
                  <p className="fi-region">{n.region()}</p>
                  <p className="fi-desc">{n.desc()}</p>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Latest News (grid + paginación) ---------- */
const LATEST = [
  { outlet: "THE HAPPENING",     region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Si la comida es prioridad en tus viajes, estos son los destinos que todo foodie tiene en su radar de 2024", "If food is a priority on your travels, these are the destinations every foodie has on their radar for 2024"), img: "assets/archivo/the-happening.jpg" },
  { outlet: "EL FINANCIERO",     region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Caribe Mexicano redefinirá los todo incluido", "The Mexican Caribbean will redefine the all-inclusive"), img: "assets/archivo/financiero.jpg" },
  { outlet: "RESTAURACIÓN NEWS", region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Aspectos que hay que tener en cuenta para que el servicio F&B en un hotel sea excepcional", "Key factors to make a hotel's F&B service exceptional"), img: "assets/archivo/restauracion.jpg" },
  { outlet: "DESARROLLO HOTELERO", region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Las últimas tendencias sobre el Food & Beverage en el sector hotelero", "The latest trends in Food & Beverage in the hotel sector"), img: "assets/archivo/desarrollo.jpg" },
  { outlet: "CANARIAS GOURMET",  region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Los pilares del servicio F&B en Hoteles según Antonio de Juan, un canario visionario", "The pillars of hotel F&B service according to Antonio de Juan, a visionary from the Canary Islands"), img: "assets/archivo/canarias.jpg" },
  { outlet: "CLUB DE GOURMETS",  region: () => t("ESPAÑA", "SPAIN"), desc: () => t("Innovación y excelencia en la industria Food & Beverage", "Innovation and excellence in the Food & Beverage industry"), img: "assets/archivo/club.jpg" },
];

function PagerArrow({ dir }) {
  return (
    <svg width="22" height="14" viewBox="0 0 22 14" fill="none" aria-hidden="true"
         style={{ transform: dir === "right" ? "none" : "scaleX(-1)" }}>
      <path d="M1 7h19M14 1l6 6-6 6" stroke="currentColor" strokeWidth="1.2"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const TOTAL_PAGES = 4;

function LatestNews() {
  const lang = useLang();
  const [page, setPage] = React.useState(1);
  // Solo hay 6 noticias: las rotamos por página para simular contenido distinto.
  const offset = (page - 1) % LATEST.length;
  const items = [...LATEST.slice(offset), ...LATEST.slice(0, offset)];
  const go = (p) => setPage(Math.max(1, Math.min(TOTAL_PAGES, p)));

  return (
    <section className="archivo-latest reveal">
      <div className="archivo-inner">
        <h2 className="latest-title">{t("ÚLTIMAS NOTICIAS", "LATEST NEWS")}</h2>
        <div className="latest-grid" key={page}>
          {items.map((n, i) => (
            <a key={i} href="#" className="latest-card" onClick={(e) => e.preventDefault()}>
              <div className="lc-thumb"><img src={n.img} alt="" loading="lazy" /></div>
              <h3 className="lc-title">{n.outlet}</h3>
              <p className="lc-region">{n.region()}</p>
              <p className="lc-desc">{n.desc()}</p>
            </a>
          ))}
        </div>

        <div className="latest-pager">
          <button className="pager-arrow" aria-label={t("Anteriores", "Previous")}
                  onClick={() => go(page - 1)} disabled={page === 1}>
            <PagerArrow dir="left" />
          </button>
          {Array.from({ length: TOTAL_PAGES }, (_, idx) => idx + 1).map((p) => (
            <React.Fragment key={p}>
              <span className={`pager-num${page === p ? " active" : ""}`} onClick={() => go(p)}>
                {String(p).padStart(2, "0")}
              </span>
              {page === p && <span className="pager-rule" />}
            </React.Fragment>
          ))}
          <button className="pager-arrow" aria-label={t("Siguientes", "Next")}
                  onClick={() => go(page + 1)} disabled={page === TOTAL_PAGES}>
            <PagerArrow dir="right" />
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Root ---------- */
function ArchivoPage() {
  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="archivo" />
      <FeaturedNews />
      <LatestNews />
      <Holding />
      <Footer />
      <SilencioSticky />
    </>
  );
}

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