// Sjømatkasse subscription calculator

const freqs = {
  "7":  { label: "Hver uke",     mult: 4 },
  "14": { label: "Hver 14. dag", mult: 2 },
  "30": { label: "Månedlig",     mult: 1 },
};

// ─── Skille mellom billig og dyr kasse: 600 kr/kg ───────────────
const PRICE_THRESHOLD = 600;

// Grams per person per meal
const VOKSEN_G = 250;
const BARN_G   = 150;

// Mapping mellom data2.jsx-kategori og kalkulator-kategori. Bare kg-prisede
// produkter (kind="fish" / "shellfish") er aktuelle — unit-prisede hopper vi over
// fordi de ikke skalerer med antall kg per måltid.
const KASSE_CAT_DEFS = [
  { id: "hvit",     label: "Hvit fisk",          desc: "Filet, loin og skiver — kun rene utskjæringer",                  srcCat: "Hvit fisk" },
  { id: "rod",      label: "Rød fisk",           desc: "Filet og loin — kun rene utskjæringer",                          srcCat: "Rød fisk" },
  { id: "skalldyr", label: "Skalldyr og skjell", desc: "Reker, krabbe, sjøkreps, hummer, blåskjell, kamskjell og mer",   srcCat: "Skalldyr og skjell" },
];
const KG_KINDS = new Set(["fish", "shellfish"]);

const _avg = (prods) => prods.length
  ? Math.round(prods.reduce((s, p) => s + p.pris, 0) / prods.length)
  : 0;

const _splitByPrice = (cats, predicate) => cats
  .map(c => ({ ...c, produkter: c.produkter.filter(p => predicate(p.pris)) }))
  .filter(c => c.produkter.length > 0)
  .map(c => ({ ...c, avgPris: _avg(c.produkter) }));

// Bygger kalkulator-kategoriene fra `window.PRODUCTS` slik at admin-prisendringer
// flyter direkte gjennom (data2.jsx muterer PRODUCTS in-place ved sync).
const buildKasseCatsFromWindow = () => {
  const all = (typeof window !== "undefined" && Array.isArray(window.PRODUCTS)) ? window.PRODUCTS : [];
  return KASSE_CAT_DEFS.map(def => {
    const produkter = all
      .filter(p => p && p.cat === def.srcCat && KG_KINDS.has(p.kind) && (p.status ?? "available") === "available")
      .map(p => ({ navn: p.name, pris: Number(p.price) || 0, slug: p.slug }))
      .sort((a, b) => a.pris - b.pris);
    return { id: def.id, label: def.label, desc: def.desc, produkter, avgPris: _avg(produkter) };
  }).filter(c => c.produkter.length > 0);
};

// ─── Leveringsdag-regler for ferskhet ───────────────────────────
// Skalldyr: leveres først fra onsdag (fersk fangst midt i uken).
// Sjøkreps: leveres først fra torsdag (egne fangstdager).
const DAY_VALUE = { mandag: 1, tirsdag: 2, onsdag: 3, torsdag: 4, fredag: 5, lørdag: 6, søndag: 7 };
const SKALLDYR_MIN_DAY = 3;
const SJOKREPS_MIN_DAY = 4;
const isSjokreps = (navn) => !!navn && navn.toLowerCase().includes("sjøkreps");

const dayCatReason = (catId, leverdag) => {
  if (!leverdag) return null;
  const v = DAY_VALUE[leverdag] || 0;
  if (catId === "skalldyr" && v < SKALLDYR_MIN_DAY)
    return "Skalldyr kommer ferskt midt i uken — velg onsdag eller senere for å få det med.";
  return null;
};

const dayProdReason = (catId, prodNavn, leverdag) => {
  if (!leverdag) return null;
  const v = DAY_VALUE[leverdag] || 0;
  if (catId === "skalldyr" && v < SKALLDYR_MIN_DAY)
    return "Skalldyr leveres først fra onsdag.";
  if (catId === "skalldyr" && isSjokreps(prodNavn) && v < SJOKREPS_MIN_DAY)
    return "Sjøkreps leveres kun fra torsdag og senere — egne fangstdager.";
  return null;
};

const calcPrice = (voksne, barn, maltider, valgtCats, valgteProd, tier, allCats, tierAvg) => {
  const kgPerLev = maltider * (voksne * VOKSEN_G + barn * BARN_G) / 1000;
  if (kgPerLev === 0) return 0;

  let avgPris;
  if (tier) {
    avgPris = (tierAvg && tierAvg[tier]) || 0;
  } else {
    const alleProd = allCats
      .filter(c => valgtCats.includes(c.id))
      .flatMap(c => c.produkter);
    const spesifikkeProd = alleProd.filter(p =>
      valgteProd.includes(allCats.find(c => c.produkter.includes(p))?.id + ":" + p.navn)
    );
    if (spesifikkeProd.length > 0) {
      avgPris = Math.round(spesifikkeProd.reduce((s, p) => s + p.pris, 0) / spesifikkeProd.length);
    } else if (valgtCats.length > 0) {
      const sel = allCats.filter(c => valgtCats.includes(c.id));
      avgPris = Math.round(sel.reduce((s, c) => s + c.avgPris, 0) / sel.length);
    } else {
      avgPris = 590;
    }
  }

  return Math.max(349, Math.round(kgPerLev * avgPris / 10) * 10);
};

const KasseCatPicker = ({ cats, selected, onToggle, openCat, setOpenCat, produkterSelected, onToggleProd, leverType, leverdag }) => (
  <div style={{ display: "grid", gap: 10, marginTop: 12 }}>
    {cats.map(cat => {
      const catReason = dayCatReason(cat.id, leverdag);
      const catDisabled = !!catReason;
      const isSelected = !catDisabled && selected.includes(cat.id);
      const isOpen = !catDisabled && openCat === cat.id;

      const handleCatClick = () => {
        if (catDisabled) return;
        const nowSelected = !isSelected;
        onToggle(cat.id);
        if (leverType === "fast") {
          setOpenCat(nowSelected ? cat.id : (isOpen ? null : openCat));
        }
      };

      // Når kategorien er åpen i selvvalg-modus: sjekk om noen enkeltprodukter
      // er utilgjengelige (f.eks. sjøkreps på onsdag) og vis felles begrunnelse.
      const partialReason = !catDisabled && leverType === "fast"
        ? cat.produkter
            .map(p => dayProdReason(cat.id, p.navn, leverdag))
            .find(r => !!r) || null
        : null;

      return (
        <div key={cat.id} style={{
          borderRadius: "var(--hv-r-md)",
          border: `1px solid ${isSelected ? "rgba(65,193,186,0.5)" : "var(--hv-line)"}`,
          background: isSelected ? "var(--hv-teal-wash)" : "var(--hv-ink-3)",
          overflow: "hidden",
          opacity: catDisabled ? 0.55 : 1,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", cursor: catDisabled ? "not-allowed" : "pointer" }}
            onClick={handleCatClick}>
            <div style={{
              width: 20, height: 20, borderRadius: 4, flexShrink: 0,
              border: `2px solid ${isSelected ? "var(--hv-teal)" : "var(--hv-line)"}`,
              background: isSelected ? "var(--hv-teal)" : "transparent",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              {isSelected && <Check size={12} style={{ color: "#080A09" }} />}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{cat.label}</div>
              <div style={{ fontSize: 12, color: catDisabled ? "var(--hv-teal)" : "var(--hv-fg-3)", marginTop: 2, lineHeight: 1.4 }}>
                {catReason || cat.desc}
              </div>
            </div>
          </div>
          {isOpen && leverType === "fast" && (
            <div style={{ borderTop: "1px solid var(--hv-line)", padding: "12px 16px 16px" }}>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {cat.produkter.map(prod => {
                  const key = cat.id + ":" + prod.navn;
                  const prodReason = dayProdReason(cat.id, prod.navn, leverdag);
                  const prodDisabled = !!prodReason;
                  const picked = !prodDisabled && produkterSelected.includes(key);
                  return (
                    <button key={prod.navn}
                      className={"nw-kalk-chip" + (picked ? " active" : "")}
                      onClick={() => !prodDisabled && onToggleProd(key)}
                      disabled={prodDisabled}
                      title={prodReason || ""}
                      style={{ fontSize: 13, opacity: prodDisabled ? 0.45 : 1, cursor: prodDisabled ? "not-allowed" : "pointer" }}
                    >
                      {picked && <Check size={12} style={{ marginRight: 4, verticalAlign: "middle" }} />}
                      {prod.navn}
                      <span style={{ opacity: 0.6, marginLeft: 5 }}>{prod.pris} kr/kg</span>
                    </button>
                  );
                })}
              </div>
              {partialReason && (
                <div style={{ marginTop: 12, padding: "10px 12px", borderRadius: 8, background: "var(--hv-teal-wash)", border: "1px solid rgba(65,193,186,0.3)", fontSize: 12, color: "var(--hv-fg-2)", lineHeight: 1.5 }}>
                  {partialReason}
                </div>
              )}
              <button
                onClick={() => setOpenCat(null)}
                style={{
                  marginTop: 14, padding: "8px 20px", borderRadius: 999,
                  background: "var(--hv-teal)", color: "#080A09",
                  border: "none", fontWeight: 600, fontSize: 13, cursor: "pointer",
                }}
              >
                <Check size={13} style={{ verticalAlign: "middle", marginRight: 6 }} />
                Ferdig
              </button>
            </div>
          )}
        </div>
      );
    })}
  </div>
);

// Progressiv reveal: vises når `visible` blir true, animeres inn med anime.js + ruller til seg selv
const ProgressiveStep = ({ visible, children, autoScroll = true }) => {
  const ref = React.useRef(null);
  const [mounted, setMounted] = React.useState(visible);
  React.useEffect(() => { if (visible) setMounted(true); }, [visible]);
  React.useEffect(() => {
    if (!visible || !ref.current || !window.anime) return;
    const el = ref.current;
    window.anime.set(el, { opacity: 0, translateY: 28, scale: 0.98 });
    window.anime({
      targets: el,
      opacity: [0, 1],
      translateY: [28, 0],
      scale: [0.98, 1],
      duration: 720,
      easing: "cubicBezier(0.16, 1, 0.3, 1)",
    });
    // Subtil scroll så brukeren ser det nye trinnet
    if (autoScroll) {
      setTimeout(() => {
        const rect = el.getBoundingClientRect();
        if (rect.top < 0 || rect.bottom > window.innerHeight) {
          el.scrollIntoView({ behavior: "smooth", block: "center" });
        }
      }, 80);
    }
  }, [visible, autoScroll]);
  if (!mounted) return null;
  return <div ref={ref} style={{ willChange: "transform, opacity" }}>{children}</div>;
};

// Viser alle råvarer som inngår i valgt kasse (hverdags/eksklusiv),
// gruppert per underkategori. Animeres inn/oppdateres når tier endres.
const TierProductShowcase = ({ tier, leverdag }) => {
  const cats = tier === "eksklusiv" ? KASSE_CATS_EKSKLUSIV : KASSE_CATS_HVERDAGS;
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  // Lukk automatisk når man bytter tier
  React.useEffect(() => { setOpen(false); }, [tier]);
  // Animer produktchipsene når seksjonen åpnes
  React.useEffect(() => {
    if (!open || !window.anime || !ref.current) return;
    const chips = ref.current.querySelectorAll("[data-prod-chip]");
    window.anime.set(chips, { opacity: 0, translateY: 10, scale: 0.95 });
    window.anime({
      targets: chips,
      opacity: [0, 1],
      translateY: [10, 0],
      scale: [0.95, 1],
      duration: 500,
      delay: window.anime.stagger(16),
      easing: "cubicBezier(0.16, 1, 0.3, 1)",
    });
  }, [open, tier]);
  const totalCount = cats.reduce((n, c) => n + c.produkter.length, 0);
  return (
    <div style={{ marginTop: 14 }}>
      <button
        type="button"
        onClick={() => setOpen(v => !v)}
        style={{
          width: "100%", padding: "10px 14px", borderRadius: 10,
          border: "1px solid var(--hv-line)", background: "transparent",
          color: "var(--hv-teal)", cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10,
          fontSize: 13, fontWeight: 600, textAlign: "left",
          transition: "border-color 200ms var(--hv-ease), background 200ms var(--hv-ease)",
        }}
      >
        <span style={{ color: "var(--hv-fg-2)" }}>
          {open ? "Skjul" : "Se"} råvarene som kan komme
          <span style={{ marginLeft: 8, fontSize: 11, padding: "1px 7px", borderRadius: 999, background: "var(--hv-teal-wash)", color: "var(--hv-teal)", fontWeight: 600 }}>
            {totalCount} stk
          </span>
        </span>
        <span style={{ fontSize: 16, transition: "transform 220ms var(--hv-ease)", transform: open ? "rotate(180deg)" : "rotate(0)", display: "inline-block" }}>⌄</span>
      </button>
      {open && (
        <div ref={ref} style={{ marginTop: 14, padding: "14px 2px" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {cats.map(cat => {
              const catReason = dayCatReason(cat.id, leverdag);
              return (
                <div key={cat.id} style={{ opacity: catReason ? 0.55 : 1 }}>
                  <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 6 }}>
                    <div style={{ fontWeight: 600, fontSize: 13, color: "var(--hv-fg-2)" }}>{cat.label}</div>
                    <div style={{ fontSize: 11, color: "var(--hv-fg-3)" }}>{cat.produkter.length} stk · snitt ~ {cat.avgPris} kr/kg</div>
                  </div>
                  {catReason && (
                    <div style={{ fontSize: 11, color: "var(--hv-teal)", marginBottom: 6, fontStyle: "italic" }}>{catReason}</div>
                  )}
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                    {cat.produkter.map(p => {
                      const prodReason = dayProdReason(cat.id, p.navn, leverdag);
                      const prodDisabled = !!prodReason;
                      return (
                        <span key={p.navn} data-prod-chip
                          title={prodReason || ""}
                          style={{
                            display: "inline-flex", alignItems: "center", gap: 6,
                            padding: "5px 10px", borderRadius: 999,
                            background: "rgba(255,255,255,0.02)",
                            border: "1px solid var(--hv-line)",
                            fontSize: 12, color: "var(--hv-fg-2)",
                            opacity: prodDisabled ? 0.4 : 1,
                            textDecoration: prodDisabled ? "line-through" : "none",
                            willChange: "transform, opacity",
                          }}>
                          {p.navn}
                          <span style={{ fontSize: 11, color: "var(--hv-fg-3)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }}>{p.pris} kr</span>
                        </span>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
          <p style={{ fontSize: 11, color: "var(--hv-fg-3)", marginTop: 12, lineHeight: 1.5, fontStyle: "italic" }}>
            Vi blander av disse basert på ferskhet og sesong — du får beskjed dagen før levering om hva som kommer.
          </p>
        </div>
      )}
    </div>
  );
};

const Sjømatkasse = ({ addToCart }) => {
  const [freq, setFreq]           = React.useState("");
  const [leverdag, setLeverdag]   = React.useState("");
  const [maltider, setMaltider]   = React.useState(0);
  const [voksne, setVoksne]       = React.useState(2);
  const [barn, setBarn]           = React.useState(1);
  const [leverType, setLeverType] = React.useState("mix");
  const [kasseTier, setKasseTier] = React.useState("hverdags");
  const [valgtCats, setValgtCats] = React.useState([]);
  const [openCat, setOpenCat]     = React.useState(null);
  const [valgteProd, setValgteProd] = React.useState([]);
  const [moreMeals, setMoreMeals]   = React.useState(false);

  // Progressiv reveal: trinn 1 vises alltid, neste trinn vises først når forrige er besvart
  const [step, setStep] = React.useState(1);
  const advance = (n) => setStep(s => Math.max(s, n));

  const aktiveCats = leverType === "fast" ? KASSE_CATS_FAST
    : kasseTier === "eksklusiv" ? KASSE_CATS_EKSKLUSIV
    : KASSE_CATS_HVERDAGS;

  React.useEffect(() => {
    setValgtCats([]);
    setValgteProd([]);
    setOpenCat(null);
  }, [leverType, kasseTier]);

  // Trinn 4 vises først når BÅDE frekvens og leveringsdag er valgt
  React.useEffect(() => {
    if (freq && leverdag) advance(4);
  }, [freq, leverdag]);

  // Når leveringsdagen endrer seg: rens vekk valg som ikke lenger er tilgjengelige
  // (f.eks. skalldyr på mandag, sjøkreps på onsdag).
  React.useEffect(() => {
    if (!leverdag) return;
    setValgtCats(prev => prev.filter(catId => !dayCatReason(catId, leverdag)));
    setValgteProd(prev => prev.filter(key => {
      const idx = key.indexOf(":");
      if (idx < 0) return true;
      const catId = key.slice(0, idx);
      const navn  = key.slice(idx + 1);
      return !dayProdReason(catId, navn, leverdag);
    }));
  }, [leverdag]);

  const people    = voksne + barn;
  const freqInfo  = freqs[freq] || { label: "—", mult: 0 };
  // `maltider` er nå middager pr. uke. Pr. levering = uke-antall × (4 uker / leveringer pr. mnd).
  const maltiderPerLev = freqInfo.mult > 0 ? (maltider * 4) / freqInfo.mult : 0;
  const base      = calcPrice(voksne, barn, maltiderPerLev, valgtCats, valgteProd, leverType === "mix" ? kasseTier : null, aktiveCats);
  const monthly   = base * freqInfo.mult;
  // Besparelse vs enkeltleveringer (uten abonnement-rabatt)
  const ABO_RABATT = 0.15; // abonnement gir 15 % rabatt
  const enkeltMonthly = freqInfo.mult > 0 ? Math.round(monthly / (1 - ABO_RABATT)) : 0;
  const sparelseMnd   = Math.max(0, enkeltMonthly - monthly);
  const sparelseAar   = sparelseMnd * 12;
  const perMaltid = maltiderPerLev > 0 && people > 0 ? Math.round(base / maltiderPerLev / people) : 0;
  const kgPerLev  = +(maltiderPerLev * (voksne * VOKSEN_G + barn * BARN_G) / 1000).toFixed(2);

  // Pris vises først når bruker faktisk har valgt råvarer i siste trinn (05)
  const visGodkjent = valgtCats.length > 0 || valgteProd.length > 0;

  const toggleCat = (id) => {
    setValgtCats(valgtCats.includes(id) ? valgtCats.filter(x => x !== id) : [...valgtCats, id]);
  };
  const toggleProd = (key) => {
    setValgteProd(valgteProd.includes(key) ? valgteProd.filter(x => x !== key) : [...valgteProd, key]);
  };

  return (
    <>
      <Section tight>
        <Wrap style={{ textAlign: "center", paddingTop: 40 }}>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(52px, 8vw, 120px)" }}>
            Fersk fisk, <em>på fast dag.</em>
          </h1>
          <p className="nw-lead" style={{ marginTop: 20, marginInline: "auto" }}>
            Sett det opp én gang. Vi plukker dagens beste, pakker på is, og leverer på døra.
            Du kan pause, bytte, eller avslutte når som helst.
          </p>
        </Wrap>
      </Section>

      <Wrap>
        {/* Progresjons-indikator */}
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 28, justifyContent: "center" }}>
          {[1,2,3,4,5].map(n => (
            <div key={n} style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{
                width: 28, height: 28, borderRadius: "50%",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 12, fontWeight: 700, fontFamily: "var(--hv-font-display)",
                background: step >= n ? "var(--hv-teal)" : "transparent",
                color: step >= n ? "var(--hv-ink)" : "var(--hv-fg-3)",
                border: `1px solid ${step >= n ? "var(--hv-teal)" : "var(--hv-line)"}`,
                transition: "all 400ms cubic-bezier(0.16, 1, 0.3, 1)",
              }}>{n}</div>
              {n < 5 && <div style={{ width: 24, height: 2, borderRadius: 2, background: step > n ? "var(--hv-teal)" : "var(--hv-line)", transition: "background 400ms ease" }}/>}
            </div>
          ))}
        </div>

        <div className="nw-kalk">
          <div>

            {/* 01 — Hvor mange spiser */}
            <ProgressiveStep visible={step >= 1} autoScroll={false}>
              <div className="nw-kalk-control">
                <Eyebrow>01 <Dash /> Hvor mange spiser?</Eyebrow>
                <div style={{ display: "grid", gap: 12, marginTop: 12 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                    <span style={{ fontSize: 13, color: "var(--hv-fg-3)", minWidth: 56 }}>Voksne</span>
                    <input type="range" min={0} max={8} step={1} value={voksne}
                      onChange={e => { setVoksne(Number(e.target.value)); advance(2); }}
                      style={{ flex: 1, accentColor: "var(--hv-teal)" }} />
                    <span style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 24, minWidth: 28, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{voksne}</span>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                    <span style={{ fontSize: 13, color: "var(--hv-fg-3)", minWidth: 56 }}>Barn</span>
                    <input type="range" min={0} max={6} step={1} value={barn}
                      onChange={e => { setBarn(Number(e.target.value)); advance(2); }}
                      style={{ flex: 1, accentColor: "var(--hv-teal)" }} />
                    <span style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 24, minWidth: 28, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{barn}</span>
                  </div>
                </div>
                {step < 2 && (
                  <button className="nw-btn nw-btn-ghost" style={{ marginTop: 16, fontSize: 13 }} onClick={() => advance(2)}>
                    Fortsett →
                  </button>
                )}
              </div>
            </ProgressiveStep>

            {/* 02 — Antall fiskemiddager pr. uke */}
            <ProgressiveStep visible={step >= 2}>
              <div className="nw-kalk-control">
                <Eyebrow>02 <Dash /> Hvor mange fiskemiddager i uken?</Eyebrow>
                <div className="nw-kalk-chipset" style={{ marginTop: 8 }}>
                  {[1, 2, 3, 4].map(n => (
                    <button key={n} className={"nw-kalk-chip" + (maltider === n ? " active" : "")} onClick={() => { setMaltider(n); setMoreMeals(false); advance(3); }}>
                      {n} {n === 1 ? "middag" : "middager"}
                    </button>
                  ))}
                </div>
                {!moreMeals ? (
                  <button
                    type="button"
                    onClick={() => setMoreMeals(true)}
                    style={{
                      marginTop: 12, padding: "6px 12px", borderRadius: 999,
                      background: "transparent", border: "1px dashed var(--hv-line)",
                      color: "var(--hv-fg-3)", fontSize: 12, cursor: "pointer",
                    }}
                  >
                    Flere middager?
                  </button>
                ) : (
                  <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                    <label style={{ fontSize: 13, color: "var(--hv-fg-3)" }}>Antall middager pr. uke</label>
                    <input
                      type="number"
                      min={1}
                      max={21}
                      value={maltider > 4 ? maltider : ""}
                      placeholder="5+"
                      onChange={e => {
                        const n = parseInt(e.target.value, 10);
                        if (Number.isFinite(n) && n > 0) {
                          setMaltider(Math.min(n, 21));
                          advance(3);
                        } else {
                          setMaltider(0);
                        }
                      }}
                      style={{
                        width: 80, padding: "8px 10px", borderRadius: 8,
                        background: "var(--hv-ink-3)", border: "1px solid var(--hv-line)",
                        color: "var(--hv-fg)", fontSize: 14, fontFamily: "var(--hv-font-display)",
                        fontWeight: 700, fontVariantNumeric: "tabular-nums", textAlign: "center",
                      }}
                    />
                    <button
                      type="button"
                      onClick={() => { setMoreMeals(false); setMaltider(0); }}
                      style={{
                        padding: "6px 10px", borderRadius: 999,
                        background: "transparent", border: "1px solid var(--hv-line)",
                        color: "var(--hv-fg-3)", fontSize: 12, cursor: "pointer",
                      }}
                    >
                      Tilbake
                    </button>
                  </div>
                )}
              </div>
            </ProgressiveStep>

            {/* 03 — Frekvens + leveringsdag */}
            <ProgressiveStep visible={step >= 3}>
              <div className="nw-kalk-control">
                <Eyebrow>03 <Dash /> Frekvens og leveringsdag</Eyebrow>
                <div className="nw-kalk-chipset" style={{ marginTop: 8 }}>
                  {Object.entries(freqs).map(([k, f]) => (
                    <button key={k} className={"nw-kalk-chip" + (freq === k ? " active" : "")} onClick={() => setFreq(k)}>
                      {f.label}
                    </button>
                  ))}
                </div>
                <div style={{ marginTop: 12 }}>
                  <div style={{ fontSize: 12, color: "var(--hv-fg-3)", marginBottom: 8 }}>Ønsket leveringsdag</div>
                  <div className="nw-kalk-chipset">
                    {["Mandag", "Onsdag", "Fredag"].map(dag => (
                      <button key={dag} className={"nw-kalk-chip" + (leverdag === dag.toLowerCase() ? " active" : "")} onClick={() => setLeverdag(dag.toLowerCase())}>
                        {dag}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </ProgressiveStep>

            {/* 04 — Hva ønsker du */}
            <ProgressiveStep visible={step >= 4}>
              <div className="nw-kalk-control">
                <Eyebrow>04 <Dash /> Hva ønsker du å motta?</Eyebrow>
              <div style={{ display: "grid", gap: 10, marginTop: 12 }}>
                {[
                  { id: "mix", title: "La oss velge for deg", desc: "Vi sender dagens beste råvarer. Du får beskjed dagen før om hva som kommer." },
                  { id: "fast", title: "Jeg vil velge selv", desc: "Velg hvilke kategorier og råvarer du ønsker. Vi leverer det du har valgt." },
                ].map(opt => (
                  <div key={opt.id} style={{ borderRadius: "var(--hv-r-md)", border: `1px solid ${leverType === opt.id ? "rgba(65,193,186,0.5)" : "var(--hv-line)"}`, background: leverType === opt.id ? "var(--hv-teal-wash)" : "var(--hv-ink-3)", overflow: "hidden" }}>
                    <div onClick={() => { setLeverType(opt.id); advance(5); }} style={{ display: "flex", gap: 14, padding: "16px", cursor: "pointer" }}>
                      <div style={{
                        width: 20, height: 20, borderRadius: "50%", flexShrink: 0, marginTop: 2,
                        border: `2px solid ${leverType === opt.id ? "var(--hv-teal)" : "var(--hv-line)"}`,
                        background: leverType === opt.id ? "var(--hv-teal)" : "transparent",
                        display: "flex", alignItems: "center", justifyContent: "center",
                      }}>
                        {leverType === opt.id && <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#080A09" }} />}
                      </div>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 15 }}>{opt.title}</div>
                        <div style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 4, lineHeight: 1.5 }}>{opt.desc}</div>
                      </div>
                    </div>
                    {opt.id === "mix" && leverType === "mix" && (
                      <div style={{ borderTop: "1px solid var(--hv-line)", padding: "14px 16px 16px" }}>
                        <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--hv-fg-3)", marginBottom: 10 }}>Hva slags kasse vil du ha?</div>
                        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                          {[
                            { id: "hverdags", label: "Hverdagskasse", desc: `Alle råvarer under ${PRICE_THRESHOLD} kr/kg — god hverdagsmat`,  pris: TIER_AVG.hverdags, cats: KASSE_CATS_HVERDAGS },
                            { id: "eksklusiv", label: "Eksklusiv kasse", desc: `Alle råvarer fra ${PRICE_THRESHOLD} kr/kg og opp — det aller beste`, pris: TIER_AVG.eksklusiv, cats: KASSE_CATS_EKSKLUSIV },
                          ].map(tier => (
                            <div key={tier.id} onClick={() => { setKasseTier(tier.id); advance(5); }} style={{
                              flex: "1 1 180px", padding: "12px 14px", borderRadius: "var(--hv-r-md)", cursor: "pointer",
                              border: `1px solid ${kasseTier === tier.id ? "var(--hv-teal)" : "var(--hv-line)"}`,
                              background: kasseTier === tier.id ? "rgba(65,193,186,0.12)" : "var(--hv-ink-3)",
                            }}>
                              <div style={{ fontWeight: 600, fontSize: 14 }}>{tier.label}</div>
                              <div style={{ fontSize: 12, color: "var(--hv-fg-3)", marginTop: 4, lineHeight: 1.4 }}>{tier.desc}</div>
                              <div style={{ fontSize: 12, color: "var(--hv-teal)", marginTop: 6, fontWeight: 600 }}>
                                ~ {tier.pris} kr/kg i snitt
                              </div>
                              <div style={{ fontSize: 11, color: "var(--hv-fg-3)", marginTop: 3 }}>
                                {tier.cats.reduce((n, c) => n + c.produkter.length, 0)} råvarer
                              </div>
                            </div>
                          ))}
                        </div>

                        {/* Viser alle råvarer i valgt kasse — oppdateres når bruker bytter tier */}
                        <TierProductShowcase tier={kasseTier} leverdag={leverdag} />
                      </div>
                    )}
                  </div>
                ))}
              </div>
              </div>
            </ProgressiveStep>

            {/* 05 — Kategori/produkt valg */}
            <ProgressiveStep visible={step >= 5}>
              <div className="nw-kalk-control">
                <Eyebrow>05 <Dash /> {leverType === "fast" ? "Velg råvarer" : "Velg foretrukne kategorier"}</Eyebrow>
                {leverType === "mix" && (
                  <p style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 8, marginBottom: 4 }}>
                    Valgfritt — velg kategorier du foretrekker, eller la oss overraske deg.
                  </p>
                )}
                <KasseCatPicker
                  cats={aktiveCats}
                  selected={valgtCats}
                  onToggle={toggleCat}
                  openCat={openCat}
                  setOpenCat={setOpenCat}
                  produkterSelected={valgteProd}
                  onToggleProd={toggleProd}
                  leverType={leverType}
                  leverdag={leverdag}
                />
              </div>
            </ProgressiveStep>

          </div>

          {/* Sammendrag */}
          <div className="nw-kalk-summary">
            <Eyebrow>Din kasse</Eyebrow>
            <div style={{ marginTop: 20, marginBottom: 28 }}>
              {visGodkjent ? (
                <>
                  <div style={{ fontSize: 12, color: "var(--hv-fg-3)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Pr. levering</div>
                  <div className="nw-kalk-total">{base} kr</div>
                  <div style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 4 }}>
                    {people > 0 && maltider > 0 && `~ ${perMaltid} kr / person / måltid`}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--hv-fg-3)", marginTop: 2 }}>
                    {kgPerLev > 0 && `${kgPerLev} kg sjømat per levering`}
                  </div>
                </>
              ) : (
                <div style={{ padding: "24px 0", color: "var(--hv-fg-3)", fontSize: 14, lineHeight: 1.6 }}>
                  Velg minst én {leverType === "fast" ? "råvare" : "kategori"} i trinn 05 for å se estimert pris.
                </div>
              )}
            </div>
            <hr className="nw-hr" />
            <div className="nw-kalk-line"><span className="lbl">Voksne</span><span>{voksne}</span></div>
            <div className="nw-kalk-line"><span className="lbl">Barn</span><span>{barn}</span></div>
            <div className="nw-kalk-line"><span className="lbl">Middager</span><span>{maltider > 0 ? `${maltider} per uke` : "—"}</span></div>
            <div className="nw-kalk-line"><span className="lbl">Frekvens</span><span>{freq ? freqInfo.label : "—"}</span></div>
            <div className="nw-kalk-line"><span className="lbl">Leveringsdag</span><span style={{ textTransform: "capitalize" }}>{leverdag || "—"}</span></div>
            <div className="nw-kalk-line"><span className="lbl">Type</span><span>{leverType === "fast" ? "Eget valg" : kasseTier === "eksklusiv" ? "Eksklusiv mix" : "Hverdags mix"}</span></div>
            <div className="nw-kalk-line"><span className="lbl">Levering</span><span>Gratis</span></div>
            <hr className="nw-hr" />
            {visGodkjent && (
              <div className="nw-kalk-line" style={{ fontSize: 16, paddingTop: 14 }}>
                <span style={{ fontWeight: 600 }}>Pr. måned</span>
                <span style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontVariantNumeric: "tabular-nums", fontSize: 22 }}>{monthly} kr</span>
              </div>
            )}
            {visGodkjent && sparelseMnd > 0 && (
              <div style={{ marginTop: 10, padding: "12px 14px", background: "var(--hv-teal-wash)", border: "1px solid rgba(65,193,186,0.35)", borderRadius: 10, fontSize: 13 }}>
                <div style={{ fontWeight: 600, color: "var(--hv-teal)", marginBottom: 4 }}>Du sparer med abonnement</div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span>Pr. måned</span><span style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{sparelseMnd.toLocaleString("nb-NO")} kr</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span>Pr. år</span><span style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{sparelseAar.toLocaleString("nb-NO")} kr</span>
                </div>
                <div style={{ marginTop: 6, fontSize: 11, color: "var(--hv-fg-3)" }}>
                  Sammenlignet med samme produkter kjøpt som enkeltleveringer (15 % abo-rabatt).
                </div>
              </div>
            )}
            <Btn size="lg" style={{ width: "100%", marginTop: 20, opacity: visGodkjent ? 1 : 0.5, pointerEvents: visGodkjent ? "auto" : "none" }}
              onClick={() => visGodkjent && addToCart({ slug: "sjømatkasse-abo", name: "Sjømatkasse-abonnement", cat: "Abonnement", price: base, unit: freqInfo.label.toLowerCase(), img: "assets/img/skalldyrkasse.webp" })}>
              {visGodkjent ? "Start abonnement" : "Velg råvarer først"}
            </Btn>
            <div style={{ fontSize: 12, color: "var(--hv-fg-3)", textAlign: "center", marginTop: 12 }}>
              Pauser eller avslutt når som helst.
            </div>
          </div>
        </div>
      </Wrap>

      <Section>
        <Wrap>
          <div className="nw-grid-3">
            {[
              { t: "Beskjed dagen før", d: "Du får melding om hva som kommer — bytt om du vil ha noe annet." },
              { t: "Pause når du vil", d: "Bortreist? To klikk, og kasse blir hoppet over." },
              { t: "15 % rabatt", d: "På alt utenfor kasse — hele tiden du er abonnent." },
            ].map((c, i) => (
              <div key={i}>
                <span className="nw-num">{i + 1}</span>
                <h3 className="nw-h3" style={{ marginTop: 16 }}>{c.t}</h3>
                <p className="nw-lead" style={{ fontSize: 16, marginTop: 8 }}>{c.d}</p>
              </div>
            ))}
          </div>
        </Wrap>
      </Section>
    </>
  );
};

Object.assign(window, { Sjømatkasse });