// Tilboð mánaðarins — monthly deals across all categories.
// Tasteful single page: hero with two featured deals, per-category sections,
// each tinted with its own accent so categories feel separated but unified.

function DealsPage({ lang, setMode }) {
  const all = window.PENNINN_PRODUCTS_FURNITURE || [];
  const stat = window.PENNINN_PRODUCTS_STATIONERY || [];
  const gift = window.PENNINN_PRODUCTS_GIFTWARE || [];
  const books = window.PENNINN_PRODUCTS?.books || [];

  const officeDeals = all.filter(p => p.kind === "office" && p.discount > 0);
  const homeDeals   = all.filter(p => p.kind === "home"   && p.discount > 0);
  const statDeals   = stat.filter(p => p.discount > 0);
  const giftDeals   = gift.filter(p => p.discount > 0);
  const bookDeals   = books.filter(b => b.discount > 0 || b.was);

  // Feature heroes
  const heroA = officeDeals.find(p => p.title.includes("Stand-Up")) || officeDeals[0];
  const heroB = giftDeals.find(p => p.title.includes("Chubby")) || giftDeals[0];

  // Countdown to end of month
  const now = new Date();
  const eom = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  const daysLeft = Math.max(0, Math.ceil((eom - now) / (1000 * 60 * 60 * 24)));
  const monthName = now.toLocaleDateString(lang === "en" ? "en-US" : "is-IS", { month: "long", year: "numeric" });

  // Aggregate savings if you bought one of each
  const allDealItems = [...officeDeals, ...homeDeals, ...statDeals, ...giftDeals, ...bookDeals.filter(b => b.was)];
  const totalSavings = allDealItems.reduce((s, p) => {
    const was = p.was || Math.round(p.price / (1 - (p.discount || 0) / 100));
    return s + (was - p.price);
  }, 0);

  return (
    <div className="deals-page">
      <Crumbs items={[t(lang,"Forsíða","Home"), t(lang,"Tilboð mánaðarins","Deals of the month")]} />

      {/* HERO STRIP */}
      <section className="deals-hero shell">
        <div className="deals-hero-meta">
          <span className="deals-eyebrow">● {t(lang,"Tilboð mánaðarins","Deals of the month")} · {monthName}</span>
          <h1 className="deals-h1">
            {t(lang, <>Vönduð úrval,<br/><em>lægra verð.</em></>, <>Curated picks,<br/><em>lower prices.</em></>)}
          </h1>
          <p className="deals-lede">
            {t(lang,
              "Ráðgjafar okkar hafa valið það besta úr öllum deildum — frá skrifstofuhúsgögnum til keramíks frá HAY. Allt að 50% afsláttur, gildir út mánuðinn.",
              "Our buyers picked the best across every department — from office furniture to HAY ceramics. Up to 50% off, valid through the month.")}
          </p>
          <div className="deals-stats">
            <div><strong>−50%</strong>{t(lang,"hæsti afsláttur","biggest discount")}</div>
            <div><strong>{allDealItems.length}</strong>{t(lang,"vörur á tilboði","items on sale")}</div>
            <div><strong>{daysLeft}</strong>{t(lang,"dagar eftir","days remaining")}</div>
          </div>
        </div>

        {/* Two feature cards side by side */}
        <div className="deals-hero-features">
          <a className="deals-hero-feature deals-hero-a" onClick={() => setMode && setMode("office")}>
            <span className="deals-hero-tag">−{heroA?.discount || 40}%</span>
            <div className="deals-hero-art">
              <div className="deals-desk">
                <span className="deals-desk-top" />
                <span className="deals-desk-leg" style={{left: "26%"}} />
                <span className="deals-desk-leg" style={{right: "26%"}} />
              </div>
            </div>
            <div className="deals-hero-text">
              <span className="deals-hero-eyebrow">{t(lang,"Skrifstofa","Office")} · {heroA?.brand}</span>
              <h3>{heroA?.title}</h3>
              <span className="deals-hero-variant">{heroA?.variant}</span>
              <div className="deals-hero-price">
                <strong>{ISK(heroA?.price || 0)}</strong>
                <span>{ISK(heroA?.was || 0)}</span>
              </div>
            </div>
            <span className="deals-hero-arrow">→</span>
          </a>

          <a className="deals-hero-feature deals-hero-b" onClick={() => setMode && setMode("giftware")}>
            <span className="deals-hero-tag">−{heroB?.discount || 50}%</span>
            <div className="deals-hero-art">
              <div className="deals-vase" style={{ background: heroB?.swatch }} />
              <div className="deals-vase-shadow" />
            </div>
            <div className="deals-hero-text">
              <span className="deals-hero-eyebrow">{t(lang,"Heimili","Home")} · {heroB?.brand}</span>
              <h3>{heroB?.title}</h3>
              <span className="deals-hero-variant">{heroB?.variant}</span>
              <div className="deals-hero-price">
                <strong>{ISK(heroB?.price || 0)}</strong>
                <span>{ISK(heroB?.was || 0)}</span>
              </div>
            </div>
            <span className="deals-hero-arrow">→</span>
          </a>
        </div>
      </section>

      {/* QUICK NAV */}
      <nav className="deals-jump shell">
        {[
          { id: "office",     is: "Skrifstofa",       en: "Office",       n: officeDeals.length, c: "#1d3557" },
          { id: "home",       is: "Heimili",           en: "Home",         n: homeDeals.length,   c: "#3c4a36" },
          { id: "stationery", is: "Ritföng",           en: "Stationery",   n: statDeals.length,   c: "#d4751a" },
          { id: "giftware",   is: "Gjafavara",         en: "Gifts",        n: giftDeals.length,   c: "#c45a3a" },
          { id: "books",      is: "Bækur",             en: "Books",        n: bookDeals.length,   c: "#7a2230" },
        ].map(s => (
          <a key={s.id} href={"#deals-" + s.id} className="deals-jump-item" style={{ "--c": s.c }}>
            <span>{t(lang, s.is, s.en)}</span>
            <em>{s.n}</em>
          </a>
        ))}
      </nav>

      {/* OFFICE DEALS */}
      <DealsSection
        id="office"
        eyebrow={t(lang,"Skrifstofa","Office")}
        title={t(lang,"Stólar og borð fyrir vinnustaðinn","Chairs and desks for the workplace")}
        accent="#1d3557"
        soft="#eaeef4"
        items={officeDeals.slice(0, 4)}
        onSeeAll={() => setMode && setMode("office")}
        lang={lang}
        kind="furniture"
      />

      {/* HOME FURNITURE DEALS */}
      <DealsSection
        id="home"
        eyebrow={t(lang,"Heimili & húsgögn","Home & Furniture")}
        title={t(lang,"Hönnun fyrir stofuna og borðstofuna","Design for the living and dining room")}
        accent="#3c4a36"
        soft="#eee8db"
        items={homeDeals.slice(0, 3)}
        onSeeAll={() => setMode && setMode("furniture")}
        lang={lang}
        kind="furniture"
      />

      {/* STATIONERY DEALS */}
      <DealsSection
        id="stationery"
        eyebrow={t(lang,"Ritföng","Stationery")}
        title={t(lang,"Pennar og minnisbækur, allt að 30%","Pens and notebooks, up to 30% off")}
        accent="#d4751a"
        soft="#fdebc8"
        items={statDeals.slice(0, 4)}
        onSeeAll={() => setMode && setMode("stationery")}
        lang={lang}
        kind="stationery"
      />

      {/* GIFTWARE DEALS */}
      <DealsSection
        id="giftware"
        eyebrow={t(lang,"Gjafavara","Gifts")}
        title={t(lang,"HAY kerti, vasar og teppi","HAY candles, vases and throws")}
        accent="#c45a3a"
        soft="#fde0c8"
        items={giftDeals.slice(0, 4)}
        onSeeAll={() => setMode && setMode("giftware")}
        lang={lang}
        kind="giftware"
      />

      {/* BOOKS DEALS */}
      {bookDeals.length > 0 && (
        <DealsSection
          id="books"
          eyebrow={t(lang,"Bækur","Books")}
          title={t(lang,"Bækur með lækkuðu verði","Books at reduced prices")}
          accent="#7a2230"
          soft="#ebe0cb"
          items={bookDeals.slice(0, 4)}
          onSeeAll={() => setMode && setMode("books")}
          lang={lang}
          kind="books"
        />
      )}

      {/* BUNDLE CTA */}
      <section className="deals-bundle shell">
        <div>
          <span className="deals-eyebrow">★ {t(lang,"Pakkasmiður","Bundle builder")}</span>
          <h2>{t(lang,"Settu saman pakka — bætum við 12% á toppinn","Build a bundle — add 12% on top")}</h2>
          <p>{t(lang,
            "Sameinaðu vörur úr fleiri deildum og fáðu pakkaafslátt ofan á tilboðsverð. Innanhússráðgjafi getur sett saman fyrir þig.",
            "Combine items from multiple departments and stack a bundle discount on top of sale prices. An interior consultant can curate one for you.")}</p>
          <div className="deals-bundle-actions">
            <button className="btn-primary btn-on-dark" onClick={() => setMode && setMode("bundle")}>
              {t(lang,"Smíða pakka","Build a bundle")} →
            </button>
            <button className="btn-ghost deals-ghost-on-dark" onClick={() => setMode && setMode("quote")}>
              {t(lang,"Fyrirtækjatilboð","Business quote")}
            </button>
          </div>
        </div>
        <div className="deals-bundle-savings">
          <span className="deals-eyebrow" style={{color: "#caa97a"}}>{t(lang,"Heildarlækkun","Total reduction")}</span>
          <strong>{ISK(totalSavings)}</strong>
          <span>{t(lang,"ef þú keyptir allar tilboðsvörurnar","if you bought one of each on sale")}</span>
        </div>
      </section>

      <p className="deals-fineprint shell">
        {t(lang,
          `Tilboð gilda til ${eom.toLocaleDateString("is-IS", {day:"numeric", month:"long"})} eða á meðan birgðir endast. Ekki er hægt að sameina við aðra afslætti nema sérstaklega tekið fram. Verð að án vsk fyrir fyrirtæki sýnt þegar fyrirtækjasýn er virk.`,
          `Prices valid until ${eom.toLocaleDateString("en-US", {day:"numeric", month:"long"})} or while stocks last. Not combinable with other discounts unless stated. Prices ex-VAT for businesses shown when business view is active.`)}
      </p>
    </div>
  );
}

