/* ASTRA — pantalla Home / Cartelera */
function Hero({ movies, active, onSelect, onOpen, paused, onPause, onResume }) {
  const n = movies.length;
  const trackRef = useRef(null);
  const startX = useRef(null);
  const [drag, setDrag] = useState(0);     // px que sigue al dedo
  const [dragging, setDragging] = useState(false);

  const onTouchStart = (e) => {
    startX.current = e.touches[0].clientX;
    setDragging(true);
    onPause(); // evita que el autoplay salte mientras arrastras
  };
  const onTouchMove = (e) => {
    if (startX.current == null) return;
    let d = e.touches[0].clientX - startX.current;
    // resistencia (rubber-band) al arrastrar más allá del primero/último
    if ((active === 0 && d > 0) || (active === n - 1 && d < 0)) d *= 0.3;
    setDrag(d);
  };
  const onTouchEnd = (e) => {
    if (startX.current == null) return;
    const dx = e.changedTouches[0].clientX - startX.current;
    startX.current = null;
    setDragging(false);
    setDrag(0);
    onResume();
    const w = trackRef.current ? trackRef.current.offsetWidth : 320;
    const threshold = Math.min(70, w * 0.16);
    if (dx <= -threshold && active < n - 1) onSelect(active + 1);
    else if (dx >= threshold && active > 0) onSelect(active - 1);
  };

  return (
    <section className={"hero" + (paused ? " paused" : "")} onMouseEnter={onPause} onMouseLeave={onResume}
             onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd}>
      <div className="hero-track" ref={trackRef}
           style={{ transform: `translateX(calc(${-active * 100}% + ${drag}px))`,
                    transition: dragging ? "none" : "transform .45s var(--ease)" }}>
        {movies.map((m) => (
          <div className="hero-slide" key={m.id}
               style={{ background: `linear-gradient(120deg, ${m.tint[0]}, ${m.tint[1]})` }}>
            <div className="hero-bg">
              {m.backdrop && <img className="hero-bg-img" src={m.backdrop} alt="" draggable="false" />}
            </div>
            <div className="hero-scrim" />
            <div className="wrap hero-inner">
              <div className="hero-copy">
                <div className="hero-eyebrows">
                  <span className="badge" style={{ color: "var(--gold)", borderColor: "rgba(233,185,77,.45)", background: "rgba(233,185,77,.07)" }}>
                    <Ico d={PATHS.star} size={12} sw={0} style={{ color: "var(--gold)" }} /> Estreno destacado
                  </span>
                  <span className="badge">{m.releaseLabel}</span>
                </div>
                <h1 className="hero-title">{m.title}</h1>
                <p className="hero-tag">{m.tagline}</p>
                <div className="hero-meta soft row gap12" style={{ flexWrap: "wrap" }}>
                  <span className={"rating " + m.rating}>{m.rating}</span>
                  <span>{m.genre.join(" · ")}</span>
                  <span className="dot-sep">·</span>
                  <span>{fmtDur(m.duration)}</span>
                  <span className="dot-sep">·</span>
                  <span>Dir. {m.director}</span>
                </div>
                <div className="row gap12" style={{ marginTop: 30, flexWrap: "wrap" }}>
                  <button className="btn btn-gold btn-lg" onClick={() => onOpen(m)}>
                    <Ico d={PATHS.ticket} size={18} /> Comprar boletos
                  </button>
                  <button className="btn btn-ghost btn-lg" onClick={() => onOpen(m)}>
                    <Ico d={PATHS.play} size={16} sw={0} style={{ color: "var(--gold)" }} /> Ver tráiler
                  </button>
                </div>
                <div className="hero-formats">
                  <span className="lbl">Disponible en</span>
                  <Formats list={m.formats} />
                </div>
              </div>

              <div className="hero-poster-wrap">
                <Poster movie={m} slotId={"hero-poster-" + m.id} />
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="hero-rail">
        <div className="wrap">
          {movies.map((m, i) => (
            <button key={m.id} className={"hero-thumb" + (i === active ? " on" : "")} onClick={() => onSelect(i)}>
              <span className="hero-thumb-art" style={{ background: `linear-gradient(150deg, ${m.tint[0]}, ${m.tint[1]})` }}>
                {m.poster && <img src={m.poster} alt="" loading="lazy" />}
              </span>
              <span className="hero-thumb-txt">
                <b>{m.title}</b>
                <span>{m.releaseLabel}</span>
              </span>
              {i === active && movies.length > 1 && <span className="hero-thumb-prog" key={active} />}
            </button>
          ))}
        </div>
      </div>

      {/* Barra de progreso deslizable (vista móvil): reemplaza los cuadros del rail */}
      <div className="hero-progress">
        {movies.map((m, i) => (
          <button key={m.id} className={"hp-seg" + (i === active ? " on" : "")}
                  onClick={() => onSelect(i)} aria-label={"Ver " + m.title}>
            {i === active && <span className="hp-fill" key={active} />}
          </button>
        ))}
      </div>
    </section>
  );
}

function Filters({ genres, active, onPick }) {
  return (
    <div className="filters">
      <button className={"chip" + (active === "Todas" ? " on" : "")} onClick={() => onPick("Todas")}>Todas</button>
      {genres.map((g) => (
        <button key={g} className={"chip" + (active === g ? " on" : "")} onClick={() => onPick(g)}>{g}</button>
      ))}
    </div>
  );
}

function HomeScreen({ data, onOpen, section, cinema, onPickShowtime, onCinema, candyCart = {}, setCandyCart, onOpenAccount }) {
  const heroMovies = useMemo(() => {
    const hero = data.movies.find((m) => m.hero);
    const rest = data.movies.filter((m) => m.premiere && !m.hero);
    return [hero, ...rest].filter(Boolean).slice(0, 4);
  }, [data]);
  const [heroIdx, setHeroIdx] = useState(0);
  const [heroPaused, setHeroPaused] = useState(false);

  useEffect(() => {
    if (heroMovies.length < 2 || heroPaused) return;
    const t = setInterval(() => setHeroIdx((i) => (i + 1) % heroMovies.length), 6000);
    return () => clearInterval(t);
  }, [heroIdx, heroMovies.length, heroPaused]);

  const dates = useMemo(() => data.dateChips(7), [data]);
  const [dateKey, setDateKey] = useState(dates[0].key);
  const activeDate = dates.find((d) => d.key === dateKey) || dates[0];
  const dateLabel = activeDate === dates[0] ? "Hoy" : `${activeDate.day} ${activeDate.mon}`;

  const genres = useMemo(() => {
    const s = new Set();
    data.movies.forEach((m) => m.genre.forEach((g) => s.add(g)));
    return [...s];
  }, [data]);
  const [genre, setGenre] = useState("Todas");
  const list = genre === "Todas" ? data.movies : data.movies.filter((m) => m.genre.includes(genre));

  const pickTime = (movie, fmt, time) => onPickShowtime({ movie, date: dateKey, fmt, time, cinema });

  useEffect(() => {
    if (!section) return;
    const el = document.getElementById("sec-" + section);
    if (el) window.scrollTo({ top: el.offsetTop - 84, behavior: "smooth" });
  }, [section]);

  const expCards = [
    ["Sala íntima", "Una sola sala de 100 butacas: cada función se siente exclusiva.", "var(--gold)", PATHS.film],
    ["Bistró en tu butaca", "Comida y bebida de verdad, servidas directo en tu asiento.", "var(--ember)", PATHS.pop],
    ["Frente al mar", "El cine de Playa Hermosa: una noche de cine y playa en un solo lugar.", "#4db8a8", PATHS.pin],
    ["Eventos privados", "Rentá la sala completa para tu empresa, grupo o celebración.", "#9c6cff", PATHS.present],
  ];

  // Filtros de dulcería
  const [candyCategory, setCandyCategory] = useState("all");
  const candyCats = [
    { id: "all", name: "Todos" },
    { id: "combos", name: "Combos" },
    { id: "palomitas", name: "Palomitas" },
    { id: "bebidas", name: "Bebidas" },
    { id: "nachos", name: "Nachos" },
    { id: "dulces", name: "Dulces" }
  ];

  const filteredCandy = useMemo(() => {
    if (candyCategory === "all") return data.candy;
    return data.candy.filter((c) => c.category === candyCategory);
  }, [data.candy, candyCategory]);

  const totalCandyCount = Object.values(candyCart).reduce((a, b) => a + b, 0);
  const totalCandyPrice = Object.entries(candyCart).reduce((sum, [id, count]) => {
    const c = data.candy.find((x) => x.id === id);
    return sum + (c ? c.price * count : 0);
  }, 0);

  const updateCandyQty = (id, change) => {
    setCandyCart((prev) => {
      const copy = { ...prev };
      const val = (copy[id] || 0) + change;
      if (val <= 0) delete copy[id];
      else copy[id] = val;
      return copy;
    });
  };

  return (
    <div>
      <Hero movies={heroMovies} active={heroIdx} onSelect={setHeroIdx} onOpen={onOpen}
            paused={heroPaused} onPause={() => setHeroPaused(true)} onResume={() => setHeroPaused(false)} />

      {/* Cartelera */}
      <section id="sec-cartelera" className="wrap section">
        <div className="section-head">
          <div>
            <div className="eyebrow">Hoy en pantalla</div>
            <h2 className="section-title">Cartelera</h2>
          </div>
          <Filters genres={genres} active={genre} onPick={setGenre} />
        </div>

        <div className="cartelera-bar">
          <div className="cb-dates">
            {dates.map((d) => (
              <button key={d.key} className={"cb-date" + (dateKey === d.key ? " on" : "")} onClick={() => setDateKey(d.key)}>
                <span className="d-dow">{d.dow}</span>
                <span className="d-day">{d.day}</span>
                <span className="d-mon">{d.mon}</span>
              </button>
            ))}
          </div>
          <button className="loc cb-cinema" onClick={onCinema}>
            <Ico d={PATHS.pin} size={15} style={{ color: "var(--gold)" }} />
            <span style={{ maxWidth: 220, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{cinema}</span>
          </button>
        </div>

        <div className="grid-movies">
          {list.map((m, i) => (
            <MovieCard key={m.id} movie={m} onOpen={onOpen} onPickTime={pickTime} dateLabel={dateLabel} index={i} />
          ))}
        </div>
      </section>

      {/* Próximos estrenos */}
      <section id="sec-estrenos" className="upcoming-band">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">Aparta la fecha</div>
              <h2 className="section-title">Próximos estrenos</h2>
            </div>
          </div>
          <div className="upcoming-row">
            {data.upcoming.map((u) => (
              <div key={u.id} className="up-card" style={{ background: `linear-gradient(160deg, ${u.tint[0]}, ${u.tint[1]})` }}>
                {u.poster && <img className="up-img" src={u.poster} alt={u.title} loading="lazy" />}
                <div className="up-date">{u.date}</div>
                <div className="up-title">{u.title}</div>
                <button className="up-link">Avísame <Ico d={PATHS.arrow} size={14} /></button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Experiencias */}
      <section className="wrap section">
        <div className="section-head">
          <div>
            <div className="eyebrow">La experiencia {SITE.brand.name}</div>
            <h2 className="section-title">Más que un cine</h2>
          </div>
        </div>
        <div className="exp-grid">
          {expCards.map(([t, d, c, icon]) => (
            <div key={t} className="exp-card">
              <div className="exp-icon" style={{ background: `color-mix(in srgb, ${c} 16%, transparent)`, color: c }}>
                <Ico d={icon} size={22} />
              </div>
              <h3 className="exp-title">{t}</h3>
              <p className="muted">{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Dulcería */}
      <section id="sec-dulceria" className="wrap section">
        <div className="section-head" style={{ marginBottom: 16 }}>
          <div>
            <div className="eyebrow">Pide y recoge</div>
            <h2 className="section-title">Dulcería {SITE.brand.name}</h2>
          </div>
          <span className="muted" style={{ maxWidth: 320, textAlign: "right" }}>Agrega tus combos al comprar y recógelos sin filas.</span>
        </div>

        {/* Pestañas de Dulcería */}
        <div className="candy-tabs">
          {candyCats.map((cat) => (
            <button
              key={cat.id}
              className={"candy-tab" + (candyCategory === cat.id ? " on" : "")}
              onClick={() => setCandyCategory(cat.id)}
            >
              {cat.name}
            </button>
          ))}
        </div>

        <div className="candy-grid">
          {filteredCandy.map((c) => (
            <div key={c.id} className="candy-card">
              <div className="candy-photo">
                <img className="candy-img" src={c.img} alt={c.name} loading="lazy" />
              </div>
              <div className="candy-body">
                <div className="candy-name">{c.name}</div>
                <div className="muted" style={{ fontSize: 14 }}>{c.desc}</div>
                <div className="candy-foot">
                  <span className="candy-price">${c.price}</span>
                  {candyCart[c.id] ? (
                    <div className="stp sm">
                      <button onClick={() => updateCandyQty(c.id, -1)}>–</button>
                      <span className="mono">{candyCart[c.id]}</span>
                      <button onClick={() => updateCandyQty(c.id, 1)}>+</button>
                    </div>
                  ) : (
                    <button className="btn btn-ghost btn-sm" onClick={() => updateCandyQty(c.id, 1)}>Agregar</button>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Club ASTRA / Promos */}
      <section id="sec-promos" className="wrap section">
        <div className="club">
          <div className="club-inner">
            <div>
              <div className="eyebrow">Promociones</div>
              <h2 className="club-title">Promos & beneficios</h2>
              <p className="soft" style={{ maxWidth: 440 }}>
                Miércoles 2x1, preventas de los grandes estrenos y un club para los que no se pierden ninguna. Reservá fácil por WhatsApp.
              </p>
              <div className="row gap12" style={{ marginTop: 26, flexWrap: "wrap" }}>
                <a className="btn btn-gold btn-lg" href={SITE.contact.whatsappUrl} target="_blank" rel="noopener noreferrer">Reservar por WhatsApp</a>
                <button className="btn btn-ghost btn-lg" onClick={onOpenAccount}>Unirme al Club</button>
              </div>
            </div>
            <ul className="club-benefits">
              <li>
                <span className="cb-k">01</span>
                <div><b>Miércoles 2x1</b><span className="muted">En todas las funciones del día.</span></div>
              </li>
              <li>
                <span className="cb-k">02</span>
                <div><b>Estrellas por compra</b><span className="muted">1 estrella por cada $10. Canjéalas por boletos.</span></div>
              </li>
              <li>
                <span className="cb-k">03</span>
                <div><b>Preventas exclusivas</b><span className="muted">Asegura tu lugar en los grandes estrenos.</span></div>
              </li>
            </ul>
          </div>
        </div>
      </section>

      {/* Mini Carrito Dulcería Flotante */}
      {totalCandyCount > 0 && (
        <div className="candy-cart-floating">
          <div className="candy-cart-info">
            <div className="candy-cart-title">Tu Dulcería {SITE.brand.name}</div>
            <div className="candy-cart-sub">{totalCandyCount} artículo{totalCandyCount > 1 ? "s" : ""} · ${totalCandyPrice}</div>
          </div>
          <div className="row gap8">
            <button className="btn btn-ghost btn-sm" onClick={() => setCandyCart({})}>Vaciar</button>
            <button className="btn btn-gold btn-sm" onClick={() => {
              const el = document.getElementById("sec-cartelera");
              if (el) window.scrollTo({ top: el.offsetTop - 84, behavior: "smooth" });
            }}>
              Comprar Boletos
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { HomeScreen });