const { useState: useStateSec1 } = React;

function Categories1() {
  return (
    <section className="section" id="cats">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-sub"><span className="line"></span>01 · Catálogo</div>
            <h2 className="section-title">
              Todo lo que necesitas, <em>desde la raíz</em> hasta la cosecha.
            </h2>
          </div>
          <p className="section-aside">
            Ocho categorías curadas para acompañarte en cada etapa del cultivo, desde el primer brote hasta el secado.
          </p>
        </div>
        <div className="cats">
          {CATEGORIES_1.map((c) => (
            <a key={c.num} className="cat" href="#">
              <span className="num">— {c.num}</span>
              <span className="ico">
                <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <ellipse cx="32" cy="36" rx="14" ry="20"/>
                  <path d="M32 16C28 12 24 10 20 10M32 16C36 12 40 10 44 10"/>
                </svg>
              </span>
              <h3>{c.title}</h3>
              <div className="meta">
                <span>{c.detail}</span>
                <span className="arr">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductCard1({ p, onAdd }) {
  const [fav, setFav] = useStateSec1(false);
  return (
    <article className="card" data-cat={p.filter}>
      <div className="img" style={{ background: p.filter === "semillas" ? "#111512" : "#0f1410" }}>
        {p.badge && <span className={"badge " + p.badge}>{p.badgeText}</span>}
        <button className={"fav" + (fav ? " on" : "")} aria-label="Favorito" onClick={(e) => { e.preventDefault(); setFav(v => !v); }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 21s-7-4.5-9.5-9.5C1 7.5 4 4 7.5 4c2 0 3.5 1 4.5 2.5C13 5 14.5 4 16.5 4 20 4 23 7.5 21.5 11.5 19 16.5 12 21 12 21z"/></svg>
        </button>
        <img src={p.image} alt={p.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", padding: 16 }} />
      </div>
      <div className="card-body">
        <span className="cat-tag">{p.cat}</span>
        <h4>{p.name}<em>{p.brand}</em></h4>
        <div className="rating">
          <StarRating rating={p.rating} /> {p.rating} · {p.reviews}
        </div>
        <div className="foot">
          <div className="price">
            {p.was && <span className="was">{fmt1(p.was)}</span>}
            {fmt1(p.price)}
          </div>
          <button className="add" aria-label="Agregar al carrito" onClick={() => onAdd(p)}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
          </button>
        </div>
      </div>
    </article>
  );
}

const FILTER_TABS = [
  { key: "all",          label: "Todo" },
  { key: "semillas",     label: "Semillas" },
  { key: "iluminacion",  label: "Iluminación" },
  { key: "parafernalia", label: "Parafernalia" },
];

function Products1({ onAdd }) {
  const [filter, setFilter] = useStateSec1("all");
  const visible = PRODUCTS_1.filter(p => filter === "all" || p.filter === filter);
  return (
    <section className="section section-products">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-sub"><span className="line"></span>02 · Selección de la casa</div>
            <h2 className="section-title">Lo que está creciendo <em>esta semana.</em></h2>
          </div>
          <div className="product-tabs">
            {FILTER_TABS.map(t => (
              <button key={t.key} className={filter === t.key ? "active" : ""} onClick={() => setFilter(t.key)}>
                {t.label}
              </button>
            ))}
          </div>
        </div>
        <div className="products">
          {visible.map(p => <ProductCard1 key={p.id} p={p} onAdd={onAdd} />)}
        </div>
        <div className="featured-rail">
          <div>
            <div className="meta" style={{ marginBottom: 10 }}>— Oferta de temporada · termina en 6 días</div>
            <div className="lead">Combo Cultivo Indoor: carpa 120 + LED 240W + sustrato + nutrientes. <strong style={{ color: "var(--sage)", fontStyle: "normal" }}>Ahorra $48.000.</strong></div>
          </div>
          <div className="meta" style={{ textAlign: "right" }}>
            Stock limitado<br/><span style={{ color: "var(--cream-mute)" }}>14 unidades disponibles</span>
          </div>
          <a href="#" className="btn btn-ghost">
            Ver combo <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function Benefits1() {
  return (
    <section style={{ padding: 0 }}>
      <div className="benefits wrap" style={{ maxWidth: 1320 }}>
        {BENEFITS_1.map(b => (
          <div key={b.num} className="benefit">
            <span className="num">— {b.num}</span>
            <BenefitIcon num={b.num} />
            <h5>{b.title}</h5>
            <p>{b.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}


function Footer1() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo1 footer />
            <p>Tienda artesanal de cultivo y semillas. Recibe novedades del catálogo, ofertas exclusivas y descuentos por temporada en tu correo.</p>
            <form className="news" onSubmit={(e) => { e.preventDefault(); e.target.querySelector("button").textContent = "Suscrito ✓"; }}>
              <input type="email" placeholder="tu@correo.cl" required />
              <button type="submit">Suscribir</button>
            </form>
          </div>
          <div className="footer-col">
            <h6>Tienda</h6>
            <ul>{["Semillas", "Iluminación", "Sustratos", "Carpas", "Riego", "Kits"].map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h6>Comprar</h6>
            <ul>{["Novedades", "Ofertas", "Bestsellers", "Combos & kits", "Tarjeta de regalo"].map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h6>Soporte</h6>
            <ul>{["Seguir pedido", "Envíos & devoluciones", "Asesoría 1:1", "Preguntas frecuentes", "Contacto"].map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h6>Síguenos</h6>
            <ul>{["Instagram · @satindica", "YouTube", "Telegram", "Spotify · Playlist"].map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Satindica · Pirque, Chile · Todos los derechos reservados</span>
          <div className="pay">
            <span>WEBPAY</span><span>VISA</span><span>MASTERCARD</span><span>MERCADO PAGO</span>
          </div>
          <span><a href="#">Términos</a> · <a href="#">Privacidad</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Categories1, Products1, Benefits1, Footer1 });