/* global React, Icon, Button, Badge, Stars */
const { useState: usePState } = React;

/* ---------- data ---------- */
const PACKS = [
  { id: 'single', bottles: 1, label: '1 Bottle', note: '2-month supply', freq: '2 months', tag: null },
  { id: 'double', bottles: 2, label: '2 Bottles', note: '4-month supply', freq: '4 months', tag: 'MOST POPULAR' }
];

const GALLERY = [
  { src: 'product-hero.png', label: 'Lifestyle' },
  { src: 'product-bottle.jpeg', label: 'Bottle' },
  { src: 'logo-checkout-trust.png', label: 'Reviews' }
];

const BENEFITS = [
  ['heart-pulse', 'Eases GLP-1 constipation'],
  ['leaf', 'Gentle daily fibre'],
  ['sprout', 'Supports gut health'],
  ['badge-check', 'Vegan & UK made'],
  ['flask-conical', 'Lab tested, no nasties']
];

/* ---------- gallery ---------- */
function Gallery({ showBanner = true }) {
  const [active, setActive] = usePState(0);
  return (
    <div>
      <div style={{ display: 'flex', gap: 14 }}>
        {/* thumbnail rail */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: 72, flexShrink: 0 }}>
          {GALLERY.map((g, i) => (
            <button key={i} onClick={() => setActive(i)} style={{ padding: 0, cursor: 'pointer',
              width: 72, height: 72, borderRadius: 10, overflow: 'hidden', background: '#fff',
              border: active === i ? '2px solid var(--green-600)' : '1.5px solid var(--line)',
              transition: 'border-color .12s' }}>
              <img src={`../../assets/${g.src}`} alt={g.label}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </button>
          ))}
        </div>
        {/* main image */}
        <div style={{ flex: 1, position: 'relative', borderRadius: 18, overflow: 'hidden',
          border: '1px solid var(--line)', background: 'var(--green-050)' }}>
          {showBanner && (
          <div style={{ background: 'linear-gradient(90deg, var(--green-700), var(--green-600))',
            color: '#fff', textAlign: 'center', fontWeight: 800, fontSize: 13, letterSpacing: '.01em',
            padding: '10px 12px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}>
            <Icon name="flame" size={14} color="var(--yellow-400)" />
            LIMITED TIME OFFER — SAVE UP TO 61%
            <Icon name="flame" size={14} color="var(--yellow-400)" />
          </div>
          )}
          <div style={{ position: 'relative', minHeight: 380 }}>
            <img src={`../../assets/${GALLERY[active].src}`} alt="Psyllify"
              style={{ width: '100%', height: '100%', minHeight: 380, objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Gallery, PACKS });