// Home Furniture PDP — high-end, designer focus, dimensions, materials, lifestyle.

function FurniturePDP({ product: p, lang, onBack }) {
  const [qty, setQty] = React.useState(1);
  const [tab, setTab] = React.useState("designer");
  const [finish, setFinish] = React.useState(0);

  const finishes = [
    { name: t(lang,"Eik / hvít skel","Oak / white shell"), swatch: p.swatch, base: "#d9c9a8" },
    { name: t(lang,"Hnota / svört skel","Walnut / black shell"), swatch: "#1a1a1a", base: "#6b4a2b" },
    { name: t(lang,"Reyktur askur / drapp","Smoked ash / sand"), swatch: "#e7d8b8", base: "#4a3a2a" },
  ];
  const activeFinish = finishes[finish];

  const tabs = [
    { id: "designer",   label: t(lang,"Hönnuður","Designer") },
    { id: "materials",  label: t(lang,"Efni","Materials") },
    { id: "dimensions", label: t(lang,"Mál","Dimensions") },
    { id: "delivery",   label: t(lang,"Sending & uppsetning","Delivery & setup") },
    { id: "care",       label: t(lang,"Umhirða","Care") },
  ];

  return (
    <div className="pdp furn-pdp shell">
      <Crumbs items={[
        t(lang,"Forsíða","Home"),
        t(lang,"Heimili & húsgögn","Home & Furniture"),
        p.brand,
        p.title,
      ]} />
      <PDPBack onBack={onBack} lang={lang} label={t(lang,"Til baka í húsgögn","Back to furniture")} />

      <div className="pdp-grid furn-pdp-grid">
        <div className="pdp-visual furn-pdp-visual">
          <div className="furn-pdp-stage" style={{ background: activeFinish.base }}>
            <div className="furn-pdp-floor" />
            <div className="furn-pdp-chair">
              <div className="furn-pdp-back" style={{ background: activeFinish.swatch }} />
              <div className="furn-pdp-seat" style={{ background: activeFinish.swatch }} />
              <div className="furn-pdp-legs">
                <span style={{ background: activeFinish.base, filter: "brightness(1.1)" }} />
                <span style={{ background: activeFinish.base, filter: "brightness(1.1)" }} />
                <span style={{ background: activeFinish.base, filter: "brightness(1.1)" }} />
                <span style={{ background: activeFinish.base, filter: "brightness(1.1)" }} />
              </div>
            </div>
            <div className="furn-pdp-shadow" />
            <span className="furn-pdp-stage-tag">{p.brand} · {p.title}</span>
          </div>
          <div className="furn-pdp-gallery">
            <button className="furn-pdp-thumb is-on">{t(lang,"Vörumynd","Product")}</button>
            <button className="furn-pdp-thumb">{t(lang,"Á heimili","In home")}</button>
            <button className="furn-pdp-thumb">{t(lang,"Smáatriði","Details")}</button>
            <button className="furn-pdp-thumb">{t(lang,"Mál","Dimensions")}</button>
            <button className="furn-pdp-thumb">{t(lang,"Hönnuður","Designer")}</button>
          </div>
        </div>

        <div className="pdp-buy">
          <span className="pdp-eyebrow">{p.brand} · {t(lang,"síðan","since")} 1950</span>
          <h1 className="pdp-title">{p.title}</h1>
          <p className="pdp-subtitle">{t(lang,"Hönnun","Design")}: <strong>{p.designer}</strong></p>

          <div className="pdp-rating">
            <Stars rating={4.8} />
            <span>4.8 · 64 {t(lang,"umsagnir","reviews")}</span>
            <span>· {t(lang,"Sígild hönnun síðan 1950","Design classic since 1950")}</span>
          </div>

          <div className="pdp-variant-row">
            <span className="pdp-variant-label">{t(lang,"Áferð:","Finish:")} <em>{activeFinish.name}</em></span>
            <div className="furn-pdp-finishes">
              {finishes.map((f, i) => (
                <button
                  key={i}
                  className={"furn-pdp-finish " + (finish === i ? "is-on" : "")}
                  onClick={() => setFinish(i)}
                >
                  <span className="furn-pdp-finish-base" style={{ background: f.base }} />
                  <span className="furn-pdp-finish-shell" style={{ background: f.swatch }} />
                  <em>{f.name}</em>
                </button>
              ))}
            </div>
          </div>

          <div className="pdp-price-row">
            <span className="pdp-price">{ISK(p.price)}</span>
            {p.was && <span className="pdp-price-was">{ISK(p.was)}</span>}
            {p.discount > 0 && <span className="pdp-price-save">−{p.discount}%</span>}
          </div>

          <div className="furn-pdp-lead">
            <span className="dot dot-green" />
            <strong>{p.lead}</strong>
            <span>· {t(lang,"Senda heim eða uppsetning innifalin","Delivery or setup included")}</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(p.price * qty)}</span>
            </button>
            <button className="pdp-cta-fav" title={t(lang,"Vista","Save")}>♡</button>
          </div>

          <div className="furn-pdp-helpers">
            <a className="furn-pdp-helper">
              <span>⌂</span>
              <div>
                <strong>{t(lang,"Innanhússráðgjöf","Interior consultation")}</strong>
                <span>{t(lang,"Heimsókn frá ráðgjafa, 60–90 mín","60–90 min visit from a consultant")}</span>
              </div>
              <em>→</em>
            </a>
            <a className="furn-pdp-helper">
              <span>♢</span>
              <div>
                <strong>{t(lang,"Sjá á AR í rýminu þínu","See in AR in your space")}</strong>
                <span>{t(lang,"Skanna QR með símanum","Scan QR with phone")}</span>
              </div>
              <em>→</em>
            </a>
          </div>

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

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

      {tab === "designer" && (
        <div className="furn-pdp-designer">
          <div>
            <span className="pdp-eyebrow">{t(lang,"Hönnuður","Designer")}</span>
            <h2 className="furn-pdp-designer-name">{p.designer}</h2>
            <p>{t(lang,
              `${p.designer} hannaði þetta verk árið 1950. Hugmyndin var einföld: stóll sem mætir líkamanum, ekki líkaminn sem mætir stól. Sjötíu og fimm árum síðar er hann enn í framleiðslu — sömu efnum, sömu höndum, sömu verkstæði.`,
              `${p.designer} designed this piece in 1950. The idea was simple: a chair that meets the body, not the body that meets a chair. Seventy-five years later, it's still in production — same materials, same hands, same workshop.`)}
            </p>
            <blockquote>
              {t(lang,
                "„Hluti á að vera fallegur, einfaldur og þagga — ekki skipa heimilið.”",
                "“An object should be beautiful, simple, and quiet — not command the home.”")}
            </blockquote>
            <ul className="furn-pdp-designer-list">
              <li><span>1950</span><b>{t(lang,"Frumhönnun","Original design")}</b></li>
              <li><span>1953</span><b>{t(lang,"Sýnt í MoMA","Shown at MoMA")}</b></li>
              <li><span>1998</span><b>{t(lang,"Endurútgefið","Reissued")}</b></li>
              <li><span>2024</span><b>{t(lang,"Endurnýjuð litaflóra","Refreshed colorway")}</b></li>
            </ul>
          </div>
          <div className="furn-pdp-designer-portrait">
            <div className="furn-pdp-portrait-frame">
              <div className="furn-pdp-portrait-face" />
              <span>{p.designer}</span>
            </div>
          </div>
        </div>
      )}

      {tab === "materials" && (
        <div className="furn-pdp-materials">
          {[
            { id: 1, name: t(lang,"Lakkað krossviður","Lacquered plywood"), color: "#caa97a", note: t(lang,"FSC-vottað birki","FSC-certified birch") },
            { id: 2, name: t(lang,"Lakkað stálundirstöð","Lacquered steel base"), color: "#1a1a1a", note: t(lang,"Pólýester duftlakk","Polyester powder coat") },
            { id: 3, name: t(lang,"Plastskel","Plastic shell"), color: activeFinish.swatch, note: t(lang,"100% endurunnið PP","100% recycled PP") },
          ].map(m => (
            <div key={m.id} className="furn-pdp-material">
              <div className="furn-pdp-material-swatch" style={{ background: m.color }} />
              <strong>{m.name}</strong>
              <span>{m.note}</span>
            </div>
          ))}
        </div>
      )}

      {tab === "dimensions" && (
        <div className="furn-pdp-dimensions">
          <div className="furn-pdp-dim-diagram">
            <div className="dim-chair">
              <div className="dim-back" />
              <div className="dim-seat" />
              <div className="dim-leg-l" />
              <div className="dim-leg-r" />
            </div>
            <span className="dim-line dim-h"><em>↕</em> 78 cm</span>
            <span className="dim-line dim-w"><em>↔</em> 54 cm</span>
            <span className="dim-line dim-d"><em>↘</em> 52 cm</span>
            <span className="dim-line dim-seat-h"><em>↕</em> 46 cm</span>
          </div>
          <dl className="furn-pdp-dim-facts">
            <div><dt>{t(lang,"Hæð","Height")}</dt><dd>78 cm</dd></div>
            <div><dt>{t(lang,"Breidd","Width")}</dt><dd>54 cm</dd></div>
            <div><dt>{t(lang,"Dýpt","Depth")}</dt><dd>52 cm</dd></div>
            <div><dt>{t(lang,"Setshæð","Seat height")}</dt><dd>46 cm</dd></div>
            <div><dt>{t(lang,"Setdýpt","Seat depth")}</dt><dd>42 cm</dd></div>
            <div><dt>{t(lang,"Þyngd","Weight")}</dt><dd>6,8 kg</dd></div>
            <div><dt>{t(lang,"Burðargeta","Load")}</dt><dd>120 kg</dd></div>
            <div><dt>{t(lang,"Hentar útihús","Outdoor")}</dt><dd>{t(lang,"Nei","No")}</dd></div>
          </dl>
        </div>
      )}

      {tab === "delivery" && (
        <div className="pdp-tabpane">
          <h4>{t(lang,"Heimsending","Home delivery")}</h4>
          <p>{t(lang,"Höfuðborgarsvæðið: 3.900 kr · Restin af landinu: 6.900 kr. Áætluð afhending 5–10 virkir dagar.",
                  "Capital area: 3,900 kr · Rest of country: 6,900 kr. Estimated 5–10 business days.")}</p>
          <h4>{t(lang,"Uppsetning","Setup")}</h4>
          <p>{t(lang,"Tekið upp, sett saman, gamla flutt í burtu — frítt yfir 250.000 kr.","Unpacked, assembled, old furniture removed — free over 250,000 kr.")}</p>
          <h4>{t(lang,"Skil","Returns")}</h4>
          <p>{t(lang,"30 daga skilaréttur. Sérpantanir og lagerlausar útgáfur ekki skiptanlegar.","30-day returns. Special orders and out-of-stock variants non-exchangeable.")}</p>
        </div>
      )}

      {tab === "care" && (
        <div className="pdp-tabpane">
          <h4>{t(lang,"Dagleg umhirða","Daily care")}</h4>
          <p>{t(lang,"Þurrkun með mjúkum klút. Forðast bleikiefni og slípiefni.","Wipe with a soft cloth. Avoid bleach and abrasives.")}</p>
          <h4>{t(lang,"Olíuborinn viður","Oil finish")}</h4>
          <p>{t(lang,"Endurnýjið með viðarolíu á 6–12 mánaða fresti.","Re-oil every 6–12 months.")}</p>
        </div>
      )}

      <header className="pdp-section-head">
        <h2>{t(lang,"Fleira frá " + p.brand, "More from " + p.brand)}</h2>
        <a className="furn-link">{t(lang,"Allt","Everything")} →</a>
      </header>
      <div className="furn-grid">
        {window.PENNINN_PRODUCTS_FURNITURE.filter(x => x.kind === "home" && x.id !== p.id).slice(0,3).map(x => <FurnitureCard key={x.id} p={x} lang={lang} />)}
      </div>
    </div>
  );
}

Object.assign(window, { FurniturePDP });