/* global React, ReactDOM */
const { useState } = React;

function Home() {
  const chrome = window.useSiteChrome();
  const { openCard, setOpenCard, menuOpen, setMenuOpen, searchOpen, setSearchOpen, legalPage, setLegalPage, t, loading, loadError, loadGames } = chrome;
  const [age, setAge] = useState("all");
  const [q, setQ] = useState("");
  const AGES = window.AGES, I = window.I, Card = window.Card, NAV_ITEMS = window.NAV_ITEMS, navCount = window.navCount;

  if (loading) {
    return <div className="app-loading">Cargando actividades…</div>;
  }
  if (loadError) {
    return (
      <div className="app-error">
        <p>No se pudo cargar el contenido. Inténtalo de nuevo.</p>
        <button onClick={loadGames}>Reintentar</button>
      </div>
    );
  }

  const CARDS = window.CARDS;
  const norm = (s) => s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
  const matches = (c) => (age === "all" || c.ages.includes(age)) && (q.trim() === "" || norm(c.title).includes(norm(q)));

  return (
    <div>
      <window.SiteHeader active="home" q={q} setQ={setQ} searchOpen={searchOpen} setSearchOpen={setSearchOpen} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />

      <section className="hero">
        <div className="wrap hero__grid">
          <div className="reveal" style={{ animationDelay: ".05s" }}>
            <span className="eyebrow"><window.Pinwheel className="" /> +300 ideas probadas en familia</span>
            <h1>¿A qué <span className="hl">jugamos</span> hoy en familia?</h1>
            <p className="hero__sub">Juegos, manualidades y recetas fáciles, ordenadas por la edad de tus peques. Ideas sencillas para pasar más tiempo de calidad jugando en familia, sin pantallas.</p>
            <div className="agebox">
              <div className="agebox__q"><I.face /> ¿Qué edad tienen tus peques?</div>
              <div className="agechips">
                {AGES.map((a) => (
                  <button key={a.key} className="agechip" data-c={a.key} data-active={age === a.key} onClick={() => setAge(a.key)}>
                    {a.label}<small>{a.sub}</small>
                  </button>
                ))}
              </div>
            </div>
          </div>
          {t.heroFoto && (
            <div className="hero__visual reveal" style={{ animationDelay: ".18s" }}>
              <div className="hero__photo"><img className="hero__img" src="images/hero-xs.png" alt="Familia jugando" /></div>
              <span className="hero__sticker hero__sticker--tl">¡A jugar!</span>
              <span className="hero__sticker hero__sticker--br">Sin pantallas ✦</span>
            </div>
          )}
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="sechead">
            <div>
              <h2>Explora por <span className="accent">categoría</span></h2>
              <p>Elige un plan y descubre todas sus ideas en su propia página</p>
            </div>
          </div>
          <div className="catgrid">
            {NAV_ITEMS.map((item) => {
              const bgMap = { manualidades:"manualidades-clean", juegos:"juegos-clean", mesa:"mesa-clean", baraja:"baraja-clean", recetas:"recetas-clean", cuentos:"cuentos-clean" };
              const bg = bgMap[item.key];
              return (
                <a key={item.key} className={"catcard " + item.soft} href={item.href} style={bg ? { backgroundImage: `url(images/catcard-bg-${bg}.png)`, backgroundSize: "cover", backgroundPosition: "center" } : null}>
                  <span className="catcard__icon catcard__icon--img"><img src={item.img} alt="" width="220" height="220" decoding="async" /></span>
                  <div>
                    <h3>{item.label}</h3>
                    <span>{navCount(item)} ideas</span>
                  </div>
                  {!bg && <span className="catcard__deco"></span>}
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <div className="wrap adband"><window.AdSlot kind="leaderboard" show={t.mostrarAnuncios} /></div>

      <section className="section">
        <div className="wrap">
          <div className="sechead">
            <div>
              <h2>{age === "all" ? <>Novedades y <span className="accent">destacados</span></> : <>Destacados para <span className="accent">{AGES.find((a) => a.key === age).label} años</span></>}</h2>
              <p>{q ? `Buscando "${q}"` : "Una muestra de cada categoría"}</p>
            </div>
          </div>
          {NAV_ITEMS.map((item) => {
            let items;
            if (item.cats.length > 1) {
              items = item.cats.map(k => CARDS.find(c => c.cat === k && matches(c))).filter(Boolean);
              const rest = CARDS.filter(c => item.cats.includes(c.cat) && matches(c) && !items.includes(c));
              while (items.length < 3 && rest.length) items.push(rest.shift());
            } else {
              items = CARDS.filter(c => item.cats.includes(c.cat) && matches(c)).slice(0, 3);
            }
            if (items.length === 0) return null;
            return (
              <div key={item.key} style={{ marginBottom: 30 }}>
                <div className="section-header">
                  <span className="section-header__tag" style={{ background: item.color }}><item.Icon style={{ width:14, height:14 }} /> {item.label}</span>
                  <span className="section-header__line"></span>
                  <a href={item.href} className="seelink" style={{ marginLeft: "auto" }}>Ver todas <I.arrow /></a>
                </div>
                <div className="cardgrid">
                  {items.map(c => <Card key={c.id} c={c} hidden={false} afiliado={t.afiliado} onOpen={setOpenCard} />)}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <div className="wrap adband"><window.AdSlot kind="leaderboard" show={t.mostrarAnuncios} /></div>

      <window.SiteFooter onLegal={setLegalPage} />
      <window.MobileDrawer open={menuOpen} onClose={() => setMenuOpen(false)} />
      <window.SiteTweaksAndModals chrome={chrome} />
    </div>
  );
}

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