// pages/promo.jsx — Campaign combo landing (#/promo/:slug)

var PROMO_FALLBACK = [
  { slug: 'balcony-makeover', name: 'Balcony Makeover', tagline: 'Compact pots, pebbles & greenery for urban balconies', image: 'images/poster-pot-styling.jpeg', discount: 12 },
  { slug: 'white-pot-premium', name: 'White Pot Premium', tagline: 'Premium white pots with polished pebble finish', image: 'images/planter-white-large.jpg', discount: 10 },
  { slug: 'zen-garden', name: 'Zen Garden', tagline: 'Minimal stone, sand & accent planters', image: 'images/buddha-cream-dhyana.jpg', discount: 15 },
  { slug: 'villa-entrance', name: 'Villa Entrance', tagline: 'Statement pots and river stones for grand entryways', image: 'images/poster-home-decor.jpeg', discount: 8 },
  { slug: 'pathway-kit', name: 'Pathway Kit', tagline: 'Stepping stones and border pebbles', image: 'images/poster-path-stones.jpeg', discount: 10 },
  { slug: 'poolside', name: 'Poolside', tagline: 'Heat-resistant pebbles for pool decks', image: 'images/pebble-white-polished.jpg', discount: 12 },
  { slug: 'resort-kit', name: 'Resort Kit', tagline: 'Bulk decorative stone for hospitality landscapes', image: 'images/pebble-mixed-river.jpg', discount: 8 },
];

function resolvePromo(slug) {
  if (window.CustomerGrowth && window.CustomerGrowth.getBundleBySlug) {
    var b = window.CustomerGrowth.getBundleBySlug(slug);
    if (b) return b;
  }
  return PROMO_FALLBACK.find(function (x) { return x.slug === slug; }) || null;
}

function bundleProducts(bundle) {
  var ids = bundle.productIds || [];
  var products = (window.HAP && window.HAP.PRODUCTS) || [];
  if (ids.length) {
    return ids.map(function (id) {
      return products.find(function (p) { return String(p.id) === String(id); });
    }).filter(Boolean);
  }
  return products.slice(0, 4);
}

function PromoPage() {
  var route = useRoute();
  var slug = route.params.slug;
  var bundle = resolvePromo(slug);
  if (!bundle) {
    return (
      <main className="container section">
        <h1 className="serif">Promo not found</h1>
        <a className="btn btn--primary" href="#/">Back home</a>
      </main>
    );
  }

  var parts = bundleProducts(bundle);
  var sum = parts.reduce(function (s, p) { return s + (p.price || 0); }, 0);
  var discount = bundle.pricing ? bundle.pricing.value : (bundle.discount || 10);
  var bundlePrice = bundle.pricing && bundle.pricing.mode === 'fixed'
    ? bundle.pricing.value
    : Math.round(sum * (1 - discount / 100));

  return (
    <main>
      <section style={{ background: 'var(--forest)', color: 'var(--paper)', paddingBlock: 'clamp(48px, 6vw, 96px)' }}>
        <div className="container">
          <div className="crumb" style={{ marginBottom: 12, opacity: 0.75 }}>
            <a href="#/" style={{ color: 'inherit' }}>Home</a><span className="sep">/</span>
            <span className="here">{bundle.name}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems: 'center' }} className="promo-hero">
            <div>
              <span className="eyebrow" style={{ color: 'var(--sage)' }}>Combo offer</span>
              <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 0.98, marginTop: 10 }}>{bundle.name}</h1>
              <p style={{ opacity: 0.85, maxWidth: 520, marginTop: 14 }}>{bundle.tagline}</p>
              <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                <span className="serif" style={{ fontSize: '2.4rem' }}>{HAP.formatPrice(bundlePrice)}</span>
                {sum > bundlePrice && <span style={{ textDecoration: 'line-through', opacity: 0.6 }}>{HAP.formatPrice(sum)}</span>}
                <span className="badge" style={{ background: 'var(--terra)', color: 'var(--paper)' }}>Save {discount}%</span>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
                <a className="btn btn--terra btn--lg" href={'#/build/' + slug}>Configure kit</a>
                <button type="button" className="btn btn--ghost btn--lg" style={{ color: 'var(--paper)', borderColor: 'rgba(255,255,255,0.2)' }} onClick={function () {
                  parts.slice(0, 3).forEach(function (p) {
                    if (p) HAPStore.addToCart(p.id, (p.variants && p.variants[0]) || undefined, 1);
                  });
                }}>Add combo to cart</button>
              </div>
            </div>
            <div style={{ aspectRatio: '4/5', borderRadius: 20, overflow: 'hidden' }}>
              <img src={bundle.heroImage || bundle.image || 'images/poster-home-decor.jpeg'} alt={bundle.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <span className="eyebrow">What's included</span>
          <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8, marginBottom: 20 }}>Curated for this outcome.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 14 }}>
            {parts.map(function (p) {
              return (
                <a key={p.id} href={'#/products/' + p.slug} style={{ background: 'var(--shell)', border: '1px solid var(--line)', borderRadius: 12, padding: 14, display: 'flex', gap: 12 }}>
                  <img src={p.image} alt="" style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8 }} />
                  <div>
                    <div className="serif">{p.name}</div>
                    <div style={{ fontSize: '.85rem', color: 'var(--muted)' }}>{HAP.formatPrice(p.price)}</div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 880px) { .promo-hero { grid-template-columns: 1fr !important; } }`}</style>
    </main>
  );
}

window.PromoPage = PromoPage;