function DealsSection({ id, eyebrow, title, accent, soft, items, onSeeAll, lang, kind }) {
  if (!items || items.length === 0) return null;
  return (
    <section className="deals-section" id={"deals-" + id} style={{ "--c": accent, "--soft-c": soft }}>
      <div className="shell">
        <header className="deals-section-head">
          <div>
            <span className="deals-eyebrow">{eyebrow} · −{Math.max(...items.map(i => i.discount || 0))}% {t(lang,"hámark","max")}</span>
            <h2>{title}</h2>
          </div>
          <a className="deals-section-link" onClick={onSeeAll}>{t(lang,"Sjá öll tilboð","See all deals")} →</a>
        </header>

        <div className="deals-grid" data-count={items.length}>
          {items.map(p => <DealsCard key={p.id} p={p} kind={kind} lang={lang} />)}
        </div>
      </div>
    </section>
  );
}

function DealsCard({ p, kind, lang }) {
  if (kind === "books") {
    return (
      <a className="deals-card deals-card-book">
        <div className={"deals-book-cover cover-" + p.cover}>
          <em>{p.author}</em>
          <b>{p.title}</b>
        </div>
        <span className="deals-disc">−{p.discount || 20}%</span>
        <div className="deals-card-meta">
          <strong>{p.title}</strong>
          <span className="deals-card-sub">{p.author}</span>
          <div className="deals-card-price-row">
            <span className="deals-card-price">{ISK(p.price)}</span>
            {p.was && <span className="deals-card-was">{ISK(p.was)}</span>}
          </div>
        </div>
      </a>
    );
  }
  if (kind === "stationery") {
    return (
      <a className="deals-card deals-card-stat">
        <div className="deals-card-thumb" style={{ background: p.swatch }}>
          <div className="deals-stat-shape" />
          <span className="deals-disc">−{p.discount}%</span>
        </div>
        <div className="deals-card-meta">
          <span className="deals-card-brand">{p.brand}</span>
          <strong>{p.title}</strong>
          <span className="deals-card-sub">{p.color}</span>
          <div className="deals-card-price-row">
            <span className="deals-card-price">{ISK(p.price)}</span>
            {p.was && <span className="deals-card-was">{ISK(p.was)}</span>}
          </div>
        </div>
      </a>
    );
  }
  if (kind === "giftware") {
    return (
      <a className="deals-card deals-card-gift">
        <div className="deals-card-thumb deals-card-thumb-round" style={{ background: p.swatch }}>
          <span className="deals-gift-shape" data-kind={shapeKind ? shapeKind(p.title) : "block"} />
          <span className="deals-disc">−{p.discount}%</span>
        </div>
        <div className="deals-card-meta">
          <span className="deals-card-brand">{p.brand}</span>
          <strong>{p.title}</strong>
          {p.variant && <span className="deals-card-sub">{p.variant}</span>}
          <div className="deals-card-price-row">
            <span className="deals-card-price">{ISK(p.price)}</span>
            {p.was && <span className="deals-card-was">{ISK(p.was)}</span>}
          </div>
        </div>
      </a>
    );
  }
  // furniture
  return (
    <a className="deals-card deals-card-furn">
      <div className="deals-card-thumb" style={{ background: p.swatch === "#1a1a1a" ? "#efece4" : "#f5f1ea" }}>
        <span className="deals-furn-shape" style={{ background: p.swatch }} />
        <span className="deals-disc">−{p.discount}%</span>
      </div>
      <div className="deals-card-meta">
        <span className="deals-card-brand">{p.brand}</span>
        <strong>{p.title}</strong>
        <span className="deals-card-sub">{p.variant}</span>
        <div className="deals-card-price-row">
          <span className="deals-card-price">{ISK(p.price)}</span>
          {p.was && <span className="deals-card-was">{ISK(p.was)}</span>}
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { DealsPage });