/* =============================================================
   Plakaten som selvstendig HTML-side. Åpnes i ny fane, har egen
   "Skriv ut"-knapp, og bruker Solidlabs egne skrifter.
   Skriv ut → Lagre som PDF gir en ekte vektor-PDF.
   ============================================================= */


/* Fargetemaer. Grønntonene er nærmeste digitale gjengivelse av
   Jotun-farger — skjermfarge og maling vil aldri stemme helt. */
const PLAKAT_TEMA = {
  lys: { navn:"Antikkhvit", bak:"#F4F1EA", kort:"#FBFAF6", kant:"#DEDBD3",
         tekst:"#0A0A0A", svak:"#55524A", mist:"#6C685E", aksent:"#4A5A62",
         kobber:"#8F5028", band:"linear-gradient(103deg,#D5CFC2,#E0DBCF)", bandtekst:"#4B483F",
         vask:"#D5CFC2", pynt:"#4A5A62", bunnbak:"#0A0A0A", bunntekst:"#F4F1EA", bunnsvak:"#8E9599", merkedot:"#6B8290" },

  egg: { navn:"Egghvit 1001", bak:"#F2EDE3", kort:"#FBF8F2", kant:"#E0D9CC",
         tekst:"#14130F", svak:"#57534A", mist:"#6C665A", aksent:"#5A6048",
         kobber:"#8F5028", band:"linear-gradient(103deg,#DED5C4,#E8E1D3)", bandtekst:"#4A463C",
         vask:"#DCD3C2", pynt:"#5A6048", bunnbak:"#1C1D17", bunntekst:"#F2EDE3", bunnsvak:"#95998A", merkedot:"#8A9270" },

  salvie:{ navn:"Krydderurt 8222", bak:"#D6D8C8", kort:"#EDEEE4", kant:"#C2C5B1",
         tekst:"#14170F", svak:"#4C5142", mist:"#5D6353", aksent:"#414B52",
         kobber:"#8A4C24", band:"linear-gradient(103deg,#C4C8B2,#D0D3C0)", bandtekst:"#3B4134",
         vask:"#C6CAB4", pynt:"#48523C", bunnbak:"#1A1E15", bunntekst:"#EDEEE4", bunnsvak:"#93998A", merkedot:"#9BA487" },

  beige:{ navn:"Soothing Beige 12075", bak:"#DED2C0", kort:"#F1EADF", kant:"#CBBDA7",
         tekst:"#191510", svak:"#544C40", mist:"#665D4F", aksent:"#4E5440",
         kobber:"#8A4C24", band:"linear-gradient(103deg,#CDBFA8,#D8CCB8)", bandtekst:"#443C31",
         vask:"#CFC1AA", pynt:"#5A6048", bunnbak:"#1E1913", bunntekst:"#F1EADF", bunnsvak:"#9A9084", merkedot:"#A8AC85" },

  organic:{ navn:"Organic Green 8494", bak:"#5A6048", kort:"#454B35", kant:"#6E7457",
         tekst:"#F5F3EA", svak:"#E2E2D2", mist:"#D2D5BF", aksent:"#EAEEDA",
         kobber:"#F8DCBC", band:"linear-gradient(103deg,#454B35,#525840)", bandtekst:"#DEDDCC",
         vask:"#7C8264", pynt:"#EAEEDA", bunnbak:"#353A29", bunntekst:"#F5F3EA", bunnsvak:"#B4B7A2", merkedot:"#F8DCBC" },
};

const PLAKAT_IKON = {
  cd:`<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/>`,
  usb:`<rect x="8" y="5" width="8" height="16" rx="2"/><rect x="10" y="2" width="4" height="3" rx="1"/>`,
  mobil:`<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M10.5 18.5h3"/>`,
  pc:`<rect x="3" y="5" width="18" height="12" rx="2"/><path d="M2 20h20"/>`,
  skjerm:`<rect x="2" y="4" width="20" height="13" rx="2"/><path d="M12 17v3M8 20h8"/>`,
  skriver:`<rect x="7" y="3" width="10" height="5"/><rect x="3" y="8" width="18" height="8" rx="2"/><rect x="7" y="16" width="10" height="5"/>`,
  hodetelefon:`<path d="M4 15v-3a8 8 0 0 1 16 0v3"/><rect x="2" y="14" width="4" height="7" rx="2"/><rect x="18" y="14" width="4" height="7" rx="2"/>`,
  kabel:`<path d="M5 3v5a3 3 0 0 0 3 3h1a3 3 0 0 1 3 3v3a3 3 0 0 0 3 3h4"/>`,
  batteri:`<rect x="2" y="8" width="17" height="9" rx="2"/><path d="M21 11v3M6 12.5h5"/>`,
};


