// Pages.jsx — Home, PLP, PDP, Cart, Checkout pages.
const { useState, useMemo } = React;

// ---------------------------------------------------------------
// HomePage
const HomePage = ({ onNav, onAdd, onFav, favs }) => {
  const featured = CATALOG.slice(0, 4);
  const offers   = CATALOG.filter(p => p.discount).slice(0, 4);
  const fresh    = CATALOG.slice(8, 12);
  const { isMobile, isTablet } = useViewport();
  const gridCols = isMobile ? "1fr 1fr" : isTablet ? "repeat(3, 1fr)" : "repeat(4, 1fr)";
  const catCols  = isMobile ? "repeat(4, 1fr)" : isTablet ? "repeat(4, 1fr)" : "repeat(8, 1fr)";
  const pad = isMobile ? "0 16px" : "0 32px";
  return (
    <div style={{ background: "var(--bg)" }}>
      {/* Hero */}
      <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "16px 16px 0" : "32px 32px 0" }}>
        <div style={{
          position: "relative", borderRadius: "var(--radius-banner)", overflow: "hidden",
          background: "linear-gradient(120deg, var(--primary) 0%, #2C7BE5 55%, var(--vert-ecom-end) 100%)",
          minHeight: isMobile ? 280 : 360, padding: isMobile ? "32px 24px" : "56px 64px",
          display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: "center", gap: isMobile ? 16 : 32,
        }}>
          <div style={{ flex: 1, color: "#fff", maxWidth: 520, position: "relative", zIndex: 2 }}>
            <span style={{ background: "rgba(255,255,255,.18)", color: "#fff", padding: "6px 14px", borderRadius: "9999px", font: "600 12px var(--font-sans)", letterSpacing: ".04em", textTransform: "uppercase" }}>
              Marzo · Mes del hogar
            </span>
            <h1 className={isMobile ? "headline" : "display"} style={{ color: "#fff", marginTop: 14 }}>Hasta 40% en lo que más usas en casa.</h1>
            <p className={isMobile ? "body" : "body-lg"} style={{ color: "rgba(255,255,255,.92)", marginTop: 10 }}>
              Cocina, electrodomésticos, organización y limpieza. Envío gratis a Puerto Vallarta en compras mayores a $599.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap" }}>
              <button onClick={() => onNav("plp", { cat: "hogar" })} style={{
                background: "#fff", color: "var(--primary-press)", border: 0, padding: isMobile ? "12px 20px" : "14px 28px",
                borderRadius: "9999px", font: "700 14px var(--font-sans)", cursor: "pointer", boxShadow: "var(--elev-2)",
              }}>Ver ofertas de hogar</button>
              <button onClick={() => onNav("plp")} style={{
                background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,.5)",
                padding: isMobile ? "12px 20px" : "14px 28px", borderRadius: "9999px", font: "600 14px var(--font-sans)", cursor: "pointer",
              }}>Explorar todo</button>
            </div>
          </div>
          {!isMobile && (
            <div style={{ flex: 1, display: "grid", placeItems: "center", position: "relative", zIndex: 2 }}>
              <div style={{ width: 280, height: 280, borderRadius: "50%", background: "rgba(255,255,255,.14)", display: "grid", placeItems: "center" }}>
                <img src="https://images.unsplash.com/photo-1556228720-195a672e8a03?w=600&q=80" alt="" style={{ width: 200, height: 200, borderRadius: "50%", objectFit: "cover", boxShadow: "var(--elev-3)" }} />
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Categories strip */}
      <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "40px 16px 0" : "56px 32px 0" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 18 }}>
          <h2 className={isMobile ? "headline-sm" : "headline"}>Descubre por categoría</h2>
          <a onClick={() => onNav("plp")} style={{ color: "var(--primary)", font: "600 13px var(--font-sans)", cursor: "pointer", display: "flex", alignItems: "center", gap: 4 }}>
            Ver todas <AllenIcon name="arrow_forward" size={16} />
          </a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: catCols, gap: isMobile ? 10 : 16 }}>
          {CATEGORIES.map(c => (
            <button key={c.id} onClick={() => onNav("plp", { cat: c.id })}
              style={{
                background: c.bg, border: 0, borderRadius: "var(--radius-lg)", padding: isMobile ? "14px 8px" : "20px 12px",
                display: "flex", flexDirection: "column", gap: 8, alignItems: "center", cursor: "pointer",
                transition: "transform var(--dur-fast) var(--ease-out-quart)",
              }}>
              <div style={{ width: isMobile ? 36 : 44, height: isMobile ? 36 : 44, borderRadius: 22, background: "var(--cat-ico-bg)", display: "grid", placeItems: "center" }}>
                <AllenIcon name={c.icon} size={isMobile ? 20 : 24} color="var(--fg-strong)" />
              </div>
              <span style={{ font: isMobile ? "600 11px var(--font-sans)" : "600 12px var(--font-sans)", color: "var(--fg-strong)", textAlign: "center" }}>{c.label}</span>
            </button>
          ))}
        </div>
      </section>

      {/* Lo más nuevo */}
      <Section title="Lo más nuevo" subtitle="Productos recién llegados a Allen" onSeeAll={() => onNav("plp")} isMobile={isMobile}>
        <Grid items={featured} cols={gridCols} onOpen={p => onNav("pdp", { id: p.id })} onAdd={onAdd} onFav={onFav} favs={favs} />
      </Section>

      {/* Promo strip */}
      <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "40px 16px 0" : "56px 32px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 16 }}>
          <PromoTile title="Allen Prime" sub="Envío en 24 h en miles de productos. Activa Prime gratis 30 días." cta="Activar prueba" bg="linear-gradient(135deg, #18181B, #0A0A0B)" fg="#fff" onClick={() => onNav("prime")} />
          <PromoTile title="Compra ahora, paga después" sub="Tarjeta de crédito o 3 / 6 / 9 / 12 MSI sin intereses participantes." cta="Ver términos" bg="var(--bg-branding)" fg="var(--primary-press)" />
        </div>
      </section>

      {/* Ofertas */}
      <Section title="Ofertas" subtitle="Descuentos que duran hasta el domingo" onSeeAll={() => onNav("plp", { onlyDiscount: true })} isMobile={isMobile}>
        <Grid items={offers} cols={gridCols} onOpen={p => onNav("pdp", { id: p.id })} onAdd={onAdd} onFav={onFav} favs={favs} />
      </Section>

      {/* Brands */}
      <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "40px 16px 0" : "56px 32px 0" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 18 }}>
          <h2 className={isMobile ? "headline-sm" : "headline"}>Marcas destacadas</h2>
          <a onClick={() => onNav("plp")} style={{ color: "var(--primary)", font: "600 13px var(--font-sans)", cursor: "pointer" }}>Ver todas →</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(3, 1fr)" : isTablet ? "repeat(4, 1fr)" : "repeat(6, 1fr)", gap: 12 }}>
          {BRANDS.map(b => (
            <button key={b.id} style={{
              ...b.style, border: b.style.border || 0,
              borderRadius: "var(--radius-md)", padding: isMobile ? "20px 12px" : "32px 20px",
              font: isMobile ? "700 14px var(--font-sans)" : "700 18px var(--font-sans)", cursor: "pointer", letterSpacing: ".02em",
            }}>{b.name}</button>
          ))}
        </div>
      </section>

      {/* Lo más vendido */}
      <Section title="Lo más vendido esta semana" subtitle="Top picks del marketplace" onSeeAll={() => onNav("plp")} isMobile={isMobile}>
        <Grid items={fresh} cols={gridCols} onOpen={p => onNav("pdp", { id: p.id })} onAdd={onAdd} onFav={onFav} favs={favs} />
      </Section>

      {/* Trust strip */}
      <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "40px 16px 0" : "56px 32px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: isMobile ? 12 : 20, background: "var(--bg-elev-1)", borderRadius: "var(--radius-xl)", padding: isMobile ? 20 : 32, border: "1px solid var(--border-soft)" }}>
          {[
            { icon: "local_shipping",  title: "Envío gratis +$599", sub: "A todo México" },
            { icon: "credit_card",     title: "12 MSI sin intereses",sub: "Bancos participantes" },
            { icon: "verified",        title: "Compra protegida",   sub: "Devolución 30 días" },
            { icon: "support_agent",   title: "Soporte 24/7",       sub: "En español, siempre" },
          ].map(t => (
            <div key={t.icon} style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 22, background: "var(--primary-soft)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                <AllenIcon name={t.icon} size={22} color="var(--primary-press)" />
              </div>
              <div>
                <div className="title-sm">{t.title}</div>
                <div className="body-sm" style={{ marginTop: 2 }}>{t.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

const Section = ({ title, subtitle, onSeeAll, children, isMobile }) => (
  <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "40px 16px 0" : "56px 32px 0" }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 18 }}>
      <div>
        <h2 className={isMobile ? "headline-sm" : "headline"}>{title}</h2>
        {subtitle && <div className="body-sm" style={{ marginTop: 4 }}>{subtitle}</div>}
      </div>
      {onSeeAll && <a onClick={onSeeAll} style={{ color: "var(--primary)", font: "600 13px var(--font-sans)", cursor: "pointer" }}>Ver todos →</a>}
    </div>
    {children}
  </section>
);

const Grid = ({ items, cols, onOpen, onAdd, onFav, favs }) => (
  <div style={{ display: "grid", gridTemplateColumns: cols || "repeat(4, 1fr)", gap: 16 }}>
    {items.map(p => <ProductCard key={p.id} p={p} onOpen={onOpen} onAdd={onAdd} onFav={onFav} fav={favs.has(p.id)} />)}
  </div>
);

const PromoTile = ({ title, sub, cta, bg, fg, onClick }) => (
  <div onClick={onClick} style={{ background: bg, color: fg, borderRadius: "var(--radius-xl)", padding: "40px 36px", minHeight: 200, display: "flex", flexDirection: "column", justifyContent: "center", gap: 8, cursor: onClick ? "pointer" : "default" }}>
    <h3 className="headline-sm" style={{ color: fg }}>{title}</h3>
    <p style={{ font: "400 15px/1.55 var(--font-sans)", color: fg, opacity: .9, maxWidth: 420, margin: 0 }}>{sub}</p>
    <button style={{
      marginTop: 18, alignSelf: "start", background: fg, color: bg.includes("gradient") || bg.includes("#0") ? "#000" : "#fff",
      border: 0, padding: "12px 22px", borderRadius: "9999px", font: "700 13px var(--font-sans)", cursor: "pointer",
    }}>{cta}</button>
  </div>
);

window.HomePage = HomePage;