// Product cards, featured & trending grids, why-section, footer

function useWindowWidth() {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const handler = () => setW(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return w;
}

function ProductCard({ p, onAdd, layout = 'standard' }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#1C1C1C',
        border: '1px solid ' + (hover ? 'rgba(46,204,113,0.35)' : 'rgba(255,255,255,0.06)'),
        borderRadius: 16, overflow: 'hidden',
        position: 'relative',
        transition: 'all 280ms ease',
        transform: hover ? 'translateY(-4px)' : 'none',
        boxShadow: hover ? '0 20px 50px rgba(0,0,0,0.5)' : '0 0 0 rgba(0,0,0,0)',
        display: 'flex', flexDirection: 'column',
      }}
    >
      <div style={{ position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: '#1a1a1a',
          transform: hover ? 'scale(1.06)' : 'scale(1)',
          transition: 'transform 600ms ease',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {p.image
            ? <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 16 }} />
            : <window.ProductGlyph variant={p.swatch} label={p.category} />
          }
        </div>
        <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {p.badge && <window.Badge tone={p.badgeTone || 'emerald'}>{p.badge}</window.Badge>}
        </div>
        <button
          aria-label="Wishlist"
          style={{
            position: 'absolute', top: 12, right: 12,
            width: 34, height: 34, borderRadius: 999,
            background: 'rgba(17,17,17,0.7)',
            border: '1px solid rgba(255,255,255,0.12)',
            color: '#fff', cursor: 'pointer',
            backdropFilter: 'blur(8px)',
            display: 'grid', placeItems: 'center',
          }}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
            <path d="M12 21s-7-4.5-9.5-9A5.3 5.3 0 0112 5.5 5.3 5.3 0 0121.5 12c-2.5 4.5-9.5 9-9.5 9z"/>
          </svg>
        </button>
        {/* Hover-only Add button overlay */}
        <button
          onClick={() => onAdd && onAdd(p)}
          style={{
            position: 'absolute', left: 12, right: 12, bottom: 12,
            background: '#2ECC71', color: '#0a0a0a',
            border: 'none', borderRadius: 10,
            padding: '12px 14px',
            fontFamily: '"Sora", sans-serif', fontWeight: 600, fontSize: 13,
            letterSpacing: '0.02em', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
            opacity: hover ? 1 : 0,
            transform: hover ? 'translateY(0)' : 'translateY(8px)',
            transition: 'all 240ms ease',
            boxShadow: '0 12px 30px rgba(46,204,113,0.35)',
          }}
        >
          <span>Agregar al carro</span>
          <span style={{ fontSize: 18 }}>+</span>
        </button>
      </div>

      <div style={{ padding: '16px 18px 18px', display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontFamily: 'ui-monospace, monospace', fontSize: 11,
          color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em',
          textTransform: 'uppercase',
        }}>
          <span>{p.brand}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: '#C9A84C' }}>
            {window.Icon.star(11)} {p.rating}
            <span style={{ color: 'rgba(255,255,255,0.4)' }}>({p.reviews})</span>
          </span>
        </div>
        <h3 style={{
          fontFamily: '"Sora", sans-serif', fontWeight: 600,
          fontSize: 16, lineHeight: 1.25, color: '#fff',
          margin: '2px 0 6px', letterSpacing: '-0.01em',
        }}>{p.name}</h3>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{
            fontFamily: '"Sora", sans-serif', fontWeight: 700,
            fontSize: 18, color: '#fff', letterSpacing: '-0.01em',
          }}>{window.fmtCLP(p.price)}</span>
          {p.oldPrice && (
            <span style={{
              fontFamily: 'Inter, sans-serif', fontSize: 13,
              color: 'rgba(255,255,255,0.4)', textDecoration: 'line-through',
            }}>{window.fmtCLP(p.oldPrice)}</span>
          )}
        </div>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 12,
          color: 'rgba(255,255,255,0.55)',
          marginTop: 2,
        }}>
          12x {window.fmtCLP(Math.round(p.price / 12))} sin interés
        </div>
      </div>
    </article>
  );
}

