// Shop Favorites — existing product lineup plus variety pack nudge
const ProductCard = ({ product, onAdd }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div style={{
      background: '#fff',
      borderRadius: 20,
      overflow: 'hidden',
      border: '1px solid var(--brown-100)',
      transition: 'transform .2s ease, box-shadow .2s ease',
      transform: hover ? 'translateY(-4px)' : 'translateY(0)',
      boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
      display: 'flex', flexDirection: 'column',
    }}
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    >
      <div style={{ position: 'relative' }}>
        <Photo tone={product.photoTone} aspect="1/1" rounded="0"
          label={product.photoLabel}
          src={product.img}/>
        {product.badge && (
          <div style={{
            position: 'absolute', top: 14, left: 14,
            background: '#fff', color: 'var(--brown-800)',
            padding: '8px 14px', borderRadius: 999,
            fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
            boxShadow: 'var(--shadow-sm)',
          }}>
            {product.badge}
          </div>
        )}
      </div>

      <div style={{
        background: 'var(--sky-200)',
        padding: '18px 20px 20px',
        flex: 1, display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ fontSize: 13, color: 'var(--brown-700)', fontWeight: 500 }}>
          From ${product.price}
        </div>
        <a href={product.href} {...EXTERNAL_LINK_PROPS} className="serif" style={{
          fontSize: 22, fontWeight: 500, margin: '4px 0 16px',
          color: 'var(--brown-900)', letterSpacing: '-0.01em', minHeight: 58, display: 'block',
        }}>
          {product.name}
        </a>
        {product.href ? (
          <a className="btn btn-outline" href={product.href} {...EXTERNAL_LINK_PROPS}
            style={{
              marginTop: 'auto', width: '100%', background: '#fff',
              borderColor: 'var(--brown-300)',
            }}>
            {hover ? 'Open product' : 'Buy now'}
          </a>
        ) : (
          <button className="btn btn-outline" onClick={() => onAdd(product)}
            style={{
              marginTop: 'auto', width: '100%', background: '#fff',
              borderColor: 'var(--brown-300)',
            }}>
            {hover ? 'Add to Cart' : 'Buy now'}
          </button>
        )}
      </div>
    </div>
  );
};

const ShopFavorites = ({ onAdd }) => {
  const products = [
    {
      id: 'orange-coconut', name: 'Orange Coconut Gooey Butter Cookie',
      price: 16, badge: 'Limited Edition', photoTone: 'cream',
      photoLabel: 'Orange Coconut', img: 'assets/cookies-stack.webp', href: SITE.products.orangeCoconut,
    },
    {
      id: 'signature-combo', name: 'Signature Gooey Butter Combo',
      price: 27, badge: 'Most Popular', photoTone: 'butter',
      photoLabel: 'Signature combo', img: 'assets/box.webp', href: SITE.products.signatureCombo,
    },
    {
      id: 'taste-it-all', name: "'Taste it All' Gooey Butter Combo",
      price: 26, badge: 'Best for First-Timers', photoTone: 'sky',
      photoLabel: 'Variety pack', img: 'assets/box.webp', href: SITE.products.tasteItAll,
    },
    {
      id: 'classic-combo', name: 'Classic Gooey Butter Combo',
      price: 27, badge: null, photoTone: 'peach',
      photoLabel: 'Classic stacked', img: 'assets/cookies-stack.webp', href: SITE.products.classicCombo,
    },
  ];

  return (
    <section style={{ padding: '80px 0 56px', background: '#fff' }}>
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 18, gap: 20, flexWrap: 'wrap',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Order today</div>
            <h2 className="serif" style={{
              fontSize: 'clamp(34px, 3.4vw, 48px)', fontWeight: 500, margin: 0,
              color: 'var(--brown-900)', letterSpacing: '-0.015em',
            }}>
              Shop Favorites
            </h2>
          </div>
          <a href={SITE.live.allFlavors} {...EXTERNAL_LINK_PROPS} style={{
            fontSize: 14, color: 'var(--brown-800)', textDecoration: 'underline',
            textUnderlineOffset: 4, fontWeight: 500,
          }}>View all products →</a>
        </div>

        {/* variety pack nudge */}
        <div style={{
          background: 'var(--cream-50)',
          border: '1px dashed var(--brown-300)',
          borderRadius: 14,
          padding: '14px 18px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 28, gap: 20, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--brown-800)' }}>
            <Icon name="sparkle" size={18} stroke="var(--brown-700)"/>
            <span style={{ fontWeight: 500 }}>
              Not sure where to start? Try the <em style={{ fontWeight: 600 }}>'Taste it All' variety pack</em>.
            </span>
          </div>
          <a href={SITE.products.tasteItAll} {...EXTERNAL_LINK_PROPS} style={{
            fontWeight: 600, color: 'var(--brown-700)', fontSize: 14,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            See the variety pack <Icon name="chevron-right" size={14} strokeWidth={2}/>
          </a>
        </div>

        <div className="prod-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
        }}>
          {products.map(p => <ProductCard key={p.id} product={p} onAdd={onAdd}/>)}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'center', gap: 10, marginTop: 28, alignItems: 'center',
          color: 'var(--brown-500)',
        }}>
          <button aria-label="prev" style={{ padding: 8 }}><Icon name="chevron-left" size={16}/></button>
          <span style={{ width: 24, height: 6, borderRadius: 6, background: 'var(--brown-700)' }}/>
          <span style={{ width: 6, height: 6, borderRadius: 6, background: 'var(--brown-300)' }}/>
          <span style={{ width: 6, height: 6, borderRadius: 6, background: 'var(--brown-300)' }}/>
          <button aria-label="next" style={{ padding: 8 }}><Icon name="chevron-right" size={16}/></button>
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px)  { .prod-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { ShopFavorites });