// DiscountSection.jsx — the entire discount UI system
// Contains: WeeklyDeal, MonthlyDeal, OfferGrid, HappyHourBands

function WeeklyDeal({ img, eyebrow = "Ukens tilbud", title, desc, newPrice, oldPrice, activeDays = ["O"] }) {
  const days = ["M","T","O","T","F","L","S"];
  return (
    <div className="jv-weekly">
      <div className="jv-weekly-days">
        {days.map((d, i) => (
          <span key={i} className={"jv-weekly-day" + (activeDays.includes(d) || activeDays.includes(i) ? " on" : "")}>{d}</span>
        ))}
      </div>
      <div className="jv-weekly-img"><img src={img} alt="" /></div>
      <div className="jv-weekly-meta">
        <div className="eye">{eyebrow}</div>
        <div className="t">{title}</div>
        <div className="d">{desc}</div>
      </div>
      <div className="jv-weekly-price">
        <div className="new">{newPrice}</div>
        <div className="old">{oldPrice}</div>
      </div>
    </div>
  );
}

function MonthlyDeal({ img, eyebrow = "Månedens tilbud", title, desc, newPrice, oldPrice, expires, discount }) {
  return (
    <div className="jv-monthly">
      {discount && <div className="ribbon">{discount}</div>}
      <div className="jv-monthly-img"><img src={img} alt="" /></div>
      <div className="jv-monthly-body">
        <div className="eye">{eyebrow}</div>
        <div className="t">{title}</div>
        <div className="d">{desc}</div>
        <div className="jv-monthly-row">
          <span className="new">{newPrice}</span>
          <span className="old">{oldPrice}</span>
          {expires && (
            <div className="cd">
              <div className="cdl">Gyldig til</div>
              <div className="cdv">{expires}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function OfferCard({ img, emoji, imgBg = "orange", tag = "Faste tilbud", tagTone = "orange", title, desc, newPrice, oldPrice }) {
  return (
    <div className="jv-offer">
      <div className={"jv-offer-img " + imgBg}>
        {img && <img src={img} alt="" />}
        {!img && emoji && <span style={{ fontSize: 72, lineHeight: 1 }}>{emoji}</span>}
      </div>
      <div className="jv-offer-body">
        <span className={"jv-offer-tag" + (tagTone === "green" ? " green" : "")}>{tag}</span>
        <div className="jv-offer-title">{title}</div>
        {desc && <div className="jv-offer-desc">{desc}</div>}
        <div className="jv-offer-price">
          {newPrice}{oldPrice && <span className="old">{oldPrice}</span>}
        </div>
      </div>
    </div>
  );
}

function HappyHourBands({ bands }) {
  return (
    <div className="jv-bands">
      {bands.map((b, i) => (
        <div key={i} className={"jv-band" + (b.tone === "green" ? " green" : "")}>
          <div className="jv-band-ic">{b.icon}</div>
          <div className="jv-band-txt">
            <div className="jv-band-t">{b.title}</div>
            <div className="jv-band-d">{b.desc}</div>
          </div>
          <div className="jv-band-when">{b.when}</div>
        </div>
      ))}
    </div>
  );
}

function DiscountSection() {
  return (
    <section className="jv-section" id="tilbud">
      <div className="jv-section-inner">
        <div className="jv-eyebrow">🔥 Ikke gå glipp av</div>
        <h2 className="jv-section-title">Månedens <em>tilbud</em></h2>

        <div className="jv-offers">
          <OfferCard
            emoji="🍕"
            imgBg="orange"
            tag="Månedens tilbud"
            title="Pizza Duo"
            desc="2 stk Medium pizzaer + 2 dressinger. Velg dine favoritter fra menyen."
            newPrice="429 kr"
            oldPrice="ca. 477 kr"
          />
          <OfferCard
            emoji="🌯"
            imgBg="green"
            tag="Kebab Combo"
            tagTone="green"
            title="Kebab Combo"
            desc="Kebabrull + drikke 0,5L + pommes frites. En komplett middag!"
            newPrice="189 kr"
            oldPrice="209 kr"
          />
          <OfferCard
            emoji="🍔"
            imgBg="orange"
            tag="Månedens tilbud"
            title="Double Jafs"
            desc="2 stk Jafs Burger 200g meny. Perfekt når du er ordentlig sulten!"
            newPrice="389 kr"
            oldPrice="428 kr"
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WeeklyDeal, MonthlyDeal, OfferCard, HappyHourBands, DiscountSection });