// Office — B2B, spec-driven. Distinct from home furniture: dense rows with spec
// columns, blue accent, ergonomic + warranty + load specs as primary metadata.

function OfficePage({ lang, b2b }) {
  const all = window.PENNINN_PRODUCTS_FURNITURE || [];
  const office = all.filter(p => p.kind === "office");
  const [pdp, setPdp] = React.useState(null);

  if (pdp) return <OfficePDP product={pdp} lang={lang} b2b={b2b} onBack={() => setPdp(null)} />;

  return (
    <div className="ofc-page shell">
      <Crumbs items={[t(lang,"Forsíða","Home"), t(lang,"Skrifstofa","Office")]} />

      <section className="ofc-hero">
        <div className="ofc-hero-meta">
          <span className="ofc-eyebrow">▎ {t(lang,"Skrifstofuhúsgögn","Office furniture")}</span>
          <h1 className="ofc-h1">{t(lang,
            <>Skrifstofan,<br/>spec'uð.</>,
            <>The office,<br/>spec'd.</>)}</h1>
          <p className="ofc-lede">
            {t(lang,
              "Herman Miller, Vitra, Kinnarps og Stand-Up frá Penninn. Vottun, ábyrgð og hleðsla — sýnd með vörunni, ekki falin í pdf-i.",
              "Herman Miller, Vitra, Kinnarps and Penninn Stand-Up. Certification, warranty and load — shown with the product, not buried in a PDF.")}
          </p>
          <div className="ofc-quick-facts">
            <div><strong>1.200+</strong>{t(lang,"vörur fyrir vinnustaðinn","workplace SKUs")}</div>
            <div><strong>30</strong>{t(lang,"daga reikningur","day invoice terms")}</div>
            <div><strong>10 ár</strong>{t(lang,"ábyrgð á flestum stólum","warranty on most chairs")}</div>
          </div>
        </div>

        <div className="ofc-hero-card">
          <div className="ofc-hero-card-head">
            <span className="ofc-tag-good">{t(lang,"Magnafsláttur","Volume pricing")}</span>
            <span className="ofc-tag">B2B</span>
          </div>
          <h3>{t(lang,"Pantar þú 10+ stóla?","Ordering 10+ chairs?")}</h3>
          <p>{t(lang,
            "Sjálfvirkur magnafsláttur, samningsverð fyrir samninga, og uppsetning innifalin yfir 1.000.000 kr.",
            "Auto volume discount, contract pricing for contracts, free setup over 1,000,000 kr.")}</p>
          <table className="ofc-tier-table">
            <thead><tr><th>{t(lang,"Magn","Qty")}</th><th>{t(lang,"Afsláttur","Discount")}</th><th>{t(lang,"Dæmi á stól","Per chair")}</th></tr></thead>
            <tbody>
              <tr><td>1–4</td><td>0%</td><td>249.900 kr</td></tr>
              <tr><td>5–9</td><td>−5%</td><td>237.405 kr</td></tr>
              <tr className="is-on"><td>10–24</td><td>−10%</td><td>224.910 kr</td></tr>
              <tr><td>25+</td><td>−15%</td><td>212.415 kr</td></tr>
            </tbody>
          </table>
          <button className="btn-primary ofc-cta" onClick={() => window.PENNINN_GOTO?.("quote")}>{t(lang,"Fá tilboð","Get a quote")} →</button>
        </div>
      </section>

      <section className="ofc-section">
        <header className="ofc-section-head">
          <h2>{t(lang,"Skrifstofustólar","Task chairs")}</h2>
          <div className="ofc-sort">
            <label>{t(lang,"Sía:","Filter:")}</label>
            <select><option>{t(lang,"Allir","All")}</option><option>Herman Miller</option><option>Vitra</option><option>Kinnarps</option><option>Penninn</option></select>
            <select><option>{t(lang,"Vottun: allar","Cert: all")}</option><option>BIFMA</option><option>EN 1335</option><option>Möbelfakta</option></select>
            <select><option>{t(lang,"Ábyrgð: allar","Warranty: all")}</option><option>5 ár+</option><option>10 ár+</option></select>
          </div>
        </header>

        <div className="ofc-table">
          <div className="ofc-table-head">
            <span>{t(lang,"Vara","Product")}</span>
            <span>{t(lang,"Vottun","Cert")}</span>
            <span>{t(lang,"Ábyrgð","Warranty")}</span>
            <span>{t(lang,"Burðargeta","Load")}</span>
            <span>{t(lang,"Verð","Price")}</span>
            <span>{t(lang,"Birgðir","Stock")}</span>
          </div>
          {office.filter(p => p.title.toLowerCase().includes("stóll") || p.title.toLowerCase().includes("mesh") || p.title.toLowerCase().includes("mirra") || p.title.toLowerCase().includes("kinnarps") || p.title.toLowerCase().includes("hildur") || p.title.toLowerCase().includes("trend") || p.title.toLowerCase().includes("ventilo")).map(p => (
            <div key={p.id} className="ofc-row" onClick={() => setPdp(p)} style={{cursor:"pointer"}}>
              <div className="ofc-row-prod">
                <span className="ofc-row-thumb" style={{ background: p.swatch }}>
                  <span className="ofc-row-thumb-back" />
                  <span className="ofc-row-thumb-seat" />
                </span>
                <div>
                  <span className="ofc-row-brand">{p.brand}</span>
                  <strong>{p.title}</strong>
                  <span className="ofc-row-variant">{p.variant}</span>
                </div>
              </div>
              <div className="ofc-row-spec"><span className="ofc-pill">{p.spec?.certified || "—"}</span></div>
              <div className="ofc-row-spec">{p.spec?.warranty || "—"}</div>
              <div className="ofc-row-spec">{p.spec?.load ? p.spec.load + " kg" : "—"}</div>
              <div className="ofc-row-price">
                <strong>{ISK(b2b ? Math.round(p.price * 0.85) : p.price)}</strong>
                {b2b ? <em>{t(lang,"nettó","net")}</em> : (p.was ? <em>{ISK(p.was)}</em> : null)}
                {p.discount > 0 && <DiscountTag pct={p.discount} />}
              </div>
              <div className="ofc-row-stock"><PickupBadge stock={{austurstraeti: 4, kringlan: 2, smaralind: 1, skeifan: 0, hafnarfjordur: 1, akureyri: 1}} lang={lang} compact /></div>
            </div>
          ))}
        </div>
      </section>

      <section className="ofc-standup">
        <div className="ofc-standup-left">
          <span className="ofc-eyebrow">{t(lang,"Sit / standa","Sit / stand")}</span>
          <h2>{t(lang,"Stand-Up II","Stand-Up II")}</h2>
          <p>{t(lang,
            "Rafdrifið hæðarstillanlegt borð. Tveir mótorar, 62–127 cm, 80 kg burðargeta, hávaðastig undir 45 dB. Eik, harðplast, eða spónlagt — sex stærðir.",
            "Electric height-adjustable desk. Dual motor, 62–127 cm, 80 kg load, under 45 dB. Oak, laminate or veneer — six sizes.")}
          </p>
          <ul className="ofc-spec-list">
            <li><span>{t(lang,"Hæðasvið","Range")}</span><b>62 – 127 cm</b></li>
            <li><span>{t(lang,"Mótor","Motor")}</span><b>{t(lang,"Tveir mótorar","Dual motor")}</b></li>
            <li><span>{t(lang,"Burðargeta","Load")}</span><b>80 kg</b></li>
            <li><span>{t(lang,"Hávaði","Noise")}</span><b>&lt; 45 dB</b></li>
            <li><span>{t(lang,"Vottun","Certified")}</span><b>BIFMA · EN 527</b></li>
            <li><span>{t(lang,"Ábyrgð","Warranty")}</span><b>10 {t(lang,"ár","years")}</b></li>
          </ul>
          <div className="ofc-standup-buy">
            <span className="ofc-strike">99.900 kr</span>
            <strong>59.900 kr</strong>
            <DiscountTag pct={40} />
          </div>
          <button className="btn-primary" onClick={() => { const su = office.find(o => o.title.indexOf("Stand-Up")>=0); if (su) setPdp(su); }}>{t(lang,"Spec'a þitt borð","Spec your desk")} →</button>
        </div>

        <div className="ofc-standup-right">
          <div className="ofc-desk">
            <div className="ofc-desk-top" />
            <div className="ofc-desk-leg ofc-desk-leg-l" />
            <div className="ofc-desk-leg ofc-desk-leg-r" />
            <div className="ofc-desk-floor" />
            <div className="ofc-desk-arrows">
              <span className="arrow-up">↑</span>
              <span className="arrow-h">62 – 127 cm</span>
              <span className="arrow-dn">↓</span>
            </div>
          </div>
        </div>
      </section>

      <section className="ofc-services">
        <div className="ofc-service-card">
          <span className="ofc-service-num">01</span>
          <h3>{t(lang,"Vinnurýmiskönnun","Workspace audit")}</h3>
          <p>{t(lang,"Heimsókn til þín, mæling, vinnuvistfræðiskýrsla.","Site visit, measurements, ergonomic report.")}</p>
          <a>{t(lang,"Bóka úttekt","Book audit")} →</a>
        </div>
        <div className="ofc-service-card">
          <span className="ofc-service-num">02</span>
          <h3>{t(lang,"Samningsverð","Contract pricing")}</h3>
          <p>{t(lang,"Langtímasamningar fyrir endurnýjun og viðhald.","Long-term contracts for refresh and maintenance.")}</p>
          <a>{t(lang,"Skoða samninga","See contracts")} →</a>
        </div>
        <div className="ofc-service-card">
          <span className="ofc-service-num">03</span>
          <h3>{t(lang,"Uppsetning","Installation")}</h3>
          <p>{t(lang,"Tekið upp, sett saman, gamla flutt í burtu.","Unpacked, assembled, old gear hauled away.")}</p>
          <a>{t(lang,"Frítt yfir 1m kr","Free over 1m ISK")} →</a>
        </div>
        <div className="ofc-service-card">
          <span className="ofc-service-num">04</span>
          <h3>{t(lang,"Áskrift","Subscribe")}</h3>
          <p>{t(lang,"Mánaðarlegar pantanir á pappír, prentvörum, kaffi.","Monthly orders for paper, print supplies, coffee.")}</p>
          <a>{t(lang,"Setja upp áskrift","Set up subscription")} →</a>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { OfficePage });