// Stationery PDP — color-swatch variants, refills, technical specs, accessories.

function StationeryPDP({ product: p, lang, onBack }) {
  const all = window.PENNINN_PRODUCTS_STATIONERY;
  const sameModel = all.filter(x => x.title === p.title);
  const [variant, setVariant] = React.useState(p);
  const [qty, setQty] = React.useState(1);
  const [tab, setTab] = React.useState("specs");

  const tabs = [
    { id: "specs",     label: t(lang, "Forskriftir",       "Specs") },
    { id: "inbox",     label: t(lang, "Í pakkanum",        "In the box") },
    { id: "refills",   label: t(lang, "Áfyllingar",        "Refills"), count: 3 },
    { id: "shipping",  label: t(lang, "Sending & skil",    "Shipping & returns") },
  ];

  return (
    <div className="pdp stat-pdp shell">
      <Crumbs items={[
        t(lang,"Forsíða","Home"),
        t(lang,"Ritföng","Stationery"),
        variant.brand,
        variant.title,
      ]} />
      <PDPBack onBack={onBack} lang={lang} label={t(lang,"Til baka í ritföng","Back to stationery")} />

      <div className="pdp-grid stat-pdp-grid">
        <div className="pdp-visual stat-pdp-visual">
          <div className="stat-pdp-stage" style={{ background: variant.swatch + "33" }}>
            <div className="stat-pdp-pen" style={{ background: variant.swatch }}>
              <span className="stat-pdp-pen-nib" />
              <span className="stat-pdp-pen-clip" />
              <span className="stat-pdp-pen-band" />
            </div>
            <div className="stat-pdp-shadow" />
            <span className="stat-pdp-coords">
              <em>↕</em> 142 mm · <em>⌀</em> 11 mm
            </span>
          </div>
          <div className="stat-pdp-gallery">
            {[variant.swatch, "#ffffff", variant.swatch, "#1a1a1a"].map((c, i) => (
              <button key={i} className={"stat-pdp-thumb " + (i === 0 ? "is-on" : "")} style={{ background: c + (i === 1 || i === 3 ? "" : "33") }}>
                {i === 0 && <span className="stat-pdp-thumb-pen" style={{ background: c }} />}
                {i === 1 && <span className="stat-pdp-thumb-tag">{t(lang,"Smáatriði","Detail")}</span>}
                {i === 2 && <span className="stat-pdp-thumb-tag">{t(lang,"Á borði","On desk")}</span>}
                {i === 3 && <span className="stat-pdp-thumb-tag">{t(lang,"Letur","Stroke")}</span>}
              </button>
            ))}
          </div>
        </div>

        <div className="pdp-buy">
          <span className="pdp-eyebrow">{variant.brand} · {t(lang,"Ritföng","Stationery")}</span>
          <h1 className="pdp-title">{variant.title}</h1>
          <p className="pdp-subtitle">{t(lang,"Gelpenni · oddur 0,7 mm","Gel pen · 0.7 mm tip")}</p>

          <div className="pdp-rating">
            <Stars rating={4.6} />
            <span>4.6 · 89 {t(lang,"umsagnir","reviews")}</span>
            <span className="dot dot-green" />
            <span>{t(lang,"Mest selda gerð vikunnar","Top seller this week")}</span>
          </div>

          {sameModel.length > 1 && (
            <div className="pdp-variant-row">
              <span className="pdp-variant-label">{t(lang,"Litur:","Color:")} <em>{variant.color}</em></span>
              <div className="stat-pdp-swatches">
                {sameModel.map(v => (
                  <button
                    key={v.id}
                    className={"stat-pdp-swatch " + (variant.id === v.id ? "is-on" : "")}
                    style={{ background: v.swatch }}
                    onClick={() => setVariant(v)}
                    title={v.color}
                    aria-label={v.color}
                  >
                    <span className="stat-pdp-swatch-check">✓</span>
                  </button>
                ))}
                {/* Additional colors for visual richness */}
                {["#7a2230","#3c8a3c","#d4a017","#5a8ab8","#2a4a6a"].slice(0, 4 - Math.min(sameModel.length, 4)).map((c, i) => (
                  <button key={i} className="stat-pdp-swatch is-disabled" style={{ background: c }} title={t(lang,"Uppselt","Out of stock")} disabled />
                ))}
              </div>
            </div>
          )}

          <div className="pdp-variant-row">
            <span className="pdp-variant-label">{t(lang,"Pakkningar:","Pack:")} <em>1 stk</em></span>
            <div className="pdp-variant-chips">
              {["1 stk", "4 stk", "12 stk", "Áskrift mánaðarlega"].map((label, i) => (
                <button key={i} className={"pdp-chip " + (i === 0 ? "is-on" : "")}>
                  <span>{label}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="pdp-price-row">
            <span className="pdp-price">{ISK(variant.price)}</span>
            {variant.was && <span className="pdp-price-was">{ISK(variant.was)}</span>}
            {variant.discount > 0 && <span className="pdp-price-save">−{variant.discount}%</span>}
            <span className="stat-pdp-unit">≈ {ISK(variant.price)} {t(lang,"hver penni","per pen")}</span>
          </div>

          <div className="pdp-cta-row">
            <QtyStepper qty={qty} setQty={setQty} />
            <button className="pdp-cta">
              <span>{t(lang,"Setja í körfu","Add to cart")}</span>
              <span>·</span>
              <span>{ISK(variant.price * qty)}</span>
            </button>
            <button className="pdp-cta-fav" title={t(lang,"Bæta í óskalista","Add to wishlist")}>♡</button>
          </div>

          <PickupFull stock={variant.stock} lang={lang} />

          <dl className="pdp-facts">
            <div><dt>{t(lang,"Oddur","Tip")}</dt><dd>0,7 mm</dd></div>
            <div><dt>{t(lang,"Bleksort","Ink")}</dt><dd>{t(lang,"Gel, vatnsheld","Gel, water-resistant")}</dd></div>
            <div><dt>{t(lang,"Líftími","Lifetime")}</dt><dd>~ 1.500 m</dd></div>
            <div><dt>{t(lang,"Áfyllanlegur","Refillable")}</dt><dd>{t(lang,"Já","Yes")}</dd></div>
            <div><dt>{t(lang,"Vörunúmer","SKU")}</dt><dd>PEN-{variant.id.toUpperCase()}-07</dd></div>
            <div><dt>{t(lang,"Uppruni","Origin")}</dt><dd>Japan</dd></div>
          </dl>
        </div>
      </div>

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

      {tab === "specs" && (
        <div className="pdp-tabpane">
          <table className="stat-pdp-spec">
            <tbody>
              <tr><td>{t(lang,"Þvermál odds","Tip diameter")}</td><td>0,7 mm</td></tr>
              <tr><td>{t(lang,"Línubreidd","Line width")}</td><td>~ 0,35 mm</td></tr>
              <tr><td>{t(lang,"Bleksort","Ink type")}</td><td>{t(lang,"Gel, vatnsheld og ljósfast","Gel, water- and light-resistant")}</td></tr>
              <tr><td>{t(lang,"Þurrkunartími","Drying time")}</td><td>~ 1 sek</td></tr>
              <tr><td>{t(lang,"Hentar fyrir örvhenta","Left-hand friendly")}</td><td>✓</td></tr>
              <tr><td>{t(lang,"Áfylling","Refill")}</td><td>LR7-A {t(lang,"(seld sér)","(sold separately)")}</td></tr>
              <tr><td>{t(lang,"Vottun","Certification")}</td><td>ISO 12757-2</td></tr>
              <tr><td>{t(lang,"Þyngd","Weight")}</td><td>11 g</td></tr>
            </tbody>
          </table>
        </div>
      )}

      {tab === "inbox" && (
        <div className="pdp-tabpane">
          <ul className="stat-pdp-inbox">
            <li><span>1×</span><b>{variant.title}</b><em>{t(lang,"Tilbúinn til notkunar","Ready to use")}</em></li>
            <li><span>1×</span><b>{t(lang,"Plastlok","Cap")}</b><em>{t(lang,"Aukinn endingartími","Longer cartridge life")}</em></li>
            <li><span>1×</span><b>{t(lang,"Notkunarleiðbeiningar","Instructions")}</b><em>{t(lang,"4 tungumál","4 languages")}</em></li>
            <li><span>1×</span><b>{t(lang,"Endurnýtanleg umbúðir","Recyclable packaging")}</b><em>FSC-vottað</em></li>
          </ul>
        </div>
      )}

      {tab === "refills" && (
        <div className="stat-pdp-refills">
          {[
            { id: "r1", title: "LR7-A áfylling, blá", price: 269, color: "#1a1a1a" },
            { id: "r2", title: "LR7-A áfylling, rauð", price: 269, color: "#c44a30" },
            { id: "r3", title: "LR7-A áfylling, græn", price: 269, color: "#3c8a3c" },
          ].map(r => (
            <a key={r.id} className="stat-pdp-refill">
              <span className="stat-pdp-refill-rod" style={{ background: r.color }} />
              <div>
                <strong>{r.title}</strong>
                <span>{ISK(r.price)}</span>
              </div>
              <button className="stat-pdp-refill-add">+</button>
            </a>
          ))}
        </div>
      )}

      {tab === "shipping" && (
        <div className="pdp-tabpane">
          <h4>{t(lang,"Heimsending","Home delivery")}</h4>
          <p>{t(lang,"1–2 virkir dagar. 990 kr, frítt yfir 15.000 kr.","1–2 business days. 990 kr, free over 15,000 kr.")}</p>
          <h4>{t(lang,"Sækja í verslun","Store pickup")}</h4>
          <p>{t(lang,"Frítt. Pantaðu fyrir kl. 13 — tilbúið samdægurs í flestum verslunum.","Free. Order before 1 pm — ready same day at most stores.")}</p>
          <h4>{t(lang,"Skil","Returns")}</h4>
          <p>{t(lang,"14 daga skilaréttur á ónotaðri vöru í upprunalegri pakkningu.","14-day returns on unused product in original packaging.")}</p>
        </div>
      )}

      <header className="pdp-section-head">
        <h2>{t(lang,"Vörur sem ganga með þessari","Goes well with")}</h2>
        <a className="stat-pdp-link">{t(lang,"Sjá allt","See all")} →</a>
      </header>
      <div className="stat-grid stat-pdp-related">
        {all.filter(x => x.id !== variant.id).slice(0, 5).map(x => (
          <a key={x.id} className="stat-card">
            <div className="stat-card-thumb" style={{ background: x.swatch }}>
              <div className="stat-card-shape"><div className="st-card-block" style={{ background: x.swatch }} /></div>
              {x.discount > 0 && <span className="stat-card-disc">−{x.discount}%</span>}
            </div>
            <div className="stat-card-meta">
              <span className="stat-card-brand">{x.brand}</span>
              <strong className="stat-card-title">{x.title}</strong>
              <span className="stat-card-color">{x.color}</span>
              <div className="stat-card-price-row">
                <span className="stat-card-price">{ISK(x.price)}</span>
                {x.was && <span className="stat-card-was">{ISK(x.was)}</span>}
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { StationeryPDP });