// Home & Furniture — high-end / lifestyle. Generous whitespace, large product imagery,
// designer credits. Distinct from books (no covers) and stationery (no swatches).

function FurniturePage({ lang }) {
  const all = window.PENNINN_PRODUCTS_FURNITURE || [];
  const home = all.filter(p => p.kind === "home");
  const hero = home[0];
  const [pdp, setPdp] = React.useState(null);

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

  return (
    <div className="furn-page shell">
      <Crumbs items={[t(lang,"Forsíða","Home"), t(lang,"Heimili & húsgögn","Home & Furniture")]} />

      <section className="furn-hero">
        <div className="furn-hero-image">
          <div className="furn-hero-room">
            <div className="furn-floor" />
            <div className="furn-wall" />
            {/* Big floating product silhouette */}
            <div className="furn-hero-chair">
              <div className="chair-seat" />
              <div className="chair-back" />
              <div className="chair-legs">
                <span /><span /><span /><span />
              </div>
            </div>
            <div className="furn-hero-shadow" />
            <span className="furn-hero-tag">
              <em>HAY</em>
              <b>AAC 22</b>
              <span>{t(lang,"Eik / hvít skel","Oak / white shell")}</span>
            </span>
          </div>
        </div>
        <div className="furn-hero-meta">
          <span className="furn-eyebrow">Vol. 04 · {t(lang,"Haust","Autumn")} 2025</span>
          <h1 className="furn-hero-h1">
            {t(lang,
              <>Hlutir með<br/>höfundi.</>,
              <>Objects with<br/>an author.</>)}
          </h1>
          <p className="furn-lede">
            {t(lang,
              "HAY, Vitra, Artek, Muuto. Hreinar línur, varanleg efni, og hönnuðir með nafn. Senda heim eða setja upp í þínu rými.",
              "HAY, Vitra, Artek, Muuto. Clean lines, lasting materials, and named designers. Delivered home, or set up in your space.")}
          </p>
          <div className="furn-hero-actions">
            <button className="btn-primary">{t(lang,"Sjá nýjustu vörurnar","New arrivals")} →</button>
            <button className="btn-ghost">{t(lang,"Innanhússráðgjöf","Interior service")}</button>
          </div>
        </div>
      </section>

      <section className="furn-brands">
        {["HAY","VITRA","ARTEK","MUUTO","FRITZ HANSEN","FERM LIVING"].map(b => (
          <span key={b}>{b}</span>
        ))}
      </section>

      <section className="furn-section">
        <header className="furn-section-head">
          <div>
            <span className="furn-eyebrow">{t(lang,"Stólar","Chairs")}</span>
            <h2>{t(lang,"Sætið skiptir máli.","The seat matters.")}</h2>
          </div>
          <a className="furn-link">{t(lang,"Allir stólar","All chairs")} →</a>
        </header>
        <div className="furn-grid">
          {home.slice(0, 3).map(p => <FurnitureCard key={p.id} p={p} lang={lang} onSelect={() => setPdp(p)} />)}
        </div>
      </section>

      <section className="furn-feature">
        <div className="furn-feature-side">
          <span className="furn-eyebrow">{t(lang,"Designer focus","Designer focus")}</span>
          <h2>{t(lang,"Alvar Aalto","Alvar Aalto")}<br/><em>1898 – 1976</em></h2>
          <p>{t(lang,
            "Finnskur arkitekt og hönnuður. Hönnun hans hjá Artek hefur lifað næstum hundrað ár — endurútgefin, óbreytt, og enn í framleiðslu á sömu verkstæðum.",
            "Finnish architect and designer. His Artek designs have lived nearly a century — reissued, unchanged, still made in the same workshops.")}</p>
          <ul className="furn-feature-list">
            <li><span>1933</span><b>Stool 60</b></li>
            <li><span>1936</span><b>Savoy Vase</b></li>
            <li><span>1937</span><b>A110 Hand Grenade Pendant</b></li>
            <li><span>1939</span><b>A201 Pendant</b></li>
          </ul>
        </div>
        <div className="furn-feature-art">
          <div className="furn-lamp">
            <span className="lamp-cord" />
            <span className="lamp-shade" />
            <span className="lamp-glow" />
          </div>
        </div>
      </section>

      <section className="furn-section">
        <header className="furn-section-head">
          <div>
            <span className="furn-eyebrow">{t(lang,"Lýsing & smávara","Lighting & objects")}</span>
            <h2>{t(lang,"Smáhlutirnir.","The little things.")}</h2>
          </div>
          <a className="furn-link">{t(lang,"Allt","Everything")} →</a>
        </header>
        <div className="furn-grid">
          {home.slice(3, 6).map(p => <FurnitureCard key={p.id} p={p} lang={lang} onSelect={() => setPdp(p)} />)}
        </div>
      </section>

      <section className="furn-service">
        <div>
          <span className="furn-eyebrow">{t(lang,"Þjónusta","Service")}</span>
          <h2>{t(lang,"Innanhússráðgjöf á þínu heimili.","Interior consultation, at your home.")}</h2>
          <p>{t(lang,
            "Bóka ráðgjafa heim eða í verslun. Mæling, teikning, þrír kostir. Frí fyrir pantanir yfir 250.000 kr.",
            "Book a consultant — home or in-store. Measure, sketch, three options. Free over 250,000 kr.")}</p>
          <button className="btn-primary">{t(lang,"Bóka heimsókn","Book a visit")} →</button>
        </div>
        <ul className="furn-service-steps">
          <li><em>01</em><b>{t(lang,"Bóka tíma","Book a time")}</b><span>{t(lang,"Velja dag og stað","Choose date and place")}</span></li>
          <li><em>02</em><b>{t(lang,"Heimsókn","Visit")}</b><span>{t(lang,"60–90 mín, fríkostnaður","60–90 min, free")}</span></li>
          <li><em>03</em><b>{t(lang,"Tillögur","Proposal")}</b><span>{t(lang,"3 leiðir, verðtillögur","3 routes, pricing")}</span></li>
          <li><em>04</em><b>{t(lang,"Uppsetning","Setup")}</b><span>{t(lang,"Sett upp af okkar fólki","Installed by our team")}</span></li>
        </ul>
      </section>
    </div>
  );
}

function FurnitureCard({ p, lang, onSelect }) {
  return (
    <a className="furn-card" onClick={onSelect}>
      <div className="furn-card-media" style={{ background: p.swatch === "#1a1a1a" ? "#efece4" : "#f5f1ea" }}>
        <span className="furn-card-silhouette" style={{ background: p.swatch }} />
        {p.discount > 0 && <span className="furn-card-disc">−{p.discount}%</span>}
      </div>
      <div className="furn-card-meta">
        <span className="furn-card-brand">{p.brand}</span>
        <h3 className="furn-card-title">{p.title}</h3>
        <span className="furn-card-designer">{p.designer}</span>
        <p className="furn-card-variant">{p.variant}</p>
        <div className="furn-card-foot">
          <div>
            <span className="furn-card-price">{ISK(p.price)}</span>
            {p.was && <span className="furn-card-was">{ISK(p.was)}</span>}
          </div>
          <span className="furn-card-lead">{p.lead}</span>
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { FurniturePage });