/* global React, Reveal, Icon */
// חנות — products from the store. Book = manual order (phone/email). Others = inquiry/order.
const ILS = (n) => '₪' + Number(n).toLocaleString('he-IL');

const StoreCard = ({ p, products, onInquiry }) => {
  const [h, setH] = React.useState(false);
  const soldOut = p.stock === 0;
  const low = p.stock !== null && p.stock > 0 && p.stock <= 10;
  const unavailable = p.comingSoon || (p.status && p.status !== 'active');
  // Hide price when product is unavailable OR explicitly hidden by admin
  const showPrice = !p.hidePrice && !unavailable;

  return (
    <Reveal>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
        background: 'var(--white)', borderRadius: 'var(--radius-lg)', padding: p.image ? '0 0 26px' : '28px 26px',
        border: '1px solid rgba(28,20,19,0.05)', position: 'relative', height: '100%',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
        boxShadow: h ? 'var(--shadow-lg)' : 'var(--shadow-md)',
        transform: h ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'all 320ms var(--ease-soft)',
      }}>
        {/* Product image (if uploaded) */}
        {p.image && (
          <div style={{ width: '100%', height: 170, overflow: 'hidden', background: 'var(--cream)' }}>
            <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        )}

        <div style={{ padding: p.image ? '22px 26px 0' : 0, display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            {!p.image && <div style={{ width: 54, height: 54, borderRadius: 16, background: 'var(--surface-tint)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={p.icon} size={27} /></div>}
            {p.note && <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12, color: 'var(--ink-500)', background: 'var(--cream)', padding: '5px 12px', borderRadius: 'var(--radius-pill)', marginInlineStart: p.image ? 0 : 'auto' }}>{p.note}</span>}
          </div>

          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 23, margin: '0 0 10px', color: 'var(--ink-900)', lineHeight: 1.25 }}>{p.name}</h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7, color: 'var(--ink-500)', margin: '0 0 20px', flex: 1 }}>{p.desc}</p>

          {/* Price — hidden when unavailable or admin hid it */}
          {showPrice && (
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 16 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 30, color: 'var(--brand)' }}>{ILS(p.price)}</span>
              {low && <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, color: 'var(--red-500)' }}>נותרו {p.stock} במלאי</span>}
              {soldOut && <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, color: 'var(--ink-500)' }}>אזל זמנית</span>}
            </div>
          )}

          {unavailable ? (
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--cream)', color: 'var(--ink-500)', border: '1.5px solid var(--border)', borderRadius: 'var(--radius-pill)', padding: '11px 20px', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, alignSelf: 'flex-start' }}>
              {p.status === 'out-of-stock' ? '🔴 אזל המלאי'
                : p.status === 'coming-soon' || p.comingSoon ? '⏳ בקרוב'
                : p.statusLabel || '⏸ לא זמין'}
            </div>
          ) : p.order === 'manual' ? (
            <button onClick={() => onInquiry({
              topic: 'product', lockTopic: true, icon: 'book', product: p.name, productId: p.id, products, title: 'הזמנת הספר',
              heading: 'הזמנת הספר — ' + p.name, sub: 'השאר/י פרטים ואחזור אליך לתיאום הזמנה ומשלוח. הספר נשלח חתום אישית.',
            })} className="mln-btn-primary" style={storeBtnPrimary}>
              <Icon name="book" size={17} /> להזמנה
            </button>
          ) : (
            <button disabled={soldOut} onClick={() => onInquiry({
              topic: 'product', lockTopic: true, icon: 'cart', product: p.name, productId: p.id, products,
              title: 'רכישת מוצר', heading: 'הזמנת ' + p.name, sub: 'בחר/י את המוצרים והשאר/י פרטים — ואחזור אליך להשלמת ההזמנה.',
            })} className={soldOut ? '' : 'mln-btn-primary'} style={{ ...storeBtnPrimary, opacity: soldOut ? 0.5 : 1, cursor: soldOut ? 'not-allowed' : 'pointer' }}>
              <Icon name="cart" size={17} /> {soldOut ? 'אזל זמנית' : 'להזמנה'}
            </button>
          )}
        </div>
      </div>
    </Reveal>
  );
};

const StoreSection = ({ products, onInquiry }) => (
  <section id="store" style={{ background: 'var(--paper)', padding: 'var(--section-y) 28px' }}>
    <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto' }}>
      <Reveal as="div" style={{ textAlign: 'center', marginBottom: 52 }}>
        <div className="mln-eyebrow">החנות</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.9rem, 3.4vw, 2.8rem)', margin: '0 0 14px', color: 'var(--ink-900)' }}>כלים שילוו אתכם בדרך</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1.05rem,1.3vw,1.18rem)', lineHeight: 1.7, color: 'var(--ink-500)', maxWidth: '54ch', margin: '0 auto' }}>
          הספר, ההרצאה המוקלטת, קלפי הטיפול והשירים הממוסגרים — כל אחד מהם נולד מתוך המסע שלי.
        </p>
      </Reveal>

      <div className="mln-store-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {products.filter(p => p.active).map(p => <StoreCard key={p.id} p={p} products={products} onInquiry={onInquiry} />)}
      </div>

    </div>
  </section>
);

const storeBtnPrimary = {
  background: 'var(--brand)', color: '#fff', border: 'none', cursor: 'pointer', textDecoration: 'none',
  fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15.5, padding: '13px 20px',
  borderRadius: 'var(--radius-pill)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
  boxShadow: 'var(--shadow-sm)',
};
const storeBtnGhost = {
  background: 'var(--white)', color: 'var(--brand)', border: '1.5px solid var(--red-200)', cursor: 'pointer',
  fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15.5, padding: '13px 20px',
  borderRadius: 'var(--radius-pill)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
};
window.StoreSection = StoreSection;