// Stationery — playful, tactile, swatch-led.
// Distinct layout from books: dense grid of color swatches/pens, less editorial.

function StationeryPage({ lang }) {
  const items = window.PENNINN_PRODUCTS_STATIONERY || [];
  const [filter, setFilter] = React.useState("all");
  const [pdp, setPdp] = React.useState(null);

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

  const filters = [
    { id: "all",    is: "Allt",       en: "All" },
    { id: "pens",   is: "Pennar",     en: "Pens" },
    { id: "paper",  is: "Pappír",     en: "Paper" },
    { id: "art",    is: "Listavörur", en: "Art" },
    { id: "office", is: "Skrifstofa", en: "Office" },
  ];

  return (
    <div className="stat-page shell">
      <Crumbs items={[t(lang,"Forsíða","Home"), t(lang,"Ritföng","Stationery")]} />

      <section className="stat-hero">
        <div className="stat-hero-left">
          <span className="stat-eyebrow">★ {t(lang,"Ritföng","Stationery")} · {t(lang,"3.800 vörur","3,800 items")}</span>
          <h1 className="stat-hero-h1">
            {t(lang,
              <>Pennar sem<br/>skrifa fyrir þig.</>,
              <>Pens that<br/>write for you.</>)}
          </h1>
          <p className="stat-hero-lede">
            {t(lang,
              "Lamy, Pentel, Stabilo, Derwent. Fyllingar á hverjum kassa, áherslupennar í öllum litum, og minnisbækur sem opnast flatt.",
              "Lamy, Pentel, Stabilo, Derwent. Refills at every counter, highlighters in every shade, notebooks that lie flat.")}
          </p>
          <div className="stat-hero-actions">
            <button className="btn-primary">{t(lang,"Skoða pennana","Browse pens")} →</button>
            <button className="btn-ghost">{t(lang,"Skólavörulisti 2026","School list 2026")}</button>
          </div>
        </div>

        {/* Color swatch grid as hero art */}
        <div className="stat-hero-swatches">
          {[
            "#1a1a1a","#d4751a","#7cc24a","#f5d35a","#2a4a6a","#e67aa7",
            "#c44a30","#5a8ab8","#3c8a3c","#7a2230","#caa97a","#d47a8a"
          ].map((c, i) => (
            <div key={i} className="stat-swatch" style={{ background: c }}>
              <span className="stat-swatch-tip" style={{ background: c }} />
            </div>
          ))}
        </div>
      </section>

      <div className="stat-filters">
        {filters.map(f => (
          <button key={f.id} className={"stat-filter " + (filter === f.id ? "is-on" : "")} onClick={() => setFilter(f.id)}>
            {t(lang, f.is, f.en)}
          </button>
        ))}
        <span className="stat-filter-flex" />
        <span className="stat-filter-meta">{t(lang,"Raða:","Sort:")}</span>
        <select className="stat-sort">
          <option>{t(lang,"Vinsælt","Popular")}</option>
          <option>{t(lang,"Verð, lágt","Price, low")}</option>
          <option>{t(lang,"Verð, hátt","Price, high")}</option>
          <option>{t(lang,"Nýjast","Newest")}</option>
        </select>
      </div>

      <section className="stat-grid">
        {items.map(p => (
          <a key={p.id} className="stat-card" onClick={() => setPdp(p)}>
            <div className="stat-card-thumb" style={{ background: p.swatch }}>
              <div className="stat-card-shape">
                {p.title.includes("penni") || p.title.includes("Energel") || p.title.includes("Áherslupenni")
                  ? <PenIcon color={p.swatch} />
                  : p.title.includes("Minnisbók") || p.title.includes("Minnismiðar")
                  ? <NotebookIcon />
                  : p.title.includes("Bréfabindi") || p.title.includes("Millispjöld")
                  ? <BinderIcon />
                  : p.title.includes("Trélitir") || p.title.includes("Brushmarker") || p.title.includes("Vatnslit")
                  ? <ArtIcon />
                  : <DotIcon />
                }
              </div>
              {p.discount > 0 && <span className="stat-card-disc">−{p.discount}%</span>}
            </div>
            <div className="stat-card-meta">
              <span className="stat-card-brand">{p.brand}</span>
              <strong className="stat-card-title">{p.title}</strong>
              <span className="stat-card-color">{p.color}</span>
              <div className="stat-card-price-row">
                <span className="stat-card-price">{ISK(p.price)}</span>
                {p.was && <span className="stat-card-was">{ISK(p.was)}</span>}
              </div>
              <PickupBadge stock={p.stock} lang={lang} compact />
            </div>
          </a>
        ))}
      </section>

      <section className="stat-strip">
        <div>
          <h3>{t(lang,"Sérstillingar fyrir skóla","School orders")}</h3>
          <p>{t(lang,"Hlaða inn listanum frá kennara — við pökkum og merkjum.","Upload the teacher's list — we pack and label.")}</p>
        </div>
        <button className="btn-primary">{t(lang,"Hefja pöntun","Start order")} →</button>
      </section>
    </div>
  );
}

function PenIcon({ color }) {
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%">
      <g transform="rotate(-30 60 60)">
        <rect x="20" y="55" width="80" height="10" rx="2" fill="rgba(255,255,255,.92)" />
        <polygon points="100,55 116,60 100,65" fill="rgba(255,255,255,.92)" />
        <rect x="18" y="55" width="6" height="10" fill="rgba(0,0,0,.4)" />
      </g>
    </svg>
  );
}
function NotebookIcon() {
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%">
      <rect x="30" y="22" width="60" height="76" rx="3" fill="rgba(255,255,255,.92)" />
      <rect x="30" y="22" width="10" height="76" fill="rgba(0,0,0,.18)" />
      <path d="M48 44 H82 M48 56 H82 M48 68 H72" stroke="rgba(0,0,0,.25)" strokeWidth="1.5" />
    </svg>
  );
}
function BinderIcon() {
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%">
      <rect x="24" y="22" width="72" height="76" rx="2" fill="rgba(255,255,255,.92)" />
      <rect x="48" y="22" width="6" height="76" fill="rgba(0,0,0,.22)" />
      <rect x="36" y="44" width="40" height="6" fill="rgba(0,0,0,.18)" />
      <rect x="36" y="56" width="32" height="6" fill="rgba(0,0,0,.18)" />
    </svg>
  );
}
function ArtIcon() {
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%">
      {[0,1,2,3,4,5].map(i => (
        <rect key={i} x={20 + i*14} y={28} width="10" height="64" fill="rgba(255,255,255,.92)" />
      ))}
      {[0,1,2,3,4,5].map(i => (
        <polygon key={i} points={`${20 + i*14},28 ${25 + i*14},18 ${30 + i*14},28`} fill="rgba(255,255,255,.7)" />
      ))}
    </svg>
  );
}
function DotIcon() {
  return (
    <svg viewBox="0 0 120 120" width="100%" height="100%">
      <circle cx="60" cy="60" r="34" fill="rgba(255,255,255,.92)" />
    </svg>
  );
}

Object.assign(window, { StationeryPage });