/* ============================================================
   PRODUCTS — E Glow Beauty line, filter + quick view
   ============================================================ */
const { useState, useEffect } = React;

function Products({ go }) {
  useReveal();
  const cats = ['All', 'Cleanse', 'Treat', 'Body', 'Hair'];
  const [cat, setCat] = useState('All');
  const [active, setActive] = useState(null); // quick-view product
  const list = cat === 'All' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat);

  return (
    <div className="page">
      <PageHeader
        eyebrow="The E Glow Beauty line"
        title={<>Organic skincare, <span className="serif-it" style={{ color: 'var(--clay)' }}>made by hand</span></>}
        sub="Formulated with shea butter, mango butter, herbal oils and botanical extracts — small-batch and intentional."
      />

      <section className="wrap" style={{ paddingBottom: 120 }}>
        {/* Filter */}
        <div className="shop-filter reveal in">
          {cats.map(c => (
            <button key={c} className={`shop-chip ${cat === c ? 'on' : ''}`} onClick={() => setCat(c)}>
              {c}
              {c !== 'All' && <span className="shop-chip-n">{PRODUCTS.filter(p => p.cat === c).length}</span>}
            </button>
          ))}
        </div>

        {/* Grid */}
        <div className="shop-grid">
          {list.map((p, i) => (
            <div key={p.id} className="shop-card reveal" style={{ transitionDelay: `${(i % 3) * 80}ms` }}>
              <div className="shop-card-art">
                <Placeholder tone={p.tone} label={p.name} style={{ aspectRatio: '1/1', borderRadius: 'var(--r-md)' }} />
                <button className="shop-quick" onClick={() => setActive(p)}>Quick view</button>
                <span className="shop-cat-badge">{p.cat}</span>
              </div>
              <div className="shop-card-body">
                <div className="shop-card-top">
                  <h3 className="display">{p.name}</h3>
                  <span className="shop-price display">${p.price}</span>
                </div>
                <span className="shop-tagline">{p.tagline}</span>
                <p>{p.desc}</p>
                <button className="link-underline" onClick={() => setActive(p)}>View details →</button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Ingredient philosophy strip */}
      <section className="shop-ingredients">
        <div className="wrap shop-ing-inner">
          <div className="reveal">
            <span className="eyebrow gold">What goes in</span>
            <h2 className="display" style={{ color: 'var(--paper)', margin: '14px 0 0' }}>Nothing your skin<br />doesn’t recognise</h2>
          </div>
          <div className="shop-ing-list reveal" style={{ transitionDelay: '120ms' }}>
            {['Shea butter', 'Mango butter', 'Turmeric', 'Ethiopian coffee', 'Herbal oils', 'Botanical extracts'].map(x => (
              <span key={x} className="shop-ing-pill"><LeafGlyph size={16} />{x}</span>
            ))}
          </div>
        </div>
      </section>

      <CTABand go={go}
        eyebrow="Pair with a ritual"
        title={<>Make it a full <span className="serif-it">spa experience</span></>}
        btn="Book an appointment" target="book" secondary={['Read our story', 'about']} />

      {/* Quick-view drawer */}
      {active && <QuickView p={active} onClose={() => setActive(null)} go={go} />}
    </div>
  );
}

function QuickView({ p, onClose, go }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);
  return (
    <div className="qv-overlay" onClick={onClose}>
      <div className="qv-panel" onClick={e => e.stopPropagation()}>
        <button className="qv-close" onClick={onClose} aria-label="Close">✕</button>
        <div className="qv-art">
          <Placeholder tone={p.tone} label={p.name} style={{ height: '100%' }} />
        </div>
        <div className="qv-body">
          <span className="shop-cat-badge static">{p.cat}</span>
          <h2 className="display">{p.name}</h2>
          <span className="shop-tagline">{p.tagline}</span>
          <p className="qv-desc">{p.desc}</p>
          <div className="qv-ing">
            <span className="eyebrow muted">Key ingredients</span>
            <div className="qv-ing-row">
              {p.ingredients.map(x => <span key={x} className="qv-ing-chip">{x}</span>)}
            </div>
          </div>
          <div className="qv-foot">
            <span className="qv-price display">${p.price}</span>
            <button className="btn btn-clay" onClick={() => { onClose(); go('book'); }}>Enquire &amp; book <span className="arrow">→</span></button>
          </div>
          <p className="qv-note">Available in-spa and online soon. Pricing shown in USD.</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Products, QuickView });