/* Product Detail Page — the core "buy" block */

const PACKS = [
  { id: 'single', label: '1 Bottle · 200ml', name: 'Single Bottle', price: 899, was: 1099, badge: null, perBottle: 899, savings: 'Save ₹200' },
  { id: 'three',  label: '3 Bottles · 600ml', name: 'Three Pack', price: 1699, was: 2697, badge: 'Best value', perBottle: 567, savings: 'Save ₹998' },
];

const PDP = ({ selectedPack, setPack, qty, setQty, onAdd }) => {
  const [activeImg, setActiveImg] = React.useState(0);
  const pack = PACKS.find(p => p.id === selectedPack);

  return (
    <section className="section pdp" id="shop">
      <div className="shell pdp-inner">
        <div className="pdp-gallery">
          <div className="gallery-bg"></div>
          <div className="gallery-thumbs">
            <div className={`thumb ${activeImg === 0 ? 'active' : ''}`} onClick={() => setActiveImg(0)}>
              <img src="assets/product-bottle-box.jpeg" alt="" />
            </div>
            <div className={`thumb ${activeImg === 1 ? 'active' : ''}`} onClick={() => setActiveImg(1)}>
              <Decor.SmallBerries size={50} />
            </div>
            <div className={`thumb swatch ${activeImg === 2 ? 'active' : ''}`} onClick={() => setActiveImg(2)}>
              <Icon.Leaf size={20} />
            </div>
            <div className={`thumb swatch dark ${activeImg === 3 ? 'active' : ''}`} onClick={() => setActiveImg(3)}>3×</div>
          </div>
          <img src="assets/product-bottle-box.jpeg" alt="Orlina Sea Buckthorn Juice"
               style={{ mixBlendMode: 'multiply' }} />
          {/* decorative berries */}
          <div style={{ position: 'absolute', top: 20, right: 20, opacity: 0.85, transform: 'rotate(20deg)' }}>
            <Decor.BerryBranch size={140} flip />
          </div>
          <div style={{ position: 'absolute', bottom: 16, left: 90 }}>
            <Decor.SmallBerries size={68} />
          </div>
        </div>

        <div className="pdp-info">
          <span className="eyebrow">Orlina · Hippophae rhamnoides</span>
          <h2 className="display">Sea Buckthorn Juice<br /><em style={{fontSize: '0.7em'}}>200 ml · cold pressed.</em></h2>

          <div className="rating-row">
            <span className="stars">★★★★★</span>
            <b style={{ color: 'var(--brown-900)' }}>4.9</b>
            <span>· based on 1,284 verified reviews</span>
          </div>

          <p className="sub">
            Single-origin sea buckthorn berries from Ladakh, cold-pressed within hours of harvest. A rich daily source of vitamin C, the full omega 3-6-7-9 profile, and 190+ bioactives. No water, no concentrate, no sugar.
          </p>

          <div className="price-row" style={{ marginTop: 28 }}>
            <span className="price-now">₹{pack.price.toLocaleString('en-IN')}</span>
            <span className="price-was">₹{pack.was.toLocaleString('en-IN')}</span>
            <span className="save-badge">{pack.savings}</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--brown-700)' }}>
            ₹{pack.perBottle} per 200ml bottle · Free shipping over ₹1,500
          </div>

          <div className="size-pack">
            {PACKS.map(p => (
              <button key={p.id} className={`pack-card ${selectedPack === p.id ? 'selected' : ''}`}
                      onClick={() => setPack(p.id)}>
                {p.badge && <span className="best">{p.badge}</span>}
                <div className="pack-label">{p.label}</div>
                <div className="pack-name">{p.name}</div>
                <div className="pack-price">
                  <b>₹{p.price.toLocaleString('en-IN')}</b>
                  <s>₹{p.was.toLocaleString('en-IN')}</s>
                </div>
                <div className="pack-savings">{p.savings} · ₹{p.perBottle}/bottle</div>
              </button>
            ))}
          </div>

          <div className="qty-row">
            <div className="qty-stepper">
              <button onClick={() => setQty(Math.max(1, qty - 1))} aria-label="Decrease">−</button>
              <span className="num">{qty}</span>
              <button onClick={() => setQty(qty + 1)} aria-label="Increase">+</button>
            </div>
            <button className="btn btn-primary add-cart" onClick={onAdd}>
              Add to cart · ₹{(pack.price * qty).toLocaleString('en-IN')} <Icon.Arrow />
            </button>
          </div>

          <div className="pdp-trust">
            <div className="t"><Icon.Truck /> Free shipping over ₹1,500</div>
            <div className="t"><Icon.Shield /> FSSAI certified · lab-tested</div>
            <div className="t"><Icon.Refresh /> 14-day money back</div>
            <div className="t"><Icon.Lab /> Cold-pressed, no heat</div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.PDP = PDP;
window.PACKS = PACKS;