const { useState: useStateSec, useEffect: useEffectSec, useMemo: useMemoSec } = React;

function Categories() {
  return (
    <section className="section">
      <div className="container">
        <div className="section__head">
          <div className="section__num">01</div>
          <h2 className="section__title"><em>Categorías</em></h2>
          <div className="section__meta">8 verticales<br/>Stock real CL</div>
        </div>
        <div className="cats">
          {CATEGORIES.map((c) => (
            <a key={c.num} className="cat" href="#">
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className="cat__num">/ {c.num}</span>
                <span className="cat__num">{c.tag}</span>
              </div>
              <div className="cat__media"><span>{c.title}</span></div>
              <div className="cat__bottom">
                <div className="cat__title">{c.title}</div>
                <span>{c.count} <span style={{ marginLeft: 6 }}>↗</span></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductCard({ p, cols, onAdd }) {
  const isSoldOut = p.soldout;
  return (
    <article className="product" style={cols === 3 ? { padding: 22 } : {}}>
      <div className="product__media">
        {p.image
          ? <img src={p.image} alt={p.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", padding: 14, background: "#0d0d0d" }} />
          : <div className="ph"><ProductGlyph id={p.id} /></div>
        }
        <div className="product__badges">
          {p.badge.map((b, i) => {
            let cls = "badge";
            if (b === "DROP") cls += " badge--neon";
            else if (b === "AGOTADO" || b.startsWith("-")) cls += " badge--red";
            else if (b === "🔥 HOT") cls += " badge--yellow";
            else if (b === "NUEVO") cls += " badge--neon";
            else cls += " badge--ghost";
            return <span key={i} className={cls}>{b}</span>;
          })}
        </div>
        {!isSoldOut && (
          <div className="product__quick">
            <button className="quick-btn" onClick={() => onAdd(p)}>Add to cart</button>
            <button className="quick-btn quick-btn--ghost" aria-label="Wishlist">♥</button>
          </div>
        )}
      </div>
      <div className="product__meta">
        <span>{p.brand}</span>
        <span>★ {p.rating}</span>
      </div>
      <div>
        <h3 className="product__title">{p.name}</h3>
        <div className="product__sub">{p.sub}</div>
      </div>
      <div className="product__foot">
        <div>
          <span className="price">{fmt(p.price)}</span>
          {p.was && <span className="price price--was">{fmt(p.was)}</span>}
        </div>
        <div className="product__rating">{isSoldOut ? <span className="red">SOLD OUT</span> : "REF · " + String(p.id).padStart(3, "0")}</div>
      </div>
    </article>
  );
}

function Products({ cols, onAdd }) {
  const [filter, setFilter] = useStateSec("Todos");
  const tabs = ["Todos", "Semillas", "Iluminación", "Parafernalia"];
  return (
    <section className="section">
      <div className="container">
        <div className="section__head">
          <div className="section__num">02</div>
          <h2 className="section__title">Más <em>vendidos</em></h2>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "flex-end" }}>
            {tabs.map(t => (
              <button key={t} onClick={() => setFilter(t)}
                style={{
                  padding: "8px 14px",
                  border: "1px solid " + (filter === t ? "var(--neon)" : "var(--line-strong)"),
                  color: filter === t ? "var(--neon)" : "var(--ink)",
                  fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
                  boxShadow: filter === t ? "0 0 0 1px var(--neon), 0 0 12px rgba(57,255,20,0.18)" : "none"
                }}>{t}</button>
            ))}
          </div>
        </div>
        <div className="products" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
          {PRODUCTS.slice(0, cols === 3 ? 6 : 8).map(p => (
            <ProductCard key={p.id} p={p} cols={cols} onAdd={onAdd} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Manifesto() {
  const items = ["Semillas", "Sustratos", "Iluminación", "Nutrientes", "Parafernalia"];
  return (
    <section className="cat-marquee">
      <div className="cat-marquee__track">
        {Array.from({ length: 3 }).map((_, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center" }}>
            <span className="stroke">{items[0]}</span><span className="star">★</span>
            <span className="accent">{items[1]}</span><span className="star">★</span>
            <span className="stroke">{items[2]}</span><span className="star">★</span>
            <span>{items[3]}</span><span className="star">★</span>
            <span className="stroke">{items[4]}</span><span className="star">★</span>
          </span>
        ))}
      </div>
    </section>
  );
}

function useCountdown(targetMs) {
  const [now, setNow] = useStateSec(Date.now());
  useEffectSec(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const diff = Math.max(0, targetMs - now);
  return {
    d: Math.floor(diff / 86400000),
    h: Math.floor((diff / 3600000) % 24),
    m: Math.floor((diff / 60000) % 60),
    s: Math.floor((diff / 1000) % 60),
  };
}

function Drop() {
  const target = useMemoSec(() => Date.now() + 3 * 86400000 + 7 * 3600000 + 14 * 60000, []);
  const { d, h, m, s } = useCountdown(target);
  const cells = [
    { n: String(d).padStart(2, "0"), l: "Días" },
    { n: String(h).padStart(2, "0"), l: "Horas" },
    { n: String(m).padStart(2, "0"), l: "Min" },
    { n: String(s).padStart(2, "0"), l: "Seg" },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section__head">
          <div className="section__num">03</div>
          <h2 className="section__title">Drop <em>04 / 26</em></h2>
          <div className="section__meta">Lanzamiento limitado<br/>Solo 200 unidades</div>
        </div>
        <div className="drop">
          <div className="drop__inner">
            <div className="drop__media">
              <Placeholder label="Drop 04 — Hero Shot" />
              <div className="drop__corner">★ Limited 200 / 200</div>
              <div className="drop__media-cap">REF · DROP-04 / CRITICAL-KUSH</div>
            </div>
            <div className="drop__body">
              <div>
                <div className="drop__kicker"><span className="live"></span> Live drop · termina pronto</div>
                <h3 className="drop__title">Critical <em>Kush</em><br/>Pack</h3>
                <p className="drop__desc">
                  Pack edición limitada: 5 semillas Critical Kush + nutrientes BioBizz starter + zine de cultivo Satindica n°04 + sticker pack. Numerado a mano. Cuando se agota, no vuelve.
                </p>
              </div>
              <div>
                <div className="countdown">
                  {cells.map((c, i) => (
                    <div key={i} className="cd">
                      <div className="cd__n">{c.n}</div>
                      <div className="cd__l">{c.l}</div>
                    </div>
                  ))}
                </div>
                <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
                  <button className="btn btn--neon">Reservar pack <span className="arrow">→</span></button>
                  <span style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-dim)" }}>
                    142 / 200 vendidos
                  </span>
                </div>
                <div style={{ marginTop: 18, height: 4, background: "#0a0a0a", border: "1px solid var(--line)" }}>
                  <div style={{ width: "71%", height: "100%", background: "var(--neon)", boxShadow: "0 0 12px var(--neon)" }} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function USP() {
  const cells = [
    { i: "01", t: "Envíos 24h",    d: "Despacho a todo Chile" },
    { i: "02", t: "Pago seguro",   d: "Tarjetas, transferencia, cripto" },
    { i: "03", t: "Soporte real",  d: "Growers atendiendo growers" },
    { i: "04", t: "Garantía germ.",d: "Reposición si no germina" },
  ];
  return (
    <div className="usp">
      {cells.map(c => (
        <div key={c.i} className="usp__cell">
          <div className="usp__num">/ {c.i}</div>
          <div className="usp__title">{c.t}</div>
          <div className="usp__desc">{c.d}</div>
        </div>
      ))}
    </div>
  );
}

function Newsletter() {
  const [email, setEmail] = useStateSec("");
  const [done, setDone] = useStateSec(false);
  return (
    <section className="section" style={{ borderBottom: 0 }}>
      <div className="container">
        <div className="newsletter">
          <div>
            <h2 className="newsletter__title">Suscríbete<br/>al <em>Drop</em></h2>
            <p className="newsletter__desc">
              Acceso anticipado a drops, descuentos solo para la lista, y el zine Satindica en tu inbox.
            </p>
          </div>
          <div>
            <form className="newsletter__form" onSubmit={(e) => { e.preventDefault(); if (email) { setDone(true); setEmail(""); setTimeout(() => setDone(false), 3000); } }}>
              <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tu@email.cl" type="email" required />
              <button type="submit">{done ? "★ ON LIST" : "Subscribirse →"}</button>
            </form>
            <div style={{ marginTop: 12, fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-dim)" }}>
              No spam. Solo cultura. Cancelar cuando quieras.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <Logo big />
            <p>Grow culture · est. 2019. Una tienda hecha por growers, para growers que cultivan su mundo.</p>
            <div className="socials">
              {["IG", "TT", "YT", "TG", "DC"].map(s => <a key={s} className="social" href="#">{s}</a>)}
            </div>
          </div>
          <div className="footer__col">
            <h4>Tienda</h4>
            <ul>{["Semillas", "Iluminación", "Sustratos", "Nutrientes", "Indoor Kits", "Drops"].map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div className="footer__col">
            <h4>Soporte</h4>
            <ul>{["Envíos", "Devoluciones", "Garantía germ.", "Pagos", "FAQ", "Contacto"].map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div className="footer__col">
            <h4>Más</h4>
            <ul>{["Drops", "Marcas", "Ofertas", "Mayoristas", "Eventos", "Press kit"].map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer__giant">SATINDICA</div>
        <div className="footer__bottom">
          <div>© 2026 Satindica · Santiago, CL</div>
          <div>★ Cultiva tu mundo ★</div>
          <div>Términos · Privacidad · Cookies</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Categories, Products, ProductCard, Manifesto, Drop, USP, Newsletter, Footer });