const PLAKAT_PYNT = `
<svg class="pynt" viewBox="0 0 210 297" preserveAspectRatio="none" aria-hidden="true">
  <defs>
    <radialGradient id="varme" cx="90%" cy="4%" r="38%">
      <stop offset="0%" stop-color="var(--vask)" stop-opacity=".34"/>
      <stop offset="100%" stop-color="var(--vask)" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="kjolig" cx="5%" cy="76%" r="30%">
      <stop offset="0%" stop-color="var(--pynt)" stop-opacity=".07"/>
      <stop offset="100%" stop-color="var(--pynt)" stop-opacity="0"/>
    </radialGradient>
    <!-- ett blad, gjenbrukt i ulike vinkler -->
    <path id="blad" d="M0 0c0-3.4 2.1-6 5.4-6.7C5.8-3.2 3.6-.4 0 0z"/>
  </defs>
  <rect width="210" height="297" fill="url(#varme)"/>
  <rect width="210" height="297" fill="url(#kjolig)"/>

  <!-- gren med blader inn fra øvre høyre hjørne -->
  <g class="strek" stroke="var(--pynt)" fill="none" stroke-width=".3" opacity=".30"
     stroke-linecap="round" stroke-linejoin="round">
    <path d="M210 5.5c-13 .6-24.5 4.4-33.5 11.2"/>
    <g transform="translate(203 6.6) rotate(-52)"><use href="#blad"/></g>
    <g transform="translate(195.5 8.6) rotate(112)"><use href="#blad"/></g>
    <g transform="translate(188 11.6) rotate(-58)"><use href="#blad"/></g>
    <g transform="translate(181.5 15) rotate(118)"><use href="#blad"/></g>
    <g transform="translate(176.5 18.5) rotate(-64)"><use href="#blad"/></g>
  </g>

  <!-- spire nede til venstre -->
  <g class="strek" stroke="var(--pynt)" fill="none" stroke-width=".32" opacity=".30"
     stroke-linecap="round" stroke-linejoin="round">
    <path d="M9 290v-21"/>
    <g transform="translate(9 279) rotate(-118) scale(1.25)"><use href="#blad"/></g>
    <g transform="translate(9 272) rotate(58) scale(1.35)"><use href="#blad"/></g>
    <path d="M4.5 290h9"/>
  </g>

  <!-- sirkulær økonomi: to piler som jager hverandre, nede til høyre -->
  <g class="strek" stroke="var(--kobber)" fill="none" stroke-width=".34" opacity=".30"
     stroke-linecap="round" stroke-linejoin="round">
    <path d="M191 279.5a8 8 0 0 1 13.2-6.1"/>
    <path d="M201.2 273.6l3.2-.4-.6 3.2"/>
    <path d="M207 279.5a8 8 0 0 1-13.2 6.1"/>
    <path d="M196.8 285.4l-3.2.4.6-3.2"/>
  </g>

  <!-- to løse blad som faller, ved midtmargen -->
  <g class="strek" stroke="var(--pynt)" fill="none" stroke-width=".28" opacity=".20">
    <g transform="translate(5.5 142) rotate(24) scale(.85)"><use href="#blad"/></g>
    <g transform="translate(205 196) rotate(-146) scale(.8)"><use href="#blad"/></g>
  </g>

  <!-- fine hjørnemerker -->
  <g class="strek" stroke="var(--pynt)" fill="none" stroke-width=".3" opacity=".34">
    <path d="M8 8h6M8 8v6"/>
    <path d="M202 8h-6M202 8v6"/>
  </g>

  <!-- tynn stiplet kant langs venstre marg -->
  <path class="strek" d="M4.5 66v130" stroke="var(--pynt)" stroke-width=".3"
        stroke-dasharray="1 3.4" opacity=".26" fill="none"/>
</svg>`;