function ProductSection({ id, kicker, title, sub, products, onAdd, link = 'Ver todo' }) {
  const vw = useWindowWidth();
  const cols = vw < 600 ? 1 : vw < 900 ? 2 : vw < 1200 ? 3 : 4;
  return (
    <section id={id} style={{
      background: '#111111',
      padding: vw < 600 ? '60px 0' : '90px 0',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: vw < 600 ? '0 20px' : '0 32px' }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 36, gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{ maxWidth: 640 }}>
            <div style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 11,
              color: '#2ECC71', letterSpacing: '0.2em', textTransform: 'uppercase',
              marginBottom: 14,
            }}>{kicker}</div>
            <h2 style={{
              fontFamily: '"Sora", sans-serif', fontWeight: 700,
              fontSize: 'clamp(30px, 3.5vw, 44px)', lineHeight: 1.05,
              color: '#fff', letterSpacing: '-0.02em', margin: '0 0 10px',
            }}>{title}</h2>
            {sub && <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 15,
              color: 'rgba(255,255,255,0.62)', margin: 0, lineHeight: 1.5,
            }}>{sub}</p>}
          </div>
          <a href="#" style={{
            color: '#fff', textDecoration: 'none',
            fontFamily: '"Sora", sans-serif', fontSize: 14, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '11px 18px', borderRadius: 10,
            border: '1px solid rgba(255,255,255,0.14)',
            background: 'rgba(255,255,255,0.03)',
          }}>{link} {window.Icon.arrow(15)}</a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${cols}, 1fr)`,
          gap: 18,
        }}>
          {products.map((p) => (
            <ProductCard key={p.id} p={p} onAdd={onAdd} />
          ))}
        </div>
      </div>
    </section>
  );
}

function WhySection() {
  const items = window.BENEFITS;
  const vw = useWindowWidth();
  const isMobile = vw < 800;
  return (
    <section style={{
      background: 'linear-gradient(180deg, #0d2a1a 0%, #1A5C38 100%)',
      padding: isMobile ? '72px 0' : '110px 0',
      position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(800px 400px at 90% 0%, rgba(46,204,113,0.18), transparent 60%)',
      }}/>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: isMobile ? '0 20px' : '0 32px', position: 'relative',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 48 : 80, alignItems: 'flex-start',
      }}>
        <div style={{ position: isMobile ? 'static' : 'sticky', top: 100 }}>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 11,
            color: '#2ECC71', letterSpacing: '0.2em', textTransform: 'uppercase',
            marginBottom: 14,
          }}>— 03 / ¿Por qué Satindica?</div>
          <h2 style={{
            fontFamily: '"Sora", sans-serif', fontWeight: 700,
            fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1,
            color: '#fff', letterSpacing: '-0.025em', margin: '0 0 22px',
          }}>
            Cultivamos confianza<br/>
            <span style={{ color: '#2ECC71' }}>antes que ventas.</span>
          </h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6,
            color: 'rgba(255,255,255,0.78)', margin: '0 0 28px',
          }}>
            No somos un marketplace. Cada producto pasa por nuestra mesa antes de entrar al catálogo.
            Si no lo cultivaríamos, no lo vendemos.
          </p>
          <a href="#" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            background: '#2ECC71', color: '#0a0a0a',
            padding: '14px 22px', borderRadius: 12,
            fontFamily: '"Sora", sans-serif', fontWeight: 600, fontSize: 14,
            textDecoration: 'none',
          }}>Conocer Satindica {window.Icon.arrow(15)}</a>
        </div>
        <div style={{
          display: 'grid', gap: 16,
        }}>
          {items.map((b) => (
            <div key={b.glyph} style={{
              display: 'grid', gridTemplateColumns: '120px 1fr', gap: 28,
              padding: '28px 28px',
              background: 'rgba(17,17,17,0.4)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 16,
              backdropFilter: 'blur(8px)',
              alignItems: 'center',
            }}>
              <div style={{
                fontFamily: '"Sora", sans-serif', fontWeight: 700,
                fontSize: 56, lineHeight: 1,
                color: 'transparent',
                WebkitTextStroke: '1.5px #2ECC71',
                letterSpacing: '-0.04em',
              }}>{b.glyph}</div>
              <div>
                <h3 style={{
                  fontFamily: '"Sora", sans-serif', fontWeight: 600,
                  fontSize: 22, color: '#fff', letterSpacing: '-0.01em',
                  margin: '0 0 6px',
                }}>{b.title}</h3>
                <p style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.55,
                  color: 'rgba(255,255,255,0.7)', margin: 0,
                }}>{b.copy}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function NewsletterStrip() {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  const vw = useWindowWidth();
  const isMobile = vw < 700;
  return (
    <section style={{
      background: '#111111',
      padding: isMobile ? '60px 0' : '80px 0',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: isMobile ? '0 20px' : '0 32px',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 11,
            color: '#C9A84C', letterSpacing: '0.2em', textTransform: 'uppercase',
            marginBottom: 12,
          }}>— Acceso anticipado</div>
          <h2 style={{
            fontFamily: '"Sora", sans-serif', fontWeight: 700,
            fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 1.05,
            color: '#fff', letterSpacing: '-0.02em', margin: '0 0 10px',
          }}>Genéticas nuevas, drops y guías de cultivo en tu correo.</h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.6)', margin: 0,
          }}>Sin spam. 2 emails al mes. Te avisamos antes que a nadie.</p>
        </div>
        <form
          onSubmit={(e) => { e.preventDefault(); if (email) setDone(true); }}
          style={{
            display: 'flex', gap: 10,
            background: '#1C1C1C',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 14, padding: 8,
          }}
        >
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="tu@email.cl"
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              padding: '14px 16px', color: '#fff',
              fontFamily: 'Inter, sans-serif', fontSize: 15,
            }}
          />
          <button type="submit" style={{
            background: done ? '#1A5C38' : '#2ECC71', color: '#0a0a0a',
            border: 'none', borderRadius: 10,
            padding: '0 22px', cursor: 'pointer',
            fontFamily: '"Sora", sans-serif', fontWeight: 600, fontSize: 14,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'background 200ms',
            color: done ? '#fff' : '#0a0a0a',
          }}>
            {done ? '✓ Suscrito' : 'Suscribirme'} {!done && window.Icon.arrow(15)}
          </button>
        </form>
      </div>
    </section>
  );
}

function Footer() {
  const cols = {
    'Cultivo': ['Semillas', 'Clones', 'Sustratos', 'Fertilizantes', 'Herramientas'],
    'Indoor': ['Carpas', 'Iluminación', 'Ventilación', 'Riego', 'Kits completos'],
    'Tienda': ['Mi cuenta', 'Mis pedidos', 'Envíos', 'Devoluciones', 'Términos'],
    'Soporte': ['Asesoría', 'Guías de cultivo', 'Preguntas frecuentes', 'Contacto', 'Mayoristas'],
  };
  const pays = ['VISA', 'MC', 'AMEX', 'WPay', 'Khipu', 'MACH'];
  const vw = useWindowWidth();
  const footerGrid = vw < 600 ? '1fr 1fr' : vw < 900 ? '1fr 1fr 1fr' : '1.4fr repeat(4, 1fr)';
  const isMobile = vw < 600;
  return (
    <footer style={{
      background: '#0a0a0a',
      borderTop: '1px solid rgba(46,204,113,0.18)',
      paddingTop: isMobile ? 56 : 80, paddingBottom: 32,
      color: '#fff',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: isMobile ? '0 20px' : '0 32px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: footerGrid,
          gap: isMobile ? 32 : 48,
          paddingBottom: 56,
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div>
            <window.Logo size={26} />
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6,
              color: 'rgba(255,255,255,0.6)', margin: '20px 0 24px', maxWidth: 320,
            }}>
              Cultivo serio para gente seria. Genéticas, equipos y soporte de cultivadores reales —
              desde 2018, en todo Chile.
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              {[
                { k: 'ig', label: 'Instagram' },
                { k: 'tt', label: 'TikTok' },
                { k: 'yt', label: 'YouTube' },
              ].map(({ k, label }) => (
                <a key={k} href="#" aria-label={label} style={{
                  width: 38, height: 38, borderRadius: 10,
                  background: 'rgba(255,255,255,0.04)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  color: '#fff',
                  display: 'grid', placeItems: 'center',
                  textDecoration: 'none',
                }}>{window.Icon.social[k]}</a>
              ))}
            </div>
          </div>
          {Object.entries(cols).map(([h, items]) => (
            <div key={h}>
              <div style={{
                fontFamily: '"Sora", sans-serif', fontSize: 13, fontWeight: 600,
                color: '#fff', letterSpacing: '0.02em',
                marginBottom: 18,
              }}>{h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 10 }}>
                {items.map((it) => (
                  <li key={it}><a href="#" style={{
                    color: 'rgba(255,255,255,0.62)', textDecoration: 'none',
                    fontFamily: 'Inter, sans-serif', fontSize: 14,
                  }}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 28, gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 11,
            color: 'rgba(255,255,255,0.45)', letterSpacing: '0.06em',
          }}>
            © 2026 Satindica · Hecho en Chile · Solo para mayores de 18 años
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {pays.map((p) => (
              <span key={p} style={{
                fontFamily: 'ui-monospace, monospace', fontSize: 10, fontWeight: 700,
                padding: '6px 10px', borderRadius: 6,
                background: 'rgba(255,255,255,0.05)',
                border: '1px solid rgba(255,255,255,0.1)',
                color: 'rgba(255,255,255,0.7)',
                letterSpacing: '0.08em',
              }}>{p}</span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ProductCard, ProductSection, WhySection, NewsletterStrip, Footer });