/* eslint-disable */
/* SaleHero — full-bleed editorial clearance takeover for the homepage.
   Deep ink + oxblood atmosphere, colossal Cormorant display with a gold-foil
   shimmer line, staggered load reveal, a live ticking countdown, and one CTA to
   the promo collection. Auto-reverts to the brand Hero (passed as `fallback`)
   the moment the sale window closes — no redeploy needed.

   DATA-DRIVEN: copy / tiers / window end / collection handle come from
   window.DropPromo (the active rivvet_commerce.storefront_promos row, fetched by
   js/promo.js). With no live promo, DropPromo.* returns the brand fallback
   (DROP_CONFIG.promoFallback) — the exact 2026-06-16 values — so this renders
   pixel-for-pixel like the original hard-coded sale. Brand-agnostic: no DROP
   strings live here. To retire: delete <SaleHero> in index.html. 2026-06-16. */

function SaleHero({ fallback = null }) {
  if (window.DropPromo && window.DropPromo.usePromo) window.DropPromo.usePromo(); // re-render on 'drop:promo-ready'
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  const dp = window.DropPromo || {};
  const endMs = dp.endMs ? dp.endMs() : Date.UTC(2026, 5, 22, 5, 59, 0);
  const left = endMs - now;
  if (left <= 0) return fallback;

  const copy = dp.copy ? dp.copy() : {};
  const tiers = dp.tiers ? dp.tiers() : [{ min: 2, pct: 25 }, { min: 3, pct: 40 }];
  const d = Math.floor(left / 86400000);
  const h = Math.floor((left % 86400000) / 3600000);
  const m = Math.floor((left % 3600000) / 60000);
  const s = Math.floor((left % 60000) / 1000);
  const pad = (n) => String(n).padStart(2, "0");
  const handle = (dp.collectionHandle ? dp.collectionHandle() : "jewelry-clearance");
  const href = (typeof window !== "undefined" && window.colHref)
    ? window.colHref(handle)
    : "collection.html?handle=" + handle;

  // Render tier rows from data. First tier reads "Buy N", the rest "Buy N or more".
  const tierLabel = (t, i) => i === tiers.length - 1 && tiers.length > 1 ? "Buy " + t.min + " or more" : "Buy " + t.min;

  return (
    <section className="sale-hero" aria-label="Jewelry clearance sale">
      <div className="sale-hero__bg" aria-hidden="true"></div>
      <div className="sale-hero__grain" aria-hidden="true"></div>
      <div className="sale-hero__frame" aria-hidden="true"></div>
      <div className="sale-hero__inner">
        <p className="sale-hero__eyebrow"><span className="sale-hero__pulse"></span>{copy.eyebrow}</p>
        <h1 className="sale-hero__title">
          <span className="sale-hero__line">{copy.line1}</span>
          <span className="sale-hero__line sale-hero__line--gold">{copy.line2}</span>
        </h1>
        <div className="sale-hero__tiers">
          {tiers.map((t, i) => (
            <React.Fragment key={t.min}>
              {i > 0 && <span className="sale-hero__tier-div" aria-hidden="true"></span>}
              <div className="sale-hero__tier"><strong>{tierLabel(t, i)}</strong><span>take {t.pct}% off</span></div>
            </React.Fragment>
          ))}
        </div>
        <div className="sale-hero__count" role="timer" aria-label="Sale ends in">
          <span className="sale-hero__count-label">Ends Sunday</span>
          <span className="sale-hero__count-clock">
            {d}<em>d</em><i>·</i>{pad(h)}<em>h</em><i>·</i>{pad(m)}<em>m</em><i>·</i>{pad(s)}<em>s</em>
          </span>
        </div>
        <a className="sale-hero__cta" href={href}>{copy.cta} <span aria-hidden="true">→</span></a>
        <p className="sale-hero__fine">Discount applies automatically at checkout · Jewelry only</p>
      </div>
    </section>
  );
}
window.SaleHero = SaleHero;