function esc(t) {
  return String(t == null ? "" : t)
    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}

function lagPlakatHtml(steder, stedsnavn, selskap, temanavn) {
  const rot = (typeof location !== "undefined" ? location.origin : "");
  const T = PLAKAT_TEMA[temanavn] || PLAKAT_TEMA.lys;
  const overskrift = selskap ? "Hos " + esc(selskap) : "På denne arbeidsplassen";

  const ruter = PLAKAT_TING.map(t => `
    <div class="rute${t.uthev ? " rute--uthev" : ""}">
      <div class="ikonboks"><svg class="ikon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">${PLAKAT_IKON[t.i]}</svg></div>
      <div class="rute__navn">${esc(t.n)}</div>
      <div class="rute__mal">${esc(t.d)}</div>
      ${t.m ? `<div class="rute__note">${esc(t.m)}</div>` : ""}
      ${t.f ? `<div class="rute__fakta">${esc(t.f)}</div>` : ""}
    </div>`).join("");

  const liste = (steder && steder.length)
    ? steder.slice(0, 3).map(s => `
        <li>
          <div>
            <div class="sted__navn">${esc(s.navn)}</div>
            <div class="sted__meta">${esc([
              s.type === "stasjon" ? "Gjenvinningsstasjon" : "Butikk — plikter å ta imot",
              s.adresse, s.sted].filter(Boolean).join("  ·  "))}</div>
          </div>
          <span class="sted__km">${s.km < 1 ? Math.round(s.km * 1000) + " m" : s.km.toFixed(1) + " km"}</span>
        </li>`).join("")
    : `<li class="sted--tom">
          <div class="tom__ledd">Vårt nærmeste innleveringssted for elektronisk avfall er:</div>
          <div class="tom__linje"></div>
          <div class="tom__linje"></div>
          <div class="tom__linje"></div>
        </li>`;

  return `<!doctype html>
<html lang="nb" data-tema="${PLAKAT_TEMA[temanavn] ? temanavn : "lys"}"><head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Kildesortering av elektronisk avfall${selskap ? " — " + esc(selskap) : ""}</title>
<style>
@font-face{font-family:Geist;src:url("${rot}/fonts/Geist-VariableFont_wght.ttf")format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("${rot}/fonts/GeistMono-VariableFont_wght.ttf")format("truetype");font-weight:100 900;font-display:swap}
${Object.entries(PLAKAT_TEMA).map(([id, t]) => `
html[data-tema="${id}"]{--bak:${t.bak};--kort:${t.kort};--kant:${t.kant};--tekst:${t.tekst};
  --svak:${t.svak};--mist:${t.mist};--oslo:${t.aksent};--kobber:${t.kobber};--band:${t.band};
  --bandtekst:${t.bandtekst};--pynt:${t.pynt};--bunnbak:${t.bunnbak};--bunntekst:${t.bunntekst};
  --bunnsvak:${t.bunnsvak};--merkedot:${t.merkedot};--vask:${t.vask}}`).join("")}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#7E7E7E;font-family:Geist,-apple-system,Helvetica,sans-serif;
     -webkit-font-smoothing:antialiased;padding:26px 16px 90px}

.ark{position:relative;width:210mm;min-height:297mm;margin:0 auto;background:var(--bak);
     color:var(--tekst);display:flex;flex-direction:column;overflow:hidden;
     box-shadow:0 18px 60px rgba(0,0,0,.34)}
.pynt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.inn{position:relative;flex:1;padding:13mm 15mm 5mm}

.stikk{font-family:"Geist Mono",ui-monospace,monospace;font-size:8pt;letter-spacing:.34em;
       text-transform:uppercase;color:var(--oslo)}
h1{font-size:28pt;line-height:1.08;letter-spacing:-.025em;font-weight:700;margin-top:5mm;text-wrap:balance}
h1 span{display:block;font-weight:300}
.regel{height:1px;background:linear-gradient(90deg,var(--oslo),rgba(74,90,98,.18));margin:5mm 0 3.5mm}
.ingress{font-size:10pt;color:var(--svak)}

.rutenett{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6mm;margin-top:5mm}
.rute{position:relative;background:var(--kort);border:1px solid var(--kant);
      border-radius:3mm;padding:3.2mm 3.8mm 3.6mm;
      box-shadow:0 .4mm 1.2mm rgba(10,10,10,.030)}
.rute--uthev{border:1.2px solid var(--kobber);background:color-mix(in srgb,var(--kobber) 12%,var(--kort))}
.ikonboks{width:7mm;height:7mm;border-radius:2mm;background:color-mix(in srgb,var(--oslo) 12%,transparent);
          display:flex;align-items:center;justify-content:center;margin-bottom:2.2mm}
.rute--uthev .ikonboks{background:color-mix(in srgb,var(--kobber) 18%,transparent)}
.ikon{width:4.2mm;height:4.2mm;color:var(--oslo);display:block}
.rute--uthev .ikon{color:var(--kobber)}
.rute--uthev .ikon{color:var(--kobber)}
.rute__navn{font-size:10.5pt;font-weight:600;line-height:1.25}
.rute__mal{font-family:"Geist Mono",ui-monospace,monospace;font-size:7pt;letter-spacing:.05em;
           text-transform:uppercase;color:var(--oslo);margin-top:1.4mm}
.rute--uthev .rute__mal{color:var(--kobber)}
.rute__note{font-size:7.6pt;color:var(--mist);margin-top:1mm}
.rute__fakta{font-size:6.5pt;line-height:1.34;color:var(--svak);margin-top:1.8mm;
             padding-top:1.6mm;border-top:1px solid var(--kant)}

.selg{position:relative;background:var(--band);
      border-radius:3mm;padding:4.6mm 6mm;margin-top:4.5mm}
.selg h2{font-size:11.5pt;font-weight:600;margin:1.6mm 0 1.3mm}
.selg p{font-size:9pt;color:var(--bandtekst)}

.innlev{margin-top:5mm}
.innlev__topp{display:flex;align-items:baseline;gap:4mm;margin-bottom:2.4mm}
.innlev__naer{font-size:8.4pt;color:var(--mist)}
.innlev ol{list-style:none;display:flex;flex-direction:column;gap:1.8mm}
.innlev li{display:flex;align-items:center;justify-content:space-between;gap:4mm;
           background:var(--kort);border:1px solid var(--kant);
           border-left:1.2mm solid var(--oslo);border-radius:2mm;padding:2.8mm 4.5mm}
.sted__navn{font-size:10.5pt;font-weight:600}
.sted__meta{font-size:7.8pt;color:var(--mist);margin-top:.7mm}
.sted__km{font-family:"Geist Mono",ui-monospace,monospace;font-size:11pt;font-weight:600;
          color:var(--kobber);white-space:nowrap}
.innlev li.sted--tom{display:block;border-left-color:var(--kobber);
           padding:5mm 7mm 5mm;min-height:46mm}
.tom__ledd{font-size:9.5pt;font-weight:600;color:var(--tekst);margin-bottom:9mm}
.tom__linje{border-bottom:1.4px dotted var(--mist);margin-bottom:10mm}
.tom__linje:last-child{margin-bottom:0}

.bunn{position:relative;background:var(--bunnbak);color:var(--bunntekst);padding:6.5mm 15mm;
      display:flex;align-items:flex-end;justify-content:space-between;gap:8mm}
.merke{font-size:15pt;font-weight:700;letter-spacing:-.02em}
.merke i{font-style:normal;font-weight:300}
.merke b{font-style:normal;font-weight:400;color:var(--merkedot)}
.bunn p{font-size:8pt;color:var(--bunnsvak);margin-top:1.6mm}
.bunn__kontakt{font-family:"Geist Mono",ui-monospace,monospace;font-size:7.6pt;
               color:var(--bunnsvak);text-align:right;line-height:1.7}

.verktoy{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:10px;
         padding:14px;background:rgba(10,10,10,.9);backdrop-filter:blur(8px)}
.verktoy button{font-family:Geist,sans-serif;font-size:14px;font-weight:500;cursor:pointer;
                padding:11px 20px;border-radius:8px;border:1px solid transparent;
                background:#F4F1EA;color:#0A0A0A}
.verktoy button:hover{background:#fff}
.verktoy .sek{background:transparent;color:#F4F1EA;border-color:rgba(244,241,234,.4)}
.verktoy__farger{display:flex;gap:6px;align-items:center;margin-right:6px}
.prikk{width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;
       border:1.5px solid rgba(244,241,234,.35);transition:transform .15s,border-color .15s}
.prikk:hover{transform:scale(1.12)}
.prikk[aria-checked="true"]{border-color:#F4F1EA;box-shadow:0 0 0 2px rgba(244,241,234,.28)}
.verktoy .sek:hover{background:rgba(244,241,234,.12)}

@page{size:A4 portrait;margin:0}
@media print{
  body{background:#fff;padding:0}
  .ark{width:auto;min-height:auto;height:297mm;margin:0;box-shadow:none}
  .pynt .strek{opacity:.22}
  .verktoy{display:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
</style></head>
<body>
<div class="ark">
  ${PLAKAT_PYNT}
  <div class="inn">
    <div class="stikk">Kildesortering av elektronisk avfall</div>
    <h1>${overskrift}<span>sorterer vi e-avfall</span></h1>
    <div class="regel"></div>
    <p class="ingress">Elektrisk og elektronisk avfall skal aldri i restavfallet. Her er hva som gjelder.</p>

    <div class="rutenett">${ruter}</div>

    <div class="selg">
      <div class="stikk">Virker det fortsatt?</div>
      <h2>Selg det heller enn å kaste det.</h2>
      <p>Finn.no, Tise eller intern gjenbruk. Husk å slette data og logge ut av kontoer først.</p>
    </div>

    <div class="innlev">
      <div class="innlev__topp">
        <span class="stikk">Nærmeste innlevering</span>
        ${stedsnavn ? `<span class="innlev__naer">nær ${esc(stedsnavn)}</span>` : ""}
      </div>
      <ol>${liste}</ol>
    </div>
  </div>

  <div class="bunn">
    <div>
      <div class="merke">solid<i>lab</i><b>.no</b></div>
      <p>Vi bygger systemer som gjør bærekraftsdata til noe folk faktisk bruker.</p>
    </div>
    <div class="bunn__kontakt">solidlab.no<br/>hello@solidlab.ai</div>
  </div>
</div>

<div class="verktoy">
  <div class="verktoy__farger" role="radiogroup" aria-label="Farge på plakaten">
    ${Object.entries(PLAKAT_TEMA).map(([id, t]) => `
      <button class="prikk" role="radio" data-t="${id}" title="${t.navn}" aria-label="${t.navn}"
              style="background:${t.bak}"></button>`).join("")}
  </div>
  <button onclick="window.print()">Skriv ut / lagre som PDF</button>
  <button class="sek" onclick="lagre()">Last ned som HTML</button>
</div>
<script>
(function(){
  var prikker = document.querySelectorAll(".prikk");
  function merk(){
    var n = document.documentElement.dataset.tema;
    prikker.forEach(function(p){ p.setAttribute("aria-checked", p.dataset.t === n); });
  }
  prikker.forEach(function(p){
    p.addEventListener("click", function(){
      document.documentElement.dataset.tema = p.dataset.t;
      merk();
    });
  });
  merk();
})();
function lagre(){
  var b=new Blob([document.documentElement.outerHTML],{type:"text/html"});
  var a=document.createElement("a");
  a.href=URL.createObjectURL(b);
  a.download=${JSON.stringify("e-avfall-plakat" + (selskap ? "-" + selskap.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"") : "") + ".html")};
  a.click();
}
</script>
</body></html>`;
}

function plakatUrl(steder, stedsnavn, selskap, tema) {
  const blob = new Blob([lagPlakatHtml(steder, stedsnavn, selskap, tema)], { type: "text/html;charset=utf-8" });
  return URL.createObjectURL(blob);
}