/* ASTRA — componentes compartidos */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- iconos ---------- */
function Star({ className, style }) {
  return (
    <svg className={className} style={style} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 1.6c.5 4.7 1.7 5.9 6.4 6.4-4.7.5-5.9 1.7-6.4 6.4-.5-4.7-1.7-5.9-6.4-6.4 4.7-.5 5.9-1.7 6.4-6.4z" transform="scale(1)"/>
      <path d="M12 9.6c.3 2.8 1 3.5 3.8 3.8-2.8.3-3.5 1-3.8 3.8-.3-2.8-1-3.5-3.8-3.8 2.8-.3 3.5-1 3.8-3.8z" opacity=".55"/>
    </svg>
  );
}
function Logo({ onClick }) {
  return (
    <div className="logo" onClick={onClick} role="button" aria-label={SITE.brand.fullName + " inicio"}>
      <img className="logo-img" src="brand/logo.png" alt={SITE.brand.fullName} />
    </div>
  );
}
function Ico({ d, size = 18, className, style, sw = 1.7 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" className={className} style={style} aria-hidden="true">
      {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
    </svg>
  );
}
const PATHS = {
  pin: ["M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z", "M12 10.5a2.5 2.5 0 1 0 0-.01"],
  ticket: ["M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 2 2 0 0 0 0-4z", "M14 6v12"],
  play: ["M7 5l12 7-12 7z"],
  chevR: ["M9 6l6 6-6 6"],
  chevL: ["M15 6l-6 6 6 6"],
  clock: ["M12 7v5l3 2", "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"],
  search: ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "M21 21l-4.3-4.3"],
  user: ["M4 21a8 8 0 0 1 16 0", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"],
  cal: ["M3 9h18", "M7 3v3M17 3v3", "M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"],
  film: ["M4 4h16v16H4z", "M8 4v16M16 4v16M4 8h4M16 8h4M4 12h16M4 16h4M16 16h4"],
  check: ["M5 13l4 4L19 7"],
  arrow: ["M5 12h14", "M13 6l6 6-6 6"],
  star: ["M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.4l6-.8z"],
  pop: ["M5 8h14l-1.2 12.5a1 1 0 0 1-1 .9H7.2a1 1 0 0 1-1-.9z", "M5 8l1-3h12l1 3", "M9 5V3M15 5V3"],
  present: ["M3 4h18v12H3z", "M12 16v4", "M8 21l4-2 4 2", "M8 9l2.5 2.5L15 7"],
  mail: ["M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z", "M3.5 6.5l8.5 6 8.5-6"],
  chat: ["M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z"],
};

/* ---------- Poster (teaser one-sheet) con slot rellenable ---------- */
function Poster({ movie, slotId }) {
  return (
    <div className="poster" style={{ "--t0": movie.tint[0], "--t1": movie.tint[1] }}>
      <div className="poster-art" />
      <div className="poster-sheen" />
      <div className="poster-frame" />
      <div className="poster-fallback">
        <div className="pf-top">
          <span className="pf-dir">{movie.director}</span>
          <span className={"rating " + movie.rating}>{movie.rating}</span>
        </div>
        <div>
          <div className="pf-title">{movie.title}</div>
          <div className="pf-genre">{movie.genre.join(" / ")}</div>
        </div>
      </div>
      <image-slot id={slotId} placeholder="Soltar póster" radius="12"></image-slot>
      {movie.poster && <img className="poster-img" src={movie.poster} alt={movie.title} loading="lazy" />}
    </div>
  );
}

/* ---------- Badges de formato ---------- */
function Formats({ list, max }) {
  const items = max ? list.slice(0, max) : list;
  return (
    <div className="row gap8" style={{ flexWrap: "wrap" }}>
      {items.map((f) => <span key={f} className={SITE.fmtClass(f)}>{f}</span>)}
    </div>
  );
}
function fmtDur(m) { return Math.floor(m / 60) + "h " + String(m % 60).padStart(2, "0") + "m"; }

/* ---------- Tarjeta de película con horarios del día ---------- */
function MovieCard({ movie, onOpen, onPickTime, dateLabel, index = 0 }) {
  const fmt = movie.formats[0];
  const all = (window.ASTRA.showtimes[fmt] || window.ASTRA.showtimes["2D"]);
  const times = all.slice(0, 4);
  const lang = movie.langs[0] === "DOB" ? "ESP" : "SUB";
  return (
    <article className="movie-card fade-up" style={{ animationDelay: (index * 45) + "ms" }}>
      <div className="mc-poster" onClick={() => onOpen(movie)}>
        <Poster movie={movie} slotId={"poster-" + movie.id} />
        <div className="mc-poster-over"><span><Ico d={PATHS.play} size={14} sw={0} style={{ color: "var(--gold)" }} /> Ver película</span></div>
      </div>
      <div className="mc-body">
        <h3 className="mc-title" onClick={() => onOpen(movie)}>{movie.title}</h3>
        <div className="mc-meta soft">
          <span className={"rating " + movie.rating}>{movie.rating}</span>
          <span>{movie.genre[0]}</span>
          <span className="dot-sep">·</span>
          <span>{fmtDur(movie.duration)}</span>
          {movie.score && (
            <>
              <span className="dot-sep">·</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: "2px" }}>
                <Ico d={PATHS.star} size={11} sw={0} style={{ color: "var(--gold)", fill: "var(--gold)" }} />
                <strong style={{ color: "var(--gold)" }}>{movie.score}</strong>
              </span>
            </>
          )}
        </div>
        <div className="mc-formats">
          {movie.formats.slice(0, 3).map((f) => <span key={f} className={SITE.fmtClass(f)}>{f}</span>)}
        </div>
        <div className="mc-show">
          <div className="mc-show-head">
            <span className="lbl">Funciones</span>
            <span className="fmt">{dateLabel} · {lang}</span>
          </div>
          <div className="mc-times">
            {times.map((t) => (
              <button key={t} className="mc-time" onClick={() => onPickTime(movie, fmt, t)}>{t}</button>
            ))}
            <button className="mc-time more" onClick={() => onOpen(movie)}>+ horarios</button>
          </div>
        </div>
      </div>
    </article>
  );
}

/* ---------- Header ---------- */
function Header({ active, onNav, cinema, onCinema, onOpenMovie, onOpenAccount }) {
  const links = [
    ["cartelera", "Cartelera"],
    ["estrenos", "Próximos estrenos"],
    ["dulceria", "Dulcería"],
    ["promos", "Promociones"],
    ["eventos", "Eventos & Empresas"],
  ];
  const tabs = [
    ["cartelera", "Inicio", PATHS.film],
    ["estrenos", "Estrenos", PATHS.cal],
    ["dulceria", "Dulcería", PATHS.pop],
    ["eventos", "Eventos", PATHS.present],
  ];

  const [searchOpen, setSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const searchRef = useRef(null);

  // Cierra el buscador si hace clic afuera
  useEffect(() => {
    function handleClickOutside(event) {
      if (searchRef.current && !searchRef.current.contains(event.target)) {
        setSearchOpen(false);
        setSearchQuery("");
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Filtra películas en tiempo real
  useEffect(() => {
    if (searchQuery.trim() === "") {
      setSearchResults([]);
      return;
    }
    const q = searchQuery.toLowerCase();
    const matches = window.ASTRA.movies.filter(
      (m) =>
        m.title.toLowerCase().includes(q) ||
        m.genre.some((g) => g.toLowerCase().includes(q)) ||
        (m.original && m.original.toLowerCase().includes(q))
    );
    setSearchResults(matches);
  }, [searchQuery]);

  return (
    <React.Fragment>
      <header className="hdr">
        <div className="wrap hdr-row">
          <Logo onClick={() => onNav("cartelera")} />
          <nav className="nav">
            {links.map(([k, label]) => (
              <a key={k}
                 className={(active === k ? "active" : "") + (k === "eventos" ? " nav-cta" : "")}
                 onClick={() => onNav(k)}>{label}</a>
            ))}
          </nav>
          <div className="hdr-right">
            <button className="loc" onClick={onCinema}>
              <Ico d={PATHS.pin} size={15} style={{ color: "var(--gold)" }} />
              <span className="loc-name">{cinema}</span>
            </button>
            
            {/* Buscador Rápido Interactivo */}
            <div className="hdr-search-container" ref={searchRef}>
              <input
                type="text"
                placeholder="Buscar película..."
                className={"hdr-search-input" + (searchOpen ? " open" : "")}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onFocus={() => setSearchOpen(true)}
              />
              <button
                className="btn btn-ghost btn-sm icon-only search-icon-btn"
                aria-label="Buscar"
                onClick={() => setSearchOpen(!searchOpen)}
              >
                <Ico d={PATHS.search} size={17} />
              </button>
              
              {searchOpen && searchQuery.trim() !== "" && (
                <div className="search-results-dropdown">
                  {searchResults.length > 0 ? (
                    searchResults.map((m) => (
                      <button
                        key={m.id}
                        className="search-result-item"
                        onClick={() => {
                          onOpenMovie(m);
                          setSearchOpen(false);
                          setSearchQuery("");
                        }}
                      >
                        <img src={m.poster} alt={m.title} />
                        <div className="search-result-info">
                          <div className="search-result-title">{m.title}</div>
                          <div className="search-result-meta">
                            <span className={"rating " + m.rating}>{m.rating}</span>
                            <span>{m.genre[0]}</span>
                            <span>·</span>
                            <span>{m.formats[0]}</span>
                            {m.score && (
                              <>
                                <span>·</span>
                                <span style={{ display: "inline-flex", alignItems: "center", gap: "2px" }}>
                                  <Ico d={PATHS.star} size={9} sw={0} style={{ color: "var(--gold)", fill: "var(--gold)" }} />
                                  <strong style={{ color: "var(--gold)", fontWeight: 700 }}>{m.score}</strong>
                                </span>
                              </>
                            )}
                          </div>
                        </div>
                      </button>
                    ))
                  ) : (
                    <div className="search-no-results">No se encontraron resultados</div>
                  )}
                </div>
              )}
            </div>

            <button className="btn btn-solid btn-sm acct-btn" onClick={onOpenAccount}>
              <Ico d={PATHS.user} size={16} /> <span className="hide-sm">Mi cuenta</span>
            </button>
          </div>
        </div>
      </header>

      <nav className="mtabs">
        {tabs.map(([k, label, icon]) => (
          <button key={k} className={active === k ? "on" : ""} onClick={() => onNav(k)}>
            <Ico d={icon} size={21} sw={1.7} /> {label}
          </button>
        ))}
        <button onClick={onCinema}><Ico d={PATHS.pin} size={21} sw={1.7} /> Cine</button>
        <button onClick={onOpenAccount}><Ico d={PATHS.user} size={21} sw={1.7} /> Cuenta</button>
      </nav>
    </React.Fragment>
  );
}

/* ---------- Modal de Cuenta / Club ASTRA ---------- */
function AccountModal({ onClose, onOpenMovie }) {
  const [activeTab, setActiveTab] = useState("card");
  
  // Efecto 3D de inclinación y brillo
  function handleMouseMove(e) {
    const card = e.currentTarget;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const xc = rect.width / 2;
    const yc = rect.height / 2;
    const rotateX = -(y - yc) / 10; // deg
    const rotateY = (x - xc) / 10; // deg
    
    const shineX = (x / rect.width) * 100;
    const shineY = (y / rect.height) * 100;

    card.style.setProperty("--shine-x", `${shineX}%`);
    card.style.setProperty("--shine-y", `${shineY}%`);
    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  }
  
  function handleMouseLeave(e) {
    const card = e.currentTarget;
    card.style.transform = "rotateX(0deg) rotateY(0deg)";
    card.style.setProperty("--shine-x", "50%");
    card.style.setProperty("--shine-y", "50%");
  }

  // Compras pasadas
  const pastTickets = [
    {
      id: "t1",
      title: "El Día de la Revelación",
      date: "12/06/2026",
      time: "19:30",
      seats: "G8, G9",
      cinema: SITE.cinemas[0],
      poster: "posters/revelacion.png",
      code: SITE.naming.bookingPrefix + "-REV-4293"
    },
    {
      id: "t2",
      title: "En la Zona Gris",
      date: "05/06/2026",
      time: "20:20",
      seats: "H12",
      cinema: SITE.cinemas[0],
      poster: "posters/zonagris-hd.png",
      code: SITE.naming.bookingPrefix + "-ZON-9201"
    }
  ];

  // Cupones de descuento
  const [appliedCoupons, setAppliedCoupons] = useState({});
  const coupons = [
    { id: "cop1", code: "MIERCOLES2X1", desc: "2x1 en todas las funciones de los miércoles" },
    { id: "cop2", code: "COMBOPALOMITAS", desc: "Palomitas grandes gratis en tu próxima compra" }
  ];

  const [selectedTicket, setSelectedTicket] = useState(null);

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal acct-modal" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
          <div>
            <div className="eyebrow">Mi Cuenta</div>
            <h2 style={{ fontSize: 26, margin: "6px 0 0" }}>{SITE.naming.club}</h2>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Cerrar</button>
        </div>

        {/* Selector de pestañas */}
        <div className="row gap8" style={{ borderBottom: "1px solid var(--line)", paddingBottom: 12, marginBottom: 20 }}>
          <button className={"btn btn-sm " + (activeTab === "card" ? "btn-gold" : "btn-solid")} onClick={() => setActiveTab("card")}>Tarjeta Club</button>
          <button className={"btn btn-sm " + (activeTab === "coupons" ? "btn-gold" : "btn-solid")} onClick={() => setActiveTab("coupons")}>Mis Beneficios</button>
          <button className={"btn btn-sm " + (activeTab === "history" ? "btn-gold" : "btn-solid")} onClick={() => setActiveTab("history")}>Historial</button>
        </div>

        {activeTab === "card" && (
          <div>
            <div className="card-3d-wrapper">
              <div className="card-3d" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
                <div className="card-bg-glow" />
                <div className="card-header">
                  <img className="card-logo-img" src="brand/logo.png" alt={SITE.brand.fullName} />
                  <span className="card-tier">SOCIO</span>
                </div>
                <div className="card-chip" />
                <div className="card-footer">
                  <div className="card-holder">
                    <span className="card-label">Socio {SITE.naming.club}</span>
                    <span className="card-name">TU NOMBRE</span>
                  </div>
                  <span className="card-number">{SITE.naming.bookingPrefix}-8349-2026</span>
                </div>
              </div>
            </div>

            {/* Progreso de puntos */}
            <div className="points-tracker">
              <div className="points-header">
                <span className="points-title">Estrellas acumuladas</span>
                <span className="points-value">0 ⭐</span>
              </div>
              <div className="points-bar-bg">
                <div className="points-bar-fg" style={{ width: "0%" }}></div>
              </div>
              <div className="points-footer">
                Acumulá una estrella por cada compra y canjéalas por boletos gratis.
              </div>
            </div>
          </div>
        )}

        {activeTab === "coupons" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <h3 style={{ fontSize: 16, margin: "0 0 4px" }}>Tus Cupones Disponibles</h3>
            {coupons.map((c) => (
              <div key={c.id} className="row" style={{ justifyContent: "space-between", background: "var(--panel-2)", border: "1px solid var(--line)", padding: "14px 16px", borderRadius: "var(--r)", gap: 12 }}>
                <div>
                  <div className="mono" style={{ color: "var(--gold)", fontWeight: 700, fontSize: 14 }}>{c.code}</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{c.desc}</div>
                </div>
                <button 
                  className={"btn btn-sm " + (appliedCoupons[c.id] ? "btn-solid" : "btn-gold")}
                  onClick={() => setAppliedCoupons(p => ({ ...p, [c.id]: !p[c.id] }))}
                >
                  {appliedCoupons[c.id] ? "✓ Aplicado" : "Canjear"}
                </button>
              </div>
            ))}
          </div>
        )}

        {activeTab === "history" && (
          <div className="history-list">
            <h3 style={{ fontSize: 16, margin: "0 0 4px" }}>Compras Recientes</h3>
            {pastTickets.map((t) => (
              <div key={t.id} className="history-item">
                <img className="history-item-poster" src={t.poster} alt={t.title} />
                <div className="history-item-details">
                  <div className="history-item-title">{t.title}</div>
                  <div className="history-item-meta">
                    {t.date} · {t.time} · Butacas: {t.seats}
                  </div>
                  <div className="history-item-meta" style={{ fontSize: 11, color: "var(--gold)" }}>
                    {t.cinema}
                  </div>
                </div>
                <div 
                  className="history-item-qr" 
                  title="Ver boleto electrónico"
                  onClick={() => setSelectedTicket(t)}
                >
                  <div className="qr" style={{ width: "100%", height: "100%", padding: "2px", background: "#fff", display: "block" }}>
                    <img
                      src={`https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${t.code}&color=0a0a0b&bgcolor=ffffff&margin=0`}
                      alt="QR"
                      style={{ width: "100%", height: "100%", objectFit: "contain" }}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {selectedTicket && (
        <div className="modal-back" style={{ zIndex: 110 }} onClick={() => setSelectedTicket(null)}>
          <div className="modal" style={{ width: "min(420px, 100%)", background: "var(--panel)", padding: 20, borderRadius: "var(--r-xl)", border: "1px solid var(--line-2)" }} onClick={(e) => e.stopPropagation()}>
            <div style={{ textAlign: "right", marginBottom: 10 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => setSelectedTicket(null)}>Cerrar</button>
            </div>
            
            {/* Visualización del boleto */}
            <div className="ticket" style={{ transform: "none", opacity: 1 }}>
              <div className="ticket-top" style={{ background: "linear-gradient(160deg, #1b2b4d, #0a1226)", padding: "18px 20px" }}>
                <span className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Boleto Electrónico</span>
                <h3 style={{ color: "#fff", fontSize: 20, marginTop: 4 }}>{selectedTicket.title}</h3>
              </div>
              <div className="ticket-perf" style={{ padding: "16px 20px", gridTemplateColumns: "1fr" }}>
                <div className="tp"><span className="cr-label">CINE</span><span>{selectedTicket.cinema}</span></div>
                <div className="tp"><span className="cr-label">FECHA & HORA</span><span>{selectedTicket.date} · {selectedTicket.time}</span></div>
                <div className="tp"><span className="cr-label">BUTACAS</span><span>{selectedTicket.seats}</span></div>
              </div>
              <div className="ticket-perforation"><span /><span /><span /><span /><span /><span /><span /><span /><span /><span /></div>
              <div className="ticket-bottom" style={{ padding: "18px 20px" }}>
                <div>
                  <div className="cr-label">CÓDIGO DIGITAL</div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: "var(--gold)" }} className="mono">{selectedTicket.code}</div>
                </div>
                <div className="qr-container">
                  <div className="qr" style={{ width: 64, height: 64, background: "#fff", padding: "4px", display: "block" }}>
                    <img
                      src={`https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${selectedTicket.code}&color=0a0a0b&bgcolor=ffffff&margin=0`}
                      alt="QR"
                      style={{ width: "100%", height: "100%", objectFit: "contain" }}
                    />
                  </div>
                  <div className="scanner-laser" />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer({ onNav }) {
  const cols = [
    ["Películas", ["Cartelera", "Próximos estrenos", "Preventa"]],
    ["El cine", ["Eventos & Empresas", "Dulcería", "Promociones", "Cómo llegar"]],
    [SITE.brand.name, ["Sobre nosotros", "Contacto", "Trabaja con nosotros"]],
    ["Ayuda", ["Preguntas frecuentes", "Términos", "Privacidad"]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo onClick={() => onNav("cartelera")} />
            <p className="muted" style={{ maxWidth: 300, marginTop: 16 }}>
              {SITE.brand.tagline} Pantallas que importan, butacas que abrazan.
            </p>
            <div className="footer-social">
              <a aria-label="Instagram" href={SITE.social.instagram} target="_blank" rel="noopener noreferrer">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
              </a>
              <a aria-label="TikTok" href={SITE.social.tiktok} target="_blank" rel="noopener noreferrer">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"></path></svg>
              </a>
              <a aria-label="WhatsApp" href={SITE.social.whatsapp} target="_blank" rel="noopener noreferrer">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
              </a>
              <a aria-label="Facebook" href={SITE.social.facebook} target="_blank" rel="noopener noreferrer">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
              </a>
            </div>
            <ul className="muted" style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 7, fontSize: 13.5, maxWidth: 300, lineHeight: 1.45 }}>
              <li><a href={SITE.contact.mapsUrl} target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>{SITE.contact.address}</a></li>
              <li>{SITE.contact.hours}</li>
              <li>{SITE.contact.parking}</li>
              <li><a href={SITE.contact.whatsappUrl} target="_blank" rel="noopener noreferrer" style={{ color: "var(--gold)", fontWeight: 600 }}>WhatsApp · {SITE.contact.whatsapp}</a></li>
            </ul>
          </div>
          <div className="footer-cols">
            {cols.map(([h, items]) => (
              <div key={h} className="footer-col">
                <div className="footer-h">{h}</div>
                {items.map((it) => <a key={it} className="footer-link">{it}</a>)}
              </div>
            ))}
          </div>
        </div>
        <hr className="divider" />
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} {SITE.brand.fullName} · Hecho en {SITE.brand.country}</span>
          <span>Demo de propuesta · Diseñado por <a href="https://crocode.ai" target="_blank" rel="noopener noreferrer" style={{ color: "var(--gold)", fontWeight: 700 }}>Crocode</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Star, Logo, Ico, PATHS, Poster, Formats, fmtDur, MovieCard, Header, Footer, AccountModal });