// Office PDP — full spec sheet, tier pricing, B2B fields, comparison.

function OfficePDP({ product: p, lang, onBack, b2b }) {
  const [qty, setQty] = React.useState(1);
  const [tab, setTab] = React.useState("specs");
  const [model, setModel] = React.useState("triflex");

  const tiers = [
    { range: "1–4",   min: 1,  max: 4,   pct: 0 },
    { range: "5–9",   min: 5,  max: 9,   pct: 5 },
    { range: "10–24", min: 10, max: 24,  pct: 10 },
    { range: "25–49", min: 25, max: 49,  pct: 15 },
    { range: "50+",   min: 50, max: 999, pct: 20 },
  ];
  const activeTier = tiers.find(t => qty >= t.min && qty <= t.max) || tiers[0];
  const baseUnit = b2b ? Math.round(p.price * 0.85) : p.price;
  const unit = Math.round(baseUnit * (1 - activeTier.pct / 100));

  const tabs = [
    { id: "specs",     label: t(lang,"Spec sheet","Spec sheet") },
    { id: "tiers",     label: t(lang,"Magnafsláttur","Volume pricing") },
    { id: "compare",   label: t(lang,"Samanburður","Compare") },
    { id: "warranty",  label: t(lang,"Ábyrgð & vottun","Warranty & cert") },
    { id: "downloads", label: t(lang,"Niðurhal","Downloads"), count: 4 },
  ];

  return (
    <div className="pdp ofc-pdp shell">
      <Crumbs items={[
        t(lang,"Forsíða","Home"),
        t(lang,"Skrifstofa","Office"),
        p.brand,
        p.title,
      ]} />
      <PDPBack onBack={onBack} lang={lang} label={t(lang,"Til baka","Back to office")} />

      <div className="pdp-grid ofc-pdp-grid">
        <div className="pdp-visual ofc-pdp-visual">
          <div className="ofc-pdp-stage">
            <div className="ofc-pdp-chair">
              <div className="ofc-pdp-chair-back" style={{ background: p.swatch }} />
              <div className="ofc-pdp-chair-seat" style={{ background: p.swatch }} />
              <div className="ofc-pdp-chair-armrest ofc-pdp-armrest-l" />
              <div className="ofc-pdp-chair-armrest ofc-pdp-armrest-r" />
              <div className="ofc-pdp-chair-column" />
              <div className="ofc-pdp-chair-wheels">
                <span /><span /><span /><span /><span />
              </div>
            </div>
            <span className="ofc-pdp-stage-spec">{p.spec?.certified || "BIFMA"}</span>
            <span className="ofc-pdp-stage-grid" />
          </div>

          <div className="ofc-pdp-tabs-thumb">
            <button className="ofc-pdp-thumb is-on">{t(lang,"Vörumynd","Product")}</button>
            <button className="ofc-pdp-thumb">{t(lang,"Hlið","Side")}</button>
            <button className="ofc-pdp-thumb">{t(lang,"Stillingar","Controls")}</button>
            <button className="ofc-pdp-thumb">CAD</button>
            <button className="ofc-pdp-thumb">3D</button>
          </div>

          <div className="ofc-pdp-cert-row">
            {["BIFMA X5.1","EN 1335","Möbelfakta","Greenguard"].map(c => (
              <span key={c} className="ofc-pdp-cert">✓ {c}</span>
            ))}
          </div>
        </div>

        <div className="pdp-buy">
          <span className="pdp-eyebrow">{p.brand} · SKU OFC-{p.id.toUpperCase()}-001</span>
          <h1 className="pdp-title">{p.title}</h1>
          <p className="pdp-subtitle">{p.variant}</p>

          <div className="pdp-rating">
            <Stars rating={4.7} />
            <span>4.7 · 142 {t(lang,"vinnustaðir","workplaces")}</span>
            <span>· {t(lang,"Vottun","Certified")} BIFMA X5.1</span>
          </div>

          <div className="pdp-variant-row">
            <span className="pdp-variant-label">{t(lang,"Útgáfa:","Model:")} <em>{model === "triflex" ? "Triflex back" : model === "butterfly" ? "Butterfly back" : "FlexFront back"}</em></span>
            <div className="pdp-variant-chips">
              {[
                { id: "triflex",   name: "Triflex" },
                { id: "butterfly", name: "Butterfly" },
                { id: "flex",      name: "FlexFront" },
              ].map(m => (
                <button key={m.id} className={"pdp-chip " + (model === m.id ? "is-on" : "")} onClick={() => setModel(m.id)}>
                  <span>{m.name}</span>
                </button>
              ))}
            </div>
          </div>

          {/* B2B price block */}
          <div className="ofc-pdp-price-block">
            <div className="ofc-pdp-price-row">
              <div>
                <span className="pdp-eyebrow">{b2b ? t(lang,"Nettóverð, B2B","Net price, B2B") : t(lang,"Listaverð","List price")}</span>
                <strong className="ofc-pdp-price">{ISK(unit)}</strong>
                {b2b && <em className="ofc-pdp-vat">{t(lang,"án vsk","ex VAT")}</em>}
              </div>
              {activeTier.pct > 0 && (
                <span className="ofc-pdp-tier-badge">
                  −{activeTier.pct}% <em>{t(lang,"magn " + activeTier.range, "qty " + activeTier.range)}</em>
                </span>
              )}
            </div>
            <div className="ofc-pdp-tier-bar">
              {tiers.map((tr, i) => (
                <div key={i} className={"ofc-pdp-tier-step " + (tr === activeTier ? "is-on" : qty > tr.max ? "is-past" : "")}>
                  <span>{tr.range}</span>
                  <em>{tr.pct === 0 ? "—" : "−" + tr.pct + "%"}</em>
                </div>
              ))}
            </div>
          </div>

          <div className="pdp-cta-row">
            <QtyStepper qty={qty} setQty={setQty} max={500} />
            <button className="pdp-cta">
              <span>{qty >= 5 ? t(lang,"Fá tilboð","Get a quote") : t(lang,"Setja í körfu","Add to cart")}</span>
              <span>·</span>
              <span>{ISK(unit * qty)}</span>
            </button>
          </div>

          <div className="ofc-pdp-summary">
            <div><span>{t(lang,"Verð á stól","Per chair")}</span><strong>{ISK(unit)}</strong></div>
            <div><span>{t(lang,"× Magn","× Qty")}</span><strong>{qty}</strong></div>
            <div><span>{t(lang,"Sparnaður","You save")}</span><strong className={activeTier.pct > 0 ? "ok" : ""}>{activeTier.pct > 0 ? ISK((baseUnit - unit) * qty) : "—"}</strong></div>
            <div><span>{t(lang,"Samtals","Total")}</span><strong className="big">{ISK(unit * qty)}</strong></div>
          </div>

          <div className="ofc-pdp-b2b-row">
            <span className="ofc-pdp-b2b-tag">B2B</span>
            <span>{t(lang,"30 daga reikningur · 10 ára ábyrgð · Uppsetning frí yfir 1m kr","30-day invoice · 10-year warranty · Free setup over 1m ISK")}</span>
          </div>

          <PickupFull stock={{austurstraeti: 4, kringlan: 7, smaralind: 2, skeifan: 0, hafnarfjordur: 1, akureyri: 1}} lang={lang} />
        </div>
      </div>

      <Tabs tabs={tabs} active={tab} setActive={setTab} />

      {tab === "specs" && (
        <div className="ofc-pdp-spec-grid">
          <table className="ofc-pdp-spec-table">
            <thead>
              <tr><th colSpan="2">{t(lang,"Vinnuvistfræði","Ergonomics")}</th></tr>
            </thead>
            <tbody>
              <tr><td>{t(lang,"Setshæð","Seat height")}</td><td>41 – 53 cm</td></tr>
              <tr><td>{t(lang,"Setdýpt","Seat depth")}</td><td>40 – 46 cm</td></tr>
              <tr><td>{t(lang,"Armhæð","Armrest height")}</td><td>18 – 28 cm</td></tr>
              <tr><td>{t(lang,"Bakstyrkur","Back tilt")}</td><td>{t(lang,"4 stillingar","4 positions")}</td></tr>
              <tr><td>{t(lang,"Synkrónísk halla","Synchro tilt")}</td><td>1:2 ratio</td></tr>
              <tr><td>{t(lang,"Mjóbaksstuðningur","Lumbar")}</td><td>{t(lang,"Stillanlegur ± 5 cm","Adjustable ± 5 cm")}</td></tr>
            </tbody>
            <thead>
              <tr><th colSpan="2">{t(lang,"Tæknilegt","Technical")}</th></tr>
            </thead>
            <tbody>
              <tr><td>{t(lang,"Heildarhæð","Overall height")}</td><td>96 – 108 cm</td></tr>
              <tr><td>{t(lang,"Breidd","Width")}</td><td>68 cm</td></tr>
              <tr><td>{t(lang,"Dýpt","Depth")}</td><td>65 cm</td></tr>
              <tr><td>{t(lang,"Þyngd","Weight")}</td><td>{p.spec?.weight || 18} kg</td></tr>
              <tr><td>{t(lang,"Burðargeta","Max load")}</td><td>{p.spec?.load || 136} kg</td></tr>
              <tr><td>{t(lang,"Hjólastærð","Caster size")}</td><td>65 mm</td></tr>
              <tr><td>{t(lang,"Hjólategund","Caster type")}</td><td>{t(lang,"Hörð gólf","Hard floor")}</td></tr>
            </tbody>
            <thead>
              <tr><th colSpan="2">{t(lang,"Efni","Materials")}</th></tr>
            </thead>
            <tbody>
              <tr><td>{t(lang,"Bakefnir","Back fabric")}</td><td>{t(lang,"3D Triflex pólý","3D Triflex polymer")}</td></tr>
              <tr><td>{t(lang,"Setáklæði","Seat upholstery")}</td><td>Camira Sprint, 100% pólý</td></tr>
              <tr><td>{t(lang,"Grind","Base")}</td><td>{t(lang,"5-stjarna ál, duftlakkað","5-star aluminum, powder-coated")}</td></tr>
              <tr><td>{t(lang,"Endurunnið efni","Recycled content")}</td><td>45%</td></tr>
            </tbody>
          </table>
        </div>
      )}

      {tab === "tiers" && (
        <div className="ofc-pdp-tier-pane">
          <p className="pdp-tabpane">{t(lang,
            "Magnafsláttur reiknast sjálfkrafa þegar magn fer yfir hverjum þrepi. 50+ einingar fá samningsverð — láttu vita ef þú þarft fleiri og við sendum tilboð innan 24 klst.",
            "Volume discount applies automatically as quantity crosses each tier. 50+ units get contract pricing — let us know if you need more and we'll send a quote within 24 hours.")}
          </p>
          <table className="ofc-pdp-tier-table">
            <thead><tr>
              <th>{t(lang,"Magn","Quantity")}</th>
              <th>{t(lang,"Afsláttur","Discount")}</th>
              <th>{t(lang,"Verð á stól","Per chair")}</th>
              <th>{t(lang,"Dæmi: heildarverð","Example: total")}</th>
              <th>{t(lang,"Sparnaður","Savings")}</th>
            </tr></thead>
            <tbody>
              {tiers.map(tr => {
                const u = Math.round(baseUnit * (1 - tr.pct/100));
                const sample = tr.min === 1 ? 1 : tr.min;
                return (
                  <tr key={tr.range} className={tr === activeTier ? "is-on" : ""}>
                    <td>{tr.range}</td>
                    <td>{tr.pct === 0 ? "—" : "−" + tr.pct + "%"}</td>
                    <td>{ISK(u)}</td>
                    <td>{ISK(u * sample)} <em>· {sample} {t(lang,"stk","pcs")}</em></td>
                    <td>{tr.pct === 0 ? "—" : ISK((baseUnit - u) * sample)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === "compare" && (
        <div className="ofc-pdp-compare">
          {[
            { name: p.title, brand: p.brand, price: p.price, warranty: "12 ár", load: "159 kg", cert: "BIFMA", here: true },
            { name: "ID Mesh", brand: "Vitra", price: 212375, warranty: "10 ár", load: "135 kg", cert: "BIFMA" },
            { name: "Kinnarps 6242", brand: "Kinnarps", price: 126900, warranty: "10 ár", load: "130 kg", cert: "Möbelfakta" },
            { name: "Ventilo", brand: "Neodesign", price: 106125, warranty: "5 ár", load: "150 kg", cert: "EN 1335" },
          ].map((c, i) => (
            <div key={i} className={"ofc-pdp-compare-col " + (c.here ? "is-here" : "")}>
              {c.here && <span className="ofc-pdp-compare-tag">{t(lang,"Þessi vara","This product")}</span>}
              <span className="ofc-pdp-compare-brand">{c.brand}</span>
              <strong>{c.name}</strong>
              <dl>
                <dt>{t(lang,"Verð","Price")}</dt><dd>{ISK(c.price)}</dd>
                <dt>{t(lang,"Ábyrgð","Warranty")}</dt><dd>{c.warranty}</dd>
                <dt>{t(lang,"Burðargeta","Load")}</dt><dd>{c.load}</dd>
                <dt>{t(lang,"Vottun","Cert")}</dt><dd>{c.cert}</dd>
              </dl>
            </div>
          ))}
        </div>
      )}

      {tab === "warranty" && (
        <div className="pdp-tabpane">
          <h4>{t(lang,"12 ára ábyrgð","12-year warranty")}</h4>
          <p>{t(lang,"Heildarábyrgð á öllum hreyfanlegum hlutum, gormum, hjólum og rammanum. Skiptipakkning send innan 5 virkra daga.",
                  "Full coverage on all moving parts, springs, casters and frame. Replacement parts shipped within 5 business days.")}</p>
          <h4>{t(lang,"Vottanir","Certifications")}</h4>
          <ul style={{ paddingLeft: 18, lineHeight: 1.8 }}>
            <li>BIFMA X5.1 — {t(lang,"Skrifstofustólar","Office chairs")}</li>
            <li>EN 1335 — {t(lang,"Evrópskur staðall","European standard")}</li>
            <li>Möbelfakta — {t(lang,"Norrænt gæðamerki","Nordic quality mark")}</li>
            <li>Greenguard Gold — {t(lang,"Loftgæði","Air quality")}</li>
          </ul>
        </div>
      )}

      {tab === "downloads" && (
        <div className="ofc-pdp-downloads">
          {[
            { name: "Spec sheet (PDF, 2.1 MB)" },
            { name: "Care & cleaning (PDF, 480 KB)" },
            { name: "CAD block — DWG (3.4 MB)" },
            { name: "BIM file — Revit RFA (8.6 MB)" },
          ].map(d => (
            <a key={d.name} className="ofc-pdp-download">
              <span>↓</span>
              <span>{d.name}</span>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { OfficePDP });