/* eslint-disable */
/* SaleHero — Independence Day homepage takeover. Full-bleed editorial still-life
   (midnight + gold flat-lay) with the headline INDEPENDENCE DAY / UP TO 40% OFF /
   SITEWIDE rendered into the artwork itself. The only live overlay is a ticking
   countdown + a single CTA, anchored low over the image's empty negative space.

   Responsive: a landscape crop for wide screens, a 4:5 portrait crop for phones
   (swapped via <picture>). Both carry the same typography, so the message is
   identical at every width.

   DATA-DRIVEN: window end / CTA copy / 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 moment the window closes this returns
   `fallback` (the brand Hero) — no redeploy needed. To retire: delete <SaleHero>
   in index.html. 2026-06-29. */

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, 6, 7, 5, 59, 0);
  const left = endMs - now;
  if (left <= 0) return fallback;

  const copy = dp.copy ? dp.copy() : {};
  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");
  // Weekday label derived from the actual sale end, in store time (Mountain),
  // so it never drifts by visitor timezone or hard-codes the wrong day.
  let endLabel = "soon";
  try { endLabel = new Date(endMs).toLocaleDateString("en-US", { weekday: "long", timeZone: "America/Denver" }); } catch (_) {}
  const handle = (dp.collectionHandle ? dp.collectionHandle() : "editors-picks");
  const href = (typeof window !== "undefined" && window.colHref)
    ? window.colHref(handle)
    : "collection.html?handle=" + handle;
  const cta = copy.cta || "Shop the sale";

  return (
    <section className="sale-hero" aria-label="Independence Day sale, up to 40% off sitewide">
      <picture className="sale-hero__pic">
        <source media="(max-width: 700px)" srcSet="assets/sale-id-mobile.jpg" />
        <img
          className="sale-hero__img"
          src="assets/sale-id-web.jpg"
          alt="DROP Independence Day sale — up to 40% off sitewide. A gold jewelry flat-lay on deep midnight."
          fetchpriority="high"
          decoding="async"
        />
      </picture>
      <div className="sale-hero__scrim" aria-hidden="true"></div>
      <div className="sale-hero__overlay">
        <div className="sale-hero__count" role="timer" aria-label="Sale ends in">
          <span className="sale-hero__count-label">Ends {endLabel}</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}>{cta} <span aria-hidden="true">→</span></a>
        <p className="sale-hero__fine">Sitewide · discount applies automatically at checkout</p>
      </div>
    </section>
  );
}
window.SaleHero = SaleHero;