// Remaining pages: Om, Catering, Levering, Kontakt (FAQ)

const DELIVERY_ZONES = [
  {
    name: "Bergen sentrum",
    postnr: new Set([
      5003,5004,5005,5006,5007,5008,5009,5010,5011,5012,5013,5014,5015,
      5016,5017,5018,5019,5022,5031,5032,5033,5034,5035,5036,5037,5038,
      5039,5041,5042,5043,5045,5052,5053,5054,5055,5056,5057,5058,5059,
      5063,5067,5068,5072,5073,5075,5081,5082,5089,5093,5094,5096,5097,
      5098,5099,5160,5161,5162,5163,5164,5165,5170,5171,
    ]),
  },
  {
    name: "Åsane",
    postnr: new Set([
      5101,5104,5105,5109,5111,5113,5114,5115,5116,5117,
      5118,5119,5121,5122,5124,5130,5131,5132,5134,5135,5136,5137,
    ]),
  },
  {
    name: "Fana",
    postnr: new Set([
      5172,5173,5174,5176,5178,5179,5183,5184,
      5221,5222,5223,5224,5225,5226,5227,5228,5229,5230,5231,5232,5243,5244,
    ]),
  },
  {
    name: "Fyllingsdalen",
    postnr: new Set([5141,5142,5143,5144,5145,5146,5147,5148,5151,5152,5153,5154,5155]),
  },
  {
    name: "Sotra",
    postnr: new Set([5346,5347,5350,5353,5354,5355,5357,5360,5363,5365,5366,5378,5379]),
  },
  {
    name: "Hjellestad",
    postnr: new Set([5235,5237,5251,5252,5253,5254,5257,5258,5259]),
  },
  {
    name: "Os",
    postnr: new Set([5200,5201,5202,5203,5204,5205,5206,5207,5208,5209,5210,5211,5212,5215,5216,5217,5218]),
  },
  {
    name: "Sædalen",
    postnr: new Set([5236,5238]),
  },
];

const finnSone = (pnr) => {
  const n = parseInt(pnr, 10);
  if (isNaN(n) || String(pnr).length !== 4) return null;
  for (const zone of DELIVERY_ZONES) {
    if (zone.postnr.has(n)) return zone.name;
  }
  return null;
};

const PostnummerSøk = () => {
  const [val, setVal] = React.useState("");
  const [result, setResult] = React.useState(null);

  const check = () => {
    if (val.length !== 4) return;
    const sone = finnSone(val);
    setResult({ pnr: val, sone });
  };

  const ok = result && result.sone;
  const checked = result !== null;

  return (
    <div style={{
      background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)",
      borderRadius: "var(--hv-r-lg)", padding: "32px 36px", maxWidth: 520,
    }}>
      <Eyebrow>Sjekk ditt postnummer</Eyebrow>
      <p style={{ fontSize: 14, color: "var(--hv-fg-3)", marginTop: 8, marginBottom: 20 }}>
        Skriv inn postnummeret ditt for å se om vi leverer til deg.
      </p>
      <div style={{ display: "flex", gap: 10 }}>
        <input
          type="text"
          inputMode="numeric"
          maxLength={4}
          placeholder="F.eks. 5008"
          value={val}
          onChange={e => { setVal(e.target.value.replace(/\D/g, "")); setResult(null); }}
          onKeyDown={e => e.key === "Enter" && check()}
          style={{
            flex: 1, padding: "12px 16px", fontSize: 18,
            fontFamily: "var(--hv-font-display)", fontWeight: 600,
            letterSpacing: "0.06em", border: "1px solid var(--hv-line)",
            borderRadius: 8, background: "var(--hv-surface)", color: "var(--hv-fg-1)",
            outline: "none",
          }}
        />
        <Btn onClick={check} size="lg" style={{ flexShrink: 0 }}>Sjekk</Btn>
      </div>

      {checked && (
        <div style={{
          marginTop: 20, padding: "16px 20px", borderRadius: 8,
          background: ok ? "rgba(65,193,186,0.1)" : "rgba(255,255,255,0.04)",
          border: `1px solid ${ok ? "rgba(65,193,186,0.4)" : "var(--hv-line)"}`,
          display: "flex", alignItems: "center", gap: 14,
        }}>
          {ok ? (
            <>
              <Check size={22} style={{ color: "var(--hv-teal)", flexShrink: 0 }} />
              <div>
                <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 17 }}>
                  Vi leverer til ditt postnummer!
                </div>
                <div style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 3 }}>
                  Vi leverer alle hverdager mellom 13–18
                </div>
              </div>
            </>
          ) : (
            <>
              <MapPin size={22} style={{ color: "var(--hv-fg-3)", flexShrink: 0 }} />
              <div>
                <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 17 }}>
                  Vi leverer ikke til {result.pnr} ennå
                </div>
                <div style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 3 }}>
                  Vi dekker foreløpig kun Bergen og Omegn.
                </div>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
};

const Om = ({ goShop }) => (
  <>
    <Section tight>
      <Wrap>
        <div style={{ paddingTop: 40, maxWidth: 900 }}>
          <Eyebrow>Om oss</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(52px, 8vw, 112px)", textWrap: "balance" }}>
            Fersk sjømat skal være <em>tilgjengelig!</em>
          </h1>
        </div>
      </Wrap>
    </Section>

    <Wrap>
      <div style={{ aspectRatio: "16/8", borderRadius: "var(--hv-r-lg)", overflow: "hidden", marginBottom: 80 }}>
        <img src="assets/img/erik-1.webp" alt="Erik i Bergen" style={{ width: "100%", height: "100%", objectFit: "cover", animation: "nw-kenburns 26s ease-in-out infinite alternate" }} />
      </div>
    </Wrap>

    <Section>
      <Wrap>
        <div className="nw-split">
          <div>
            <Eyebrow>Grunnleggeren</Eyebrow>
            <h2 className="nw-h2" style={{ marginTop: 16 }}>Erik startet Havøyet fordi kvalitet sjømat <em>ikke finnes over alt.</em></h2>
          </div>
          <div>
            <p className="nw-lead">
              Jeg bor på Os. En stund kjøpte jeg fisk i butikken. Ikke fordi jeg syntes det var greit,
              men fordi dagene er lange og fiskehandleren er et stykke unna. Jeg visste at det fantes bedre,
              men jeg rakk det ikke.
            </p>
            <p className="nw-lead" style={{ marginTop: 20 }}>
              Det er det Havøyet handler om. At du ikke skal måtte velge mellom et travelt liv og skikkelig
              god mat. Enten du bor på Os, i Åsane, på Sotra eller midt i Bergen: fisken skal komme til deg,
              ikke omvendt.
            </p>
          </div>
        </div>
      </Wrap>
    </Section>

    <Section style={{ background: "var(--hv-ink-2)" }}>
      <Wrap>
        <div className="nw-grid-3">
          {[
            { n: "100%", t: "vakuumert og pakket på is" },
            { n: "5★", t: "bare 5-stjerners tilbakemeldinger", sub: "fra over 35 anmeldelser" },
            { n: "Domstein", t: "vår leverandør — rett fra kaia" },
            { n: "Samme", t: "dag svar på alle henvendelser" },
            { n: "Fersk", t: "aldri fryst, aldri på lager" },
            { n: "Bergen", t: "hjemlevering alle hverdager" },
          ].map((s, i) => (
            <div key={i} style={{ padding: "24px 0", borderBottom: "1px solid var(--hv-line)" }}>
              <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 56, letterSpacing: "-0.03em", color: "var(--hv-teal)", fontVariantNumeric: "tabular-nums" }}>{s.n}</div>
              <div style={{ fontSize: 14, color: "var(--hv-fg-3)", marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>{s.t}</div>
              {s.sub && (
                <div style={{ fontSize: 12, color: "var(--hv-teal)", marginTop: 6, fontWeight: 600, letterSpacing: "0.04em" }}>{s.sub}</div>
              )}
            </div>
          ))}
        </div>
      </Wrap>
    </Section>

    <Section>
      <Wrap>
        <div className="nw-quote">
          <div className="nw-quote-text">
            "Vi er ikke de største i dag, men det skal ikke stoppe oss fra å levere <span className="mark">det beste av sjømat i Bergen!</span>"
          </div>
          <div className="nw-quote-attr">Erik · Grunder, Havøyet</div>
          <Btn style={{ marginTop: 32 }} onClick={goShop}>Se hva vi har i dag <ArrowRight size={14}/></Btn>
        </div>
      </Wrap>
    </Section>
  </>
);

const CateringOppdrag = ({ oppdrag, onBack }) => (
  <>
    <Section tight>
      <Wrap style={{ paddingTop: 40 }}>
        <button onClick={onBack} style={{ background: "none", border: "none", color: "var(--hv-teal)", fontSize: 13, cursor: "pointer", padding: 0, marginBottom: 24, display: "flex", alignItems: "center", gap: 6 }}>
          <ArrowRight size={14} style={{ transform: "rotate(180deg)" }} /> Tilbake til catering
        </button>
        <Eyebrow>Catering — oppdrag</Eyebrow>
        <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(40px, 6vw, 88px)" }}>
          {oppdrag.title}
        </h1>
        {oppdrag.guests && (
          <div style={{ fontSize: 14, color: "var(--hv-fg-3)", marginTop: 12 }}>{oppdrag.guests}</div>
        )}
      </Wrap>
    </Section>

    <Wrap>
      <div style={{ aspectRatio: "16/7", borderRadius: "var(--hv-r-lg)", overflow: "hidden", marginBottom: 64 }}>
        <img src={oppdrag.img} alt={oppdrag.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
    </Wrap>

    {oppdrag.intro && (
      <Section tight>
        <Wrap>
          <p className="nw-lead" style={{ maxWidth: "64ch" }}>{oppdrag.intro}</p>
        </Wrap>
      </Section>
    )}

    <Section tight>
      <Wrap>
        <div className="nw-grid-2" style={{ gap: 48, alignItems: "start" }}>
          {[oppdrag.forrett, oppdrag.hovedrett].filter(Boolean).map((kurs, i) => (
            <div key={i}>
              <Eyebrow plain>{kurs.label}</Eyebrow>
              {kurs.retter.map((r, j) => (
                <div key={j} style={{ marginTop: 20 }}>
                  <h3 className="nw-h3">{r.navn}</h3>
                  <p className="nw-lead" style={{ marginTop: 12, fontSize: 16 }}>{r.desc}</p>
                </div>
              ))}
            </div>
          ))}
        </div>
      </Wrap>
    </Section>

    {oppdrag.tilbakemelding && (
      <Section style={{ background: "var(--hv-ink-2)" }}>
        <Wrap>
          <div className="nw-quote">
            <WaveGlyph width={60} height={20} animated={true} />
            <div className="nw-quote-text" style={{ marginTop: 20 }}>
              "{oppdrag.tilbakemelding.tekst}"
            </div>
            <div className="nw-quote-attr">{oppdrag.tilbakemelding.fra}</div>
          </div>
        </Wrap>
      </Section>
    )}

    <Section />
  </>
);

const Catering = () => {
  const [valgt, setValgt] = React.useState(null);

  if (valgt) {
    return <CateringOppdrag oppdrag={valgt} onBack={() => setValgt(null)} />;
  }

  return (
    <>
      <Section tight>
        <Wrap style={{ paddingTop: 40 }}>
          <Eyebrow>Catering</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(48px, 7vw, 104px)" }}>
            Oppdrag vi <em>har hatt.</em>
          </h1>
          <p className="nw-lead" style={{ marginTop: 20, maxWidth: "52ch" }}>
            Fra private middagsselskap til større arrangementer — vi tar med oss det samme prinsippet: bare ferske råvarer, enkelt utført.
          </p>
        </Wrap>
      </Section>
      <Section tight>
        <Wrap>
          <div className="nw-grid-3">
            {CATERING.map(oppdrag => (
              <a key={oppdrag.slug} className="nw-recipe-card" style={{ cursor: "pointer" }} onClick={() => setValgt(oppdrag)}>
                <div className="nw-recipe-card-media">
                  <img src={oppdrag.img} alt={oppdrag.title} />
                </div>
                <div className="nw-recipe-card-body">
                  <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--hv-teal)", fontWeight: 600 }}>
                    {oppdrag.guests || "Catering"}
                  </div>
                  <h4>{oppdrag.title}</h4>
                  <p style={{ fontSize: 14, color: "var(--hv-fg-3)", lineHeight: 1.55 }}>{oppdrag.summary}</p>
                  <div className="meta">
                    <span style={{ color: "var(--hv-teal)", fontSize: 13 }}>Les mer <ArrowRight size={12} style={{ verticalAlign: "-1px" }} /></span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </Wrap>
      </Section>
    </>
  );
};

const Levering = () => (
  <>
    <Section tight>
      <Wrap style={{ paddingTop: 40 }}>
        <Eyebrow>Levering</Eyebrow>
        <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(48px, 7vw, 104px)" }}>
          Vi kjører <em>til deg.</em>
        </h1>
      </Wrap>
    </Section>

    <Wrap>
      <div className="nw-grid-2" style={{ alignItems: "start", gap: 48 }}>
        <div>
          <div style={{ borderRadius: "var(--hv-r-lg)", overflow: "hidden", position: "relative" }}>
            <img
              src="assets/leveringskart.webp"
              alt="Leveringskart Bergen og Omegn"
              style={{ width: "100%", height: "auto", display: "block" }}
            />
            <div style={{
              position: "absolute", top: 16, left: 16,
              padding: "7px 14px", background: "rgba(8,10,9,0.75)",
              borderRadius: 999, fontSize: 12, fontWeight: 600,
              display: "flex", alignItems: "center", gap: 8, color: "#fff",
            }}>
              <MapPin size={13} style={{ color: "var(--hv-teal)" }} /> Bergen og Omegn · 8 soner
            </div>
          </div>
        </div>
        <div>
          <Eyebrow>Når</Eyebrow>
          <h2 className="nw-h2" style={{ marginTop: 14 }}>Vi leverer<br/><em>alle hverdager.</em></h2>
          <p className="nw-lead" style={{ marginTop: 20 }}>
            Du må bestille senest kl. 16:00 dagen før du ønsker levering. Du får varsling ca. 30 minutter før vi er hos deg.
          </p>
          <ul style={{ listStyle: "none", padding: 0, marginTop: 32, display: "grid", gap: 16 }}>
            {[
              { t: "Bestillingsfrist", d: "Bestill senest kl. 16:00 dagen før ønsket levering" },
              { t: "Leveringstid", d: "Vi leverer alle hverdager mellom kl. 13–18" },
              { t: "Leveringspris", d: ["Under 700 kr → 199 kr", "700–1100 kr → 59 kr", "Over 1100 kr → gratis", "Abonnement → alltid gratis"] },
              { t: "Varsling", d: "Du får varsel ca. 30 minutter før vi er hos deg" },
            ].map((it, i) => (
              <li key={i} style={{ paddingBottom: 16, borderBottom: "1px solid var(--hv-line)", display: "flex", gap: 16 }}>
                <span className="nw-num">{i + 1}</span>
                <div>
                  <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 600, fontSize: 18 }}>{it.t}</div>
                  <div style={{ fontSize: 14, color: "var(--hv-fg-3)", marginTop: 4 }}>
                    {Array.isArray(it.d) ? it.d.map((line, i) => <div key={i}>{line}</div>) : it.d}
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Wrap>

    <Section tight>
      <Wrap>
        <PostnummerSøk />
      </Wrap>
    </Section>

    <Section>
      <Wrap>
        <div className="nw-cb" style={{ textAlign: "center" }}>
          <WaveGlyph width={80} height={28} animated={true}/>
          <h2 className="nw-h2" style={{ marginTop: 20 }}>Bor du <em>et annet sted?</em></h2>
          <p className="nw-lead" style={{ margin: "16px auto 28px" }}>
            Gi oss en lyd at du er interessert i å få Havøyet til ditt området! Hvis interessen er stor nok, så gjør vi det vi kan for å komme til ditt området!
          </p>
          <Btn variant="ghost">Spør om din adresse</Btn>
        </div>
      </Wrap>
    </Section>
  </>
);

const Kontakt = () => {
  const [openQ, setOpenQ] = React.useState(0);
  const [form, setForm] = React.useState({ navn: "", epost: "", melding: "" });
  const [status, setStatus] = React.useState(null);  // null | "sending" | "ok" | "err"
  const [errMsg, setErrMsg] = React.useState("");
  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const send = async (e) => {
    e?.preventDefault();
    if (!form.navn.trim() || !form.epost.trim() || !form.melding.trim()) {
      setStatus("err"); setErrMsg("Vennligst fyll ut alle feltene.");
      return;
    }
    setStatus("sending"); setErrMsg("");
    try {
      const base = window.HV_API_BASE || "";
      const r = await fetch(`${base}/api/contact`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || !data.ok) throw new Error(data.error || "Ukjent feil");
      setStatus("ok");
      setForm({ navn: "", epost: "", melding: "" });
    } catch (ex) {
      setStatus("err"); setErrMsg(ex.message);
    }
  };
  return (
    <>
      <Section tight>
        <Wrap style={{ paddingTop: 40 }}>
          <Eyebrow>Kontakt & FAQ</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(48px, 7vw, 104px)" }}>
            Snakk med <em>oss.</em>
          </h1>
        </Wrap>
      </Section>
      <Wrap>
        <div className="nw-grid-2" style={{ gap: 64, alignItems: "start" }}>
          <div>
            <h2 id="faq-section" className="nw-h3" style={{ marginBottom: 16, scrollMarginTop: 96 }}>Spørsmål vi får ofte</h2>
            <div>
              {FAQS.map((f, i) => (
                <div key={i} className={"nw-faq-item" + (openQ === i ? " open" : "")}>
                  <button className="nw-faq-q" onClick={() => setOpenQ(openQ === i ? -1 : i)}>
                    {f.q}
                    <span className="chev"><Plus size={20}/></span>
                  </button>
                  <div className="nw-faq-a">{f.a}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)", borderRadius: "var(--hv-r-lg)", padding: 32 }}>
            <Eyebrow>Skriv til oss</Eyebrow>
            <h3 className="nw-h3" style={{ marginTop: 12, marginBottom: 20 }}>Vi svarer innen <em>én dag.</em></h3>
            <form onSubmit={send}>
              <div className="nw-form-group">
                <label>Navn</label>
                <input className="nw-input" placeholder="Ditt navn" value={form.navn} onChange={update("navn")}/>
              </div>
              <div className="nw-form-group">
                <label>E-post</label>
                <input className="nw-input" type="email" placeholder="din@epost.no" value={form.epost} onChange={update("epost")}/>
              </div>
              <div className="nw-form-group">
                <label>Melding</label>
                <textarea className="nw-textarea" placeholder="Hva kan vi hjelpe med?" value={form.melding} onChange={update("melding")}/>
              </div>
              {status === "ok" && (
                <div style={{ padding: "12px 14px", borderRadius: 8, background: "rgba(65,193,186,0.12)", border: "1px solid rgba(65,193,186,0.3)", color: "var(--hv-teal)", fontSize: 14, marginBottom: 14 }}>
                  ✓ Takk! Meldingen er sendt — Erik svarer innen én dag.
                </div>
              )}
              {status === "err" && (
                <div style={{ padding: "12px 14px", borderRadius: 8, background: "rgba(239,68,68,0.1)", border: "1px solid rgba(239,68,68,0.3)", color: "#ef4444", fontSize: 14, marginBottom: 14 }}>
                  Kunne ikke sende: {errMsg}
                </div>
              )}
              <Btn style={{ width: "100%", opacity: status === "sending" ? 0.6 : 1, pointerEvents: status === "sending" ? "none" : "auto" }} onClick={send}>
                {status === "sending" ? "Sender…" : <>Send melding <ArrowRight size={14}/></>}
              </Btn>
            </form>

            <hr className="nw-hr" style={{ margin: "28px 0" }}/>
            <div style={{ display: "grid", gap: 14, fontSize: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}><Phone size={16} style={{ color: "var(--hv-teal)" }}/> 416 39 788</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}><Mail size={16} style={{ color: "var(--hv-teal)" }}/> <a href="mailto:erik@havoyet.no" style={{ color: "inherit", textDecoration: "none" }}>erik@havoyet.no</a></div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}><MapPin size={16} style={{ color: "var(--hv-teal)" }}/> Nesttunvegen 96, 5221 Nesttun</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}><Clock size={16} style={{ color: "var(--hv-teal)" }}/> Butikk: ti–fre 10–17 · lø 10–15</div>
            </div>
          </div>
        </div>
      </Wrap>
      <Section/>
    </>
  );
};

// ─── Kasse-side (checkout) ─────────────────────────────────────
const Checkout = ({ cart, setCart, goShop, goHome }) => {
  const [step, setStep] = React.useState("form");  // form → confirmation
  const [order, setOrder] = React.useState(null);
  // Pre-utfyll fra lagret info (e-post fra Min konto + forrige checkout-data)
  const [form, setForm] = React.useState(() => {
    const defaults = {
      navn: "", epost: "", tlf: "",
      adresse: "", postnr: "", sted: "Bergen",
      leveringsdag: "", leveringstid: "13–15",
      kommentar: "", betaling: "vipps",
    };
    try {
      const saved = localStorage.getItem("nw_checkout_info");
      if (saved) Object.assign(defaults, JSON.parse(saved));
    } catch (e) {}
    const loggedInEmail = localStorage.getItem("nw_customer_email");
    if (loggedInEmail) defaults.epost = loggedInEmail;
    return defaults;
  });
  const [submitting, setSubmitting] = React.useState(false);
  const loggedIn = !!localStorage.getItem("nw_customer_email");
  // Stripe Elements (inline kortform i kassen)
  const stripeRef       = React.useRef(null);   // stripe-instans
  const cardElementRef  = React.useRef(null);   // card-element
  const cardMountRef    = React.useRef(null);   // div å mounte i
  const [cardReady,  setCardReady]  = React.useState(false);
  const [cardError,  setCardError]  = React.useState("");
  const [cardComplete, setCardComplete] = React.useState(false);

  // Hent siste ordre fra Flask for å pre-utfylle adresse/tlf når kunden er innlogget
  React.useEffect(() => {
    const email = localStorage.getItem("nw_customer_email");
    if (!email) return;
    const base = window.HV_API_BASE || "";
    fetch(`${base}/api/customer/account?email=${encodeURIComponent(email)}`, { cache: "no-store" })
      .then(r => r.json())
      .then(data => {
        const lastOrder = (data.orders || [])[0];
        const k = lastOrder?.kunde;
        if (!k) return;
        setForm(prev => ({
          ...prev,
          // Fyll inn kun tomme felt — overskriver ikke brukerens egne redigeringer
          navn:    prev.navn    || k.navn    || "",
          tlf:     prev.tlf     || k.tlf     || "",
          adresse: prev.adresse || k.adresse || "",
          postnr:  prev.postnr  || k.postnr  || "",
          sted:    prev.sted    || k.sted    || "Bergen",
        }));
      })
      .catch(() => {});
  }, []);

  const total = cart.reduce((s, x) => s + x.price * x.qty, 0);
  const fee = cart.length === 0 ? 0 : total >= 1100 ? 0 : total >= 700 ? 59 : 199;
  const sum = total + fee;

  // Foreslå neste fem hverdager
  const dayOptions = React.useMemo(() => {
    const now = new Date();
    const days = [];
    const nb = ["søn","man","tir","ons","tor","fre","lør"];
    const mth = ["jan","feb","mar","apr","mai","jun","jul","aug","sep","okt","nov","des"];
    for (let i = 1; days.length < 5 && i < 14; i++) {
      const d = new Date(now); d.setDate(now.getDate() + i);
      if (d.getDay() === 0) continue;  // hopp over søndag
      const key = d.toISOString().slice(0,10);
      const label = `${nb[d.getDay()]}. ${d.getDate()}. ${mth[d.getMonth()]}`;
      days.push({ key, label });
    }
    return days;
  }, []);
  React.useEffect(() => {
    if (!form.leveringsdag && dayOptions.length) setForm(f => ({ ...f, leveringsdag: dayOptions[0].key }));
  }, [dayOptions]);

  // Lagre kasse-skjema fortløpende så det overlever refresh
  React.useEffect(() => {
    try { localStorage.setItem("nw_checkout_info", JSON.stringify(form)); } catch (e) {}
  }, [form]);

  // Stripe Elements: last bibliotek + hent publishable key, så mount card-element
  // når kunden velger Kort som betalingsmetode
  React.useEffect(() => {
    if (form.betaling !== "kort") {
      // Avmontert: rydd opp så vi mounter rent neste gang
      if (cardElementRef.current) {
        try { cardElementRef.current.unmount(); } catch (e) {}
        cardElementRef.current = null;
      }
      setCardReady(false);
      setCardComplete(false);
      setCardError("");
      return;
    }
    let cancelled = false;
    const ensureStripeJs = () => new Promise((resolve, reject) => {
      if (window.Stripe) return resolve();
      const existing = document.querySelector('script[data-hv-stripe]');
      if (existing) {
        existing.addEventListener("load",  () => resolve());
        existing.addEventListener("error", () => reject(new Error("kunne ikke laste Stripe.js")));
        return;
      }
      const s = document.createElement("script");
      s.src = "https://js.stripe.com/v3/";
      s.async = true;
      s.setAttribute("data-hv-stripe", "1");
      s.onload  = () => resolve();
      s.onerror = () => reject(new Error("kunne ikke laste Stripe.js"));
      document.head.appendChild(s);
    });
    (async () => {
      try {
        // Hent publishable key fra backend
        const base = window.HV_API_BASE || "";
        const cfg = await fetch(`${base}/api/stripe/config`).then(r => r.json());
        if (cancelled) return;
        if (!cfg.ok || !cfg.publishableKey) {
          setCardError("Kortbetaling er ikke konfigurert ennå — velg Vipps eller kontakt erik@havoyet.no.");
          return;
        }
        await ensureStripeJs();
        if (cancelled) return;
        const stripe = window.Stripe(cfg.publishableKey, { locale: "nb" });
        stripeRef.current = stripe;
        const elements = stripe.elements();
        const card = elements.create("card", {
          hidePostalCode: true,
          style: {
            base: {
              fontSize: "15px",
              color: "#F1EEE6",
              fontFamily: "'Maven Pro', system-ui, sans-serif",
              "::placeholder": { color: "rgba(241,238,230,0.45)" },
              iconColor: "#41C1BA",
            },
            invalid: { color: "#f87171", iconColor: "#f87171" },
          },
        });
        if (cancelled || !cardMountRef.current) return;
        card.mount(cardMountRef.current);
        cardElementRef.current = card;
        card.on("ready", () => { if (!cancelled) setCardReady(true); });
        card.on("change", (e) => {
          if (cancelled) return;
          setCardError(e.error ? e.error.message : "");
          setCardComplete(!!e.complete);
        });
      } catch (e) {
        if (!cancelled) setCardError("Kortform kunne ikke lastes: " + (e && e.message ? e.message : e));
      }
    })();
    return () => {
      cancelled = true;
      if (cardElementRef.current) {
        try { cardElementRef.current.unmount(); } catch (e) {}
        cardElementRef.current = null;
      }
    };
  }, [form.betaling]);

  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const canSubmit = form.navn.trim() && form.epost.trim() && form.tlf.trim()
    && form.adresse.trim() && form.postnr.trim() && cart.length > 0;

  const submit = async () => {
    if (!canSubmit) return;
    setSubmitting(true);
    const ordrenr = "H" + Math.random().toString(36).slice(2, 8).toUpperCase();
    const confirmed = {
      ordrenr,
      dato: new Date().toISOString().slice(0,10),
      status: "NEW",
      kunde: { ...form },
      varer: cart.map(x => ({ ...x })),
      total, fee, sum,
    };
    const base = window.HV_API_BASE || "";
    // Lagre kundeinfo lokalt for auto-utfylling neste gang
    try {
      localStorage.setItem("nw_checkout_info", JSON.stringify(form));
    } catch (e) {}

    // Betaling: Vipps og Kort er separate løsninger.
    //   - "vipps" → Vipps Checkout (Vipps wallet)
    //   - "kort"  → Stripe Checkout (Visa, Mastercard, Amex)
    // VIKTIG: Ordren lagres IKKE i Flask før betalingen er bekreftet (i return-handlerne under).
    // Dette hindrer at kunder får bekreftelse uten å ha betalt.
    if (form.betaling === "kort") {
      const stripe = stripeRef.current;
      const card   = cardElementRef.current;
      if (!stripe || !card) {
        alert("Kortform er ikke klar ennå. Vent et øyeblikk og prøv igjen.");
        setSubmitting(false); return;
      }
      if (!cardComplete) {
        setCardError("Fyll ut kortinformasjonen først.");
        setSubmitting(false); return;
      }
      try {
        // 1) Be backend om en PaymentIntent og hent client_secret
        const r = await fetch(`${base}/api/checkout/card-payment-intent`, {
          method:  "POST",
          headers: { "Content-Type": "application/json" },
          body:    JSON.stringify({
            ordrenr: confirmed.ordrenr,
            amount:  Math.round(sum * 100),
            customer: {
              email:       form.epost,
              phoneNumber: form.tlf.replace(/\s+/g, ""),
              name:        form.navn,
            },
          }),
        });
        const v = await r.json();
        if (!r.ok || !v.clientSecret) {
          alert("Kunne ikke starte kortbetaling: " + (v.error || "ukjent feil"));
          setSubmitting(false); return;
        }
        // 2) Bekreft betaling med kortet brukeren skrev inn
        const result = await stripe.confirmCardPayment(v.clientSecret, {
          payment_method: {
            card: card,
            billing_details: {
              name:  form.navn,
              email: form.epost,
              phone: form.tlf.replace(/\s+/g, ""),
            },
          },
        });
        if (result.error) {
          setCardError(result.error.message || "Kortet ble avvist.");
          setSubmitting(false); return;
        }
        if (result.paymentIntent && result.paymentIntent.status === "succeeded") {
          confirmed.status = "PAID";
          await persistOrderAndConfirm(confirmed);
          return;
        }
        alert("Betalingen ble ikke fullført. Status: " + (result.paymentIntent && result.paymentIntent.status));
      } catch (e) {
        alert("Kortbetalingen feilet: " + (e.message || e));
      }
      setSubmitting(false);
      return;
    }
    if (form.betaling === "vipps") {
      const returnUrl = `${window.location.origin}${window.location.pathname}?vippsOrdre=${confirmed.ordrenr}`;
      try {
        // Bruker Vipps ePayment direkte (enkleste og mest stabile API for ren Vipps-betaling).
        const r = await fetch(`${base}/api/vipps/init`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            ordrenr: confirmed.ordrenr,
            amount: Math.round(sum * 100),
            returnUrl,
            phoneNumber: form.tlf,
          }),
        });
        const v = await r.json();
        if (r.ok && v.redirectUrl) {
          try { sessionStorage.setItem("nw_pending_vipps", JSON.stringify({ confirmed, reference: v.reference })); } catch (e) {}
          window.location.href = v.redirectUrl;
          return;
        }
        alert("Kunne ikke starte Vipps: " + (v.error || "ukjent feil"));
      } catch (e) {
        alert("Vipps er ikke tilgjengelig akkurat nå.");
      }
      setSubmitting(false);
      return;
    }
    // Ukjent betalingsmetode — ikke gå til bekreftelse uten betaling
    alert("Velg en betalingsmetode for å fullføre bestillingen.");
    setSubmitting(false);
  };

  // Lagrer ordren i Flask + viser bekreftelse. Kalles fra return-handlere etter
  // at betalingen er bekreftet — IKKE fra submit() før betaling er startet.
  const persistOrderAndConfirm = React.useCallback(async (orderObj) => {
    const base = window.HV_API_BASE || "";
    try {
      const r = await fetch(`${base}/api/orders/new`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(orderObj),
      });
      const data = await r.json().catch(() => ({}));
      if (data.ordrenr) orderObj.ordrenr = data.ordrenr;
    } catch (e) { /* offline — vi viser fortsatt bekreftelse til kunden */ }
    setOrder(orderObj);
    setCart([]);
    setStep("confirmation");
    setSubmitting(false);
  }, [setCart]);

  // Etter Stripe-redirect: sjekk kortbetaling-status
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const cardSession = params.get("card_session_id");
    const cardCancelled = params.get("card_cancelled");
    if (cardCancelled) {
      try { sessionStorage.removeItem("nw_pending_card"); } catch (e) {}
      window.history.replaceState({}, "", window.location.pathname);
      alert("Kortbetalingen ble avbrutt. Du kan prøve igjen eller velge en annen betalingsmåte.");
      return;
    }
    if (!cardSession) return;
    let pending = null;
    try { pending = JSON.parse(sessionStorage.getItem("nw_pending_card") || "null"); } catch (e) {}
    const base = window.HV_API_BASE || "";
    fetch(`${base}/api/checkout/card-status/${encodeURIComponent(cardSession)}`)
      .then(r => r.json())
      .then(s => {
        if (!pending) return;
        const paid = s.paid || (s.state || "").toUpperCase() === "PAID";
        if (!paid) {
          // Betalingen ble ikke fullført — ikke lagre ordre, ikke vis bekreftelse
          sessionStorage.removeItem("nw_pending_card");
          window.history.replaceState({}, "", window.location.pathname);
          alert("Kortbetalingen ble ikke gjennomført. Du kan prøve igjen eller velge en annen betalingsmåte.");
          return;
        }
        pending.confirmed.status = "PAID";
        sessionStorage.removeItem("nw_pending_card");
        window.history.replaceState({}, "", window.location.pathname);
        persistOrderAndConfirm(pending.confirmed);
      })
      .catch(() => {
        sessionStorage.removeItem("nw_pending_card");
        window.history.replaceState({}, "", window.location.pathname);
        alert("Kunne ikke verifisere kortbetalingen. Sjekk bankutskriften din eller kontakt oss på erik@havoyet.no.");
      });
  }, [persistOrderAndConfirm]);

  // Etter Vipps-redirect: sjekk status og vis bekreftelse hvis betalt
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const vippsOrdre = params.get("vippsOrdre");
    if (!vippsOrdre) return;
    let pending = null;
    try { pending = JSON.parse(sessionStorage.getItem("nw_pending_vipps") || "null"); } catch (e) {}
    if (!pending || !pending.reference) return;
    const base = window.HV_API_BASE || "";
    const statusUrl = pending.kind === "checkout"
      ? `${base}/api/checkout/status/${pending.reference}`
      : `${base}/api/vipps/status/${pending.reference}`;
    const cleanup = () => {
      sessionStorage.removeItem("nw_pending_vipps");
      window.history.replaceState({}, "", window.location.pathname);
    };
    fetch(statusUrl)
      .then(r => r.json())
      .then(s => {
        const state = (s.state || "").toUpperCase().replace(/[ _]/g, "");
        // ePayment: AUTHORIZED/CAPTURED. Checkout: PaymentSuccessful / SessionTerminated etc.
        const paidStates = ["AUTHORIZED", "CAPTURED", "AUTHORIZEDANDCAPTURED", "PAYMENTSUCCESSFUL"];
        const failedStates = ["ABORTED", "EXPIRED", "TERMINATED", "SESSIONEXPIRED", "PAYMENTTERMINATED"];
        if (paidStates.includes(state)) {
          pending.confirmed.status = "PAID";
          cleanup();
          persistOrderAndConfirm(pending.confirmed);
        } else if (failedStates.includes(state)) {
          cleanup();
          alert("Betalingen ble ikke fullført (" + state + "). Prøv igjen eller velg en annen betalingsmåte.");
        } else {
          // Ukjent/ventende status — ikke lagre ordre, be kunden prøve igjen
          cleanup();
          alert("Kunne ikke verifisere betalingsstatus. Sjekk Vipps-appen din eller kontakt oss på erik@havoyet.no.");
        }
      })
      .catch(() => {
        cleanup();
        alert("Kunne ikke verifisere betalingsstatus. Sjekk Vipps-appen din eller kontakt oss på erik@havoyet.no.");
      });
  }, [persistOrderAndConfirm]);

  if (step === "confirmation" && order) {
    return (
      <Section tight>
        <Wrap style={{ maxWidth: 720, margin: "0 auto", textAlign: "center", paddingTop: 60 }}>
          <div style={{ width: 80, height: 80, borderRadius: "50%", background: "var(--hv-teal-wash)", color: "var(--hv-teal)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 36, margin: "0 auto 24px", border: "2px solid var(--hv-teal)" }}>✓</div>
          <Eyebrow>Ordrebekreftelse</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(40px, 6vw, 72px)" }}>Takk, {order.kunde.navn.split(" ")[0]}!</h1>
          <p className="nw-lead" style={{ marginTop: 20 }}>Ordren din er mottatt. Vi sender bekreftelse til <strong>{order.kunde.epost}</strong> om et øyeblikk.</p>
          <div style={{ background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)", borderRadius: 14, padding: 28, marginTop: 40, textAlign: "left" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 20 }}>
              <span style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--hv-fg-3)" }}>Ordrenummer</span>
              <span style={{ fontFamily: "monospace", fontSize: 18, fontWeight: 700, color: "var(--hv-teal)" }}>{order.ordrenr}</span>
            </div>
            <div style={{ display: "grid", gap: 8, fontSize: 14 }}>
              {order.varer.map((v, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                  <span>{v.name} × {v.qty}</span>
                  <span style={{ fontVariantNumeric: "tabular-nums" }}>{v.price * v.qty} kr</span>
                </div>
              ))}
            </div>
            <hr className="nw-hr" style={{ margin: "16px 0" }}/>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, color: "var(--hv-fg-3)" }}>
              <span>Levering</span><span>{order.fee === 0 ? "Gratis" : `${order.fee} kr`}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 18, fontWeight: 700, marginTop: 10, fontFamily: "var(--hv-font-display)" }}>
              <span>Totalt</span><span>{order.sum} kr</span>
            </div>
            <hr className="nw-hr" style={{ margin: "16px 0" }}/>
            <div style={{ fontSize: 13, color: "var(--hv-fg-3)", lineHeight: 1.7 }}>
              <div><strong style={{ color: "var(--hv-fg-2)" }}>Leveringsadresse:</strong> {order.kunde.adresse}, {order.kunde.postnr} {order.kunde.sted}</div>
              <div><strong style={{ color: "var(--hv-fg-2)" }}>Leveringsdag:</strong> {dayOptions.find(d => d.key === order.kunde.leveringsdag)?.label || order.kunde.leveringsdag} kl. {order.kunde.leveringstid}</div>
              <div><strong style={{ color: "var(--hv-fg-2)" }}>Betaling:</strong> {order.kunde.betaling === "vipps" ? "Vipps" : order.kunde.betaling === "kort" ? "Kort" : order.kunde.betaling}</div>
            </div>
          </div>
          <div style={{ marginTop: 32 }}>
            <Btn variant="ghost" onClick={goHome}>Tilbake til forsiden <ArrowRight size={14}/></Btn>
          </div>
        </Wrap>
      </Section>
    );
  }

  if (cart.length === 0) {
    return (
      <Section tight>
        <Wrap style={{ maxWidth: 600, margin: "0 auto", textAlign: "center", paddingTop: 60 }}>
          <Eyebrow>Kasse</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(40px, 6vw, 72px)" }}>Handlekurven er tom</h1>
          <p className="nw-lead" style={{ marginTop: 20, marginBottom: 32 }}>Legg inn noen varer før du går til kassen.</p>
          <Btn size="lg" onClick={goShop}>Til butikken <ArrowRight size={14}/></Btn>
        </Wrap>
      </Section>
    );
  }

  const input = { width: "100%", padding: "12px 14px", borderRadius: 10, border: "1px solid var(--hv-line)", background: "rgba(255,255,255,0.03)", color: "var(--hv-fg-1)", fontSize: 15, fontFamily: "var(--hv-font-body)", outline: "none" };
  const label = { display: "block", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--hv-fg-2)", marginBottom: 6 };

  return (
    <Section tight>
      <Wrap>
        <div style={{ paddingTop: 40, marginBottom: 24 }}>
          <Eyebrow>Kasse</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(40px, 6vw, 72px)" }}>Fullfør <em>bestillingen</em></h1>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 40, alignItems: "start" }}>
          {/* Skjema */}
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div>
              <h2 className="nw-h3" style={{ marginBottom: 14 }}>Kontaktinformasjon</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div style={{ gridColumn: "span 2" }}><label style={label}>Fullt navn</label><input style={input} value={form.navn} onChange={update("navn")} placeholder="Kari Normann"/></div>
                <div><label style={label}>E-post</label><input style={input} type="email" value={form.epost} onChange={update("epost")} placeholder="kari@epost.no"/></div>
                <div><label style={label}>Telefon</label><input style={input} type="tel" value={form.tlf} onChange={update("tlf")} placeholder="40 12 34 56"/></div>
              </div>
            </div>
            <div>
              <h2 className="nw-h3" style={{ marginBottom: 14 }}>Leveringsadresse</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div style={{ gridColumn: "span 2" }}><label style={label}>Adresse</label><input style={input} value={form.adresse} onChange={update("adresse")} placeholder="Nesttunvegen 96"/></div>
                <div><label style={label}>Postnr</label><input style={input} value={form.postnr} onChange={update("postnr")} placeholder="5221"/></div>
                <div><label style={label}>Sted</label><input style={input} value={form.sted} onChange={update("sted")}/></div>
              </div>
            </div>
            <div>
              <h2 className="nw-h3" style={{ marginBottom: 14 }}>Leveringsdag</h2>
              <DeliveryCalendar selected={form.leveringsdag} onSelect={(k) => setForm(f => ({ ...f, leveringsdag: k }))} />
              <div style={{ marginTop: 16 }}>
                <label style={label}>Leveringstid</label>
                <div style={{ display: "flex", gap: 8 }}>
                  {["13–15", "15–18"].map(t => (
                    <button key={t} type="button" onClick={() => setForm(f => ({ ...f, leveringstid: t }))}
                      className={"nw-kalk-chip" + (form.leveringstid === t ? " active" : "")}
                      style={{ fontSize: 13, cursor: "pointer" }}>
                      {t}
                    </button>
                  ))}
                </div>
              </div>
            </div>
            <div>
              <h2 className="nw-h3" style={{ marginBottom: 14 }}>Kommentar <span style={{ color: "var(--hv-fg-3)", fontWeight: 400, fontSize: 14 }}>(valgfritt)</span></h2>
              <textarea style={{ ...input, minHeight: 80, resize: "vertical" }} value={form.kommentar} onChange={update("kommentar")} placeholder="Hvor skal vi sette kassen om du ikke er hjemme?"/>
            </div>
            <div>
              <h2 className="nw-h3" style={{ marginBottom: 14 }}>Betaling</h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                  { id: "vipps",  label: "Vipps",  desc: "Betal med Vipps via mobil" },
                  { id: "kort",   label: "Kort",   desc: "Visa, Mastercard, Amex" },
                ].map(opt => {
                  const selected = form.betaling === opt.id;
                  return (
                    <React.Fragment key={opt.id}>
                      <div onClick={() => setForm(f => ({ ...f, betaling: opt.id }))}
                        style={{ borderRadius: 10, border: `1px solid ${selected ? "rgba(65,193,186,0.5)" : "var(--hv-line)"}`, background: selected ? "var(--hv-teal-wash)" : "transparent", padding: 14, cursor: "pointer", display: "flex", gap: 12, alignItems: "center" }}>
                        <div style={{ width: 20, height: 20, borderRadius: "50%", flexShrink: 0, border: `2px solid ${selected ? "var(--hv-teal)" : "var(--hv-line)"}`, background: selected ? "var(--hv-teal)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
                          {selected && <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#080A09" }}/>}
                        </div>
                        <div>
                          <div style={{ fontWeight: 600, fontSize: 15 }}>{opt.label}</div>
                          <div style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 2 }}>{opt.desc}</div>
                        </div>
                      </div>
                      {selected && opt.id === "vipps" && (
                        <div style={{ marginTop: -2, padding: "12px 14px", borderRadius: 10, border: "1px solid var(--hv-line)", background: "rgba(255,255,255,0.02)", fontSize: 13, color: "var(--hv-fg-2)", lineHeight: 1.55 }}>
                          <strong style={{ color: "var(--hv-teal)" }}>Valgt: Vipps</strong> · Når du trykker «Fullfør bestilling» åpner Vipps-appen for å bekrefte betalingen på telefonen din.
                        </div>
                      )}
                      {selected && opt.id === "kort" && (
                        <div style={{ marginTop: -2, padding: "14px 16px", borderRadius: 10, border: "1px solid rgba(65,193,186,0.35)", background: "rgba(65,193,186,0.04)" }}>
                          <div style={{ fontSize: 11, color: "var(--hv-teal)", textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600, marginBottom: 10 }}>Valgt: Kortbetaling</div>
                          <label style={{ display: "block", fontSize: 12, color: "var(--hv-fg-3)", marginBottom: 6 }}>Kortnummer · utløp · CVC</label>
                          <div ref={cardMountRef}
                               style={{ padding: "14px 14px", borderRadius: 8, border: "1px solid var(--hv-line)", background: "rgba(0,0,0,0.25)", minHeight: 24 }}>
                            {!cardReady && (
                              <div style={{ color: "var(--hv-fg-3)", fontSize: 13 }}>Laster sikker kortform…</div>
                            )}
                          </div>
                          {cardError && (
                            <div style={{ marginTop: 8, color: "#f87171", fontSize: 12.5 }}>{cardError}</div>
                          )}
                          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12, paddingTop: 10, borderTop: "1px dashed var(--hv-line)", fontSize: 11.5, color: "var(--hv-fg-3)" }}>
                            <span aria-hidden style={{ fontSize: 13 }}>🔒</span>
                            <span>Sikker betaling via Stripe. Visa, Mastercard og Amex. Kortdata lagres aldri på vår server.</span>
                          </div>
                        </div>
                      )}
                    </React.Fragment>
                  );
                })}
              </div>
            </div>
          </div>
          {/* Sammendrag */}
          <aside style={{ position: "sticky", top: 100, background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)", borderRadius: 14, padding: 24 }}>
            <Eyebrow>Din bestilling</Eyebrow>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 20 }}>
              {cart.map(item => (
                <div key={item.slug} style={{ display: "flex", gap: 12, paddingBottom: 14, borderBottom: "1px solid var(--hv-line)" }}>
                  <div style={{ width: 54, height: 54, borderRadius: 8, overflow: "hidden", flexShrink: 0, background: "var(--hv-ink)" }}>
                    <img src={item.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 600, fontSize: 14 }}>{item.name}</div>
                    <div style={{ fontSize: 12, color: "var(--hv-fg-3)", marginTop: 2 }}>{item.qty} × {item.price} kr</div>
                  </div>
                  <div style={{ fontFamily: "monospace", fontSize: 14, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>{item.price * item.qty} kr</div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--hv-fg-3)", marginTop: 16 }}>
              <span>Subtotal</span><span>{total} kr</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--hv-fg-3)", marginTop: 6 }}>
              <span>Levering</span><span>{fee === 0 ? "Gratis" : `${fee} kr`}</span>
            </div>
            <hr className="nw-hr" style={{ margin: "14px 0" }}/>
            <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, fontSize: 20, fontFamily: "var(--hv-font-display)" }}>
              <span>Totalt</span><span className="nw-kalk-total">{sum} kr</span>
            </div>
            <Btn size="lg" style={{ width: "100%", marginTop: 20, opacity: canSubmit && !submitting ? 1 : 0.6, pointerEvents: canSubmit && !submitting ? "auto" : "none" }} onClick={submit}>
              {submitting ? "Sender…" : canSubmit ? <>Bekreft bestilling <ArrowRight size={16}/></> : "Fyll ut skjemaet"}
            </Btn>
            <div style={{ fontSize: 11, color: "var(--hv-fg-3)", marginTop: 12, textAlign: "center" }}>
              Ved å bekrefte godtar du våre leverings- og vilkårsbetingelser.
            </div>
          </aside>
        </div>
      </Wrap>
    </Section>
  );
};

// ─── Kompakt leveringskalender: én måned, klikkbare hverdager ──
const DeliveryCalendar = ({ selected, onSelect }) => {
  const today = React.useMemo(() => { const d = new Date(); d.setHours(0,0,0,0); return d; }, []);
  const [viewMonth, setViewMonth] = React.useState(() => new Date(today.getFullYear(), today.getMonth(), 1));
  const maxDate = React.useMemo(() => { const d = new Date(today); d.setMonth(d.getMonth() + 2); return d; }, [today]);
  const MONTH_NAMES = ["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"];
  const DAY_NAMES = ["M","T","O","T","F","L","S"];

  const toKey = (d) => d ? d.toISOString().slice(0,10) : "";
  const year = viewMonth.getFullYear(), month = viewMonth.getMonth();
  const offset = (new Date(year, month, 1).getDay() + 6) % 7;  // ISO-uke: man=0
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < offset; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));

  const canGoPrev = viewMonth > new Date(today.getFullYear(), today.getMonth(), 1);
  const canGoNext = viewMonth < new Date(today.getFullYear(), today.getMonth() + 2, 1);

  return (
    <div style={{ border: "1px solid var(--hv-line)", borderRadius: 10, padding: 12, background: "rgba(255,255,255,0.015)", maxWidth: 300 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
        <button type="button" onClick={() => canGoPrev && setViewMonth(new Date(year, month - 1, 1))}
          disabled={!canGoPrev}
          style={{ width: 24, height: 24, borderRadius: 6, border: "1px solid var(--hv-line)", background: "transparent", color: "var(--hv-fg-2)", cursor: canGoPrev ? "pointer" : "not-allowed", opacity: canGoPrev ? 1 : 0.3, fontSize: 12, padding: 0 }}>‹</button>
        <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 13, textTransform: "capitalize" }}>
          {MONTH_NAMES[month]} {year}
        </div>
        <button type="button" onClick={() => canGoNext && setViewMonth(new Date(year, month + 1, 1))}
          disabled={!canGoNext}
          style={{ width: 24, height: 24, borderRadius: 6, border: "1px solid var(--hv-line)", background: "transparent", color: "var(--hv-fg-2)", cursor: canGoNext ? "pointer" : "not-allowed", opacity: canGoNext ? 1 : 0.3, fontSize: 12, padding: 0 }}>›</button>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: 4 }}>
        {DAY_NAMES.map((d, i) => (
          <div key={i} style={{ fontSize: 10, textAlign: "center", color: "var(--hv-fg-3)", fontWeight: 600, padding: "2px 0" }}>{d}</div>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }}>
        {cells.map((d, i) => {
          if (!d) return <div key={i} />;
          const k = toKey(d);
          const isPast = d < today;
          const isTooLate = d > maxDate;
          const isWeekend = d.getDay() === 0 || d.getDay() === 6;  // søndag + lørdag
          const isSelected = selected === k;
          const isToday = k === toKey(today);
          const disabled = isPast || isTooLate || isWeekend;
          return (
            <button
              key={k}
              type="button"
              disabled={disabled}
              onClick={() => !disabled && onSelect(k)}
              style={{
                aspectRatio: "1 / 1",
                border: isSelected ? "1.5px solid var(--hv-teal)" : isToday ? "1px dashed rgba(65,193,186,0.5)" : "1px solid transparent",
                borderRadius: 6,
                background: isSelected ? "var(--hv-teal)" : "transparent",
                color: isSelected ? "var(--hv-ink)" : disabled ? "var(--hv-fg-4)" : "var(--hv-fg-1)",
                fontSize: 11.5,
                fontFamily: "var(--hv-font-body)",
                fontWeight: isSelected ? 700 : isToday ? 600 : 400,
                cursor: disabled ? "not-allowed" : "pointer",
                opacity: disabled ? 0.25 : 1,
                transition: "all 140ms var(--hv-ease)",
                padding: 0,
                lineHeight: 1,
              }}
            >{d.getDate()}</button>
          );
        })}
      </div>
      {selected && (
        <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--hv-line)", fontSize: 11, color: "var(--hv-fg-3)" }}>
          Valgt: <span style={{ color: "var(--hv-teal)", fontWeight: 600 }}>
            {(() => {
              const d = new Date(selected);
              const dags = ["Søn","Man","Tir","Ons","Tor","Fre","Lør"];
              return `${dags[d.getDay()]} ${d.getDate()}. ${MONTH_NAMES[d.getMonth()]}`;
            })()}
          </span>
        </div>
      )}
    </div>
  );
};

// ─── Kunde-innlogging helpers (persistent localStorage vs. session-only) ─────
// "persist" → localStorage (overlever at nettleseren lukkes)
// "session" → sessionStorage (glemmes når nettleseren lukkes)
function getCustomerEmail() {
  return localStorage.getItem("nw_customer_email") || sessionStorage.getItem("nw_customer_email") || "";
}
function setCustomerEmail(email, persist) {
  const em = (email || "").trim().toLowerCase();
  if (!em) return clearCustomerEmail();
  if (persist) {
    localStorage.setItem("nw_customer_email", em);
    sessionStorage.removeItem("nw_customer_email");
  } else {
    sessionStorage.setItem("nw_customer_email", em);
    localStorage.removeItem("nw_customer_email");
  }
  localStorage.setItem("nw_login_prompted", "1");
}
function clearCustomerEmail() {
  localStorage.removeItem("nw_customer_email");
  sessionStorage.removeItem("nw_customer_email");
}
function hasBeenPrompted() { return !!localStorage.getItem("nw_login_prompted"); }
Object.assign(window, { getCustomerEmail, setCustomerEmail, clearCustomerEmail, hasBeenPrompted });

// ─── Min konto (kundeside) ─────────────────────────────────────
const STATUS_LABELS = {
  NEW: { label: "Mottatt", color: "var(--hv-teal)" },
  IN_PROGRESS: { label: "Pakkes", color: "#f59e0b" },
  DONE: { label: "Levert", color: "#22c55e" },
  CANCELLED: { label: "Avbrutt", color: "#ef4444" },
};

const MinKonto = ({ goShop, goHome, goPDP, addToCart }) => {
  const [email, setEmail] = React.useState(() => getCustomerEmail());
  const [password, setPassword] = React.useState("");
  const [authMode, setAuthMode] = React.useState("login"); // 'login' | 'register'
  const [checkedIn, setCheckedIn] = React.useState(() => !!getCustomerEmail() && !!localStorage.getItem("nw_customer_token"));
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [err, setErr] = React.useState(null);
  // Viser "Husk meg?"-prompt ved første pålogging (før brukeren har valgt)
  const [pendingEmail, setPendingEmail] = React.useState(null);

  const apiBase = () => window.HV_API_BASE || "";

  const fetchAccount = React.useCallback(async (em) => {
    if (!em) return;
    setLoading(true); setErr(null);
    try {
      const r = await fetch(`${apiBase()}/api/customer/account?email=${encodeURIComponent(em)}`, { cache: "no-store" });
      if (!r.ok) throw new Error("Kunne ikke hente kontoinfo");
      setData(await r.json());
    } catch (e) { setErr(e.message); }
    finally { setLoading(false); }
  }, []);

  React.useEffect(() => {
    if (checkedIn && email) fetchAccount(email);
  }, [checkedIn, email, fetchAccount]);

  // Auto-refresh hvert 30 sek for å plukke opp admin-status-oppdateringer
  React.useEffect(() => {
    if (!checkedIn || !email) return;
    const timer = setInterval(() => fetchAccount(email), 30000);
    return () => clearInterval(timer);
  }, [checkedIn, email, fetchAccount]);

  const signIn = async (e) => {
    e?.preventDefault();
    const em = (email || "").trim().toLowerCase();
    if (!em || !em.includes("@")) { setErr("Oppgi en gyldig e-post"); return; }
    if (!password || password.length < 8) { setErr("Passordet må være minst 8 tegn"); return; }
    setErr(null); setLoading(true);
    try {
      const path = authMode === "register" ? "/api/customer/auth/register" : "/api/auth/login";
      const r = await fetch(`${apiBase()}${path}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: em, password }),
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok || !d.ok) {
        setErr(d.error || (authMode === "register" ? "Kunne ikke opprette konto" : "Feil e-post eller passord"));
        return;
      }
      if (d.token) localStorage.setItem("nw_customer_token", d.token);
      setPassword("");
      // Første gang → vis "Husk meg?"-prompt, senere ganger → bruk forrige valg
      if (!hasBeenPrompted()) {
        setPendingEmail(em);
        return;
      }
      const wasPersistent = !!localStorage.getItem("nw_customer_email");
      setCustomerEmail(em, wasPersistent);
      setEmail(em);
      setCheckedIn(true);
    } catch (_e) {
      setErr("Kunne ikke kontakte server. Prøv igjen om litt.");
    } finally {
      setLoading(false);
    }
  };
  const confirmLogin = (persist) => {
    setCustomerEmail(pendingEmail, persist);
    setEmail(pendingEmail);
    setCheckedIn(true);
    setPendingEmail(null);
  };
  const signOut = async () => {
    const tok = localStorage.getItem("nw_customer_token");
    if (tok) {
      try {
        await fetch(`${apiBase()}/api/auth/logout`, {
          method: "POST",
          headers: { "Authorization": `Bearer ${tok}` },
        });
      } catch (_e) {}
    }
    localStorage.removeItem("nw_customer_token");
    clearCustomerEmail();
    setData(null);
    setEmail("");
    setPassword("");
    setErr(null);
    setPendingEmail(null);
    setTab("oversikt");
    setCheckedIn(false);
    if (typeof goHome === "function") goHome();
  };

  const toggleFavorite = async (slug) => {
    try {
      const r = await fetch(`${apiBase()}/api/customer/favorites`, {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, slug, action: "toggle" }),
      });
      const d = await r.json();
      if (r.ok) setData(prev => prev ? { ...prev, favorites: d.favorites } : prev);
    } catch (e) {}
  };

  // ── "Husk meg"-prompt etter første pålogging ──
  if (pendingEmail) {
    return (
      <Section tight>
        <Wrap style={{ maxWidth: 520, margin: "0 auto", paddingTop: 60, textAlign: "center" }}>
          <Eyebrow>Velkommen</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(36px, 5vw, 56px)" }}>Skal vi <em>huske deg</em>?</h1>
          <p className="nw-lead" style={{ marginTop: 20, marginBottom: 32 }}>
            Du er logget inn som <strong style={{ color: "var(--hv-teal)" }}>{pendingEmail}</strong>. Vil du at vi skal holde deg innlogget neste gang du besøker nettsiden på denne enheten?
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <Btn size="lg" onClick={() => confirmLogin(true)}>Ja, husk meg</Btn>
            <Btn size="lg" variant="ghost" onClick={() => confirmLogin(false)}>Nei, bare denne økten</Btn>
          </div>
          <p style={{ fontSize: 12, color: "var(--hv-fg-3)", marginTop: 20, lineHeight: 1.6 }}>
            Du kan alltid logge ut øverst til høyre. Vi lagrer kun e-posten din lokalt i nettleseren.
          </p>
        </Wrap>
      </Section>
    );
  }

  // ── Sign-in-skjerm ──
  if (!checkedIn) {
    const inputStyle = { width: "100%", padding: "14px 18px", borderRadius: 10, border: "1px solid var(--hv-line)", background: "rgba(255,255,255,0.03)", color: "var(--hv-fg-1)", fontSize: 16, outline: "none", textAlign: "center" };
    const isRegister = authMode === "register";
    return (
      <Section tight>
        <Wrap style={{ maxWidth: 520, margin: "0 auto", paddingTop: 60, textAlign: "center" }}>
          <Eyebrow>Min konto</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(44px, 6vw, 72px)" }}>
            {isRegister ? <>Opprett <em>konto</em></> : <>Din <em>handel</em>, samlet</>}
          </h1>
          <p className="nw-lead" style={{ marginTop: 20, marginBottom: 32 }}>
            {isRegister
              ? "Registrer en konto med e-post og passord for å se ordrehistorikk, favoritter og leveringsstatus."
              : "Skriv inn e-post og passord for å se ordrene dine, status og favoritter."}
          </p>
          <form onSubmit={signIn} style={{ display: "flex", gap: 10, flexDirection: "column" }}>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="din@epost.no"
              autoComplete="email" required style={inputStyle}/>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)}
              placeholder={isRegister ? "Velg passord (min. 8 tegn)" : "Passord"}
              autoComplete={isRegister ? "new-password" : "current-password"}
              minLength={8} required style={inputStyle}/>
            {err && <div style={{ color: "#ef4444", fontSize: 13 }}>{err}</div>}
            <Btn size="lg" onClick={signIn} disabled={loading}>
              {loading ? "Vent…" : (isRegister ? "Opprett konto" : "Logg inn")} <ArrowRight size={16}/>
            </Btn>
          </form>
          <p style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 20, lineHeight: 1.6 }}>
            {isRegister ? (
              <>Har du allerede konto? <a href="#" onClick={(e) => { e.preventDefault(); setAuthMode("login"); setErr(null); }} style={{ color: "var(--hv-teal)" }}>Logg inn</a></>
            ) : (
              <>Ny kunde? <a href="#" onClick={(e) => { e.preventDefault(); setAuthMode("register"); setErr(null); }} style={{ color: "var(--hv-teal)" }}>Opprett ny konto</a></>
            )}
          </p>
        </Wrap>
      </Section>
    );
  }

  const orders = data?.orders || [];
  const favorites = data?.favorites || [];
  const favoriteProducts = favorites.map(slug => (window.PRODUCTS || []).find(p => p.slug === slug)).filter(Boolean);

  const statusOf = (o) => {
    const raw = o.status || "NEW";
    const mapped = STATUS_LABELS[raw] || { label: raw, color: "var(--hv-fg-3)" };
    return mapped;
  };

  // ── Dashbord-stats for oversikt ──
  const activeOrder = orders.find(o => (o.status || "NEW") !== "DONE" && o.status !== "CANCELLED");
  const lastOrder = orders[0];
  const initial = (email.split("@")[0][0] || "?").toUpperCase();

  // ── Aktiv fane ──
  const [tab, setTab] = React.useState("oversikt");
  const MENU = [
    { id: "oversikt",   label: "Oversikt",  icon: "◉" },
    { id: "ordrer",     label: "Bestillinger", icon: "▤", count: orders.length },
    { id: "favoritter", label: "Favoritter", icon: "♥", count: favoriteProducts.length },
    { id: "konto",      label: "Kontoinfo",  icon: "⚙" },
  ];

  const card = { border: "1px solid var(--hv-line)", borderRadius: 14, padding: "20px 22px", background: "rgba(255,255,255,0.015)" };
  const statCard = { ...card, padding: "18px 20px", display: "flex", flexDirection: "column", gap: 6 };

  const renderOrders = (max) => {
    const list = max ? orders.slice(0, max) : orders;
    if (list.length === 0) return (
      <div style={{ padding: "32px 24px", border: "1px dashed var(--hv-line)", borderRadius: 12, textAlign: "center", color: "var(--hv-fg-3)" }}>
        Ingen ordrer ennå — velkommen innom butikken.
        <div style={{ marginTop: 16 }}><Btn onClick={goShop}>Til butikken <ArrowRight size={14}/></Btn></div>
      </div>
    );
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {list.map((o, i) => {
          const s = statusOf(o);
          const nr = o.ordrenr || o.id || `#${i+1}`;
          const dato = o.dato || o.created_at?.slice(0,10) || "";
          const total = o.sum || o.total || 0;
          const varer = o.varer || o.items || [];
          return (
            <div key={nr + i} style={card}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 12 }}>
                <div>
                  <div style={{ fontSize: 11, color: "var(--hv-fg-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Ordre {nr} · {dato}</div>
                  <div style={{ fontFamily: "var(--hv-font-display)", fontSize: 18, fontWeight: 700, marginTop: 4 }}>{total} kr</div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 12px", borderRadius: 999, background: s.color + "22", border: `1px solid ${s.color}66`, color: s.color, fontSize: 12, fontWeight: 600 }}>
                  <span style={{ width: 7, height: 7, borderRadius: "50%", background: s.color, boxShadow: `0 0 6px ${s.color}aa` }}/>
                  {s.label}
                </div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13, color: "var(--hv-fg-2)" }}>
                {varer.slice(0, 4).map((v, j) => {
                  // Bygg variant-liste fra cart-shape: variantLabel, selectedOpts, boxSelection
                  const variants = [];
                  const seen = new Set();
                  const push = t => { const s = String(t || "").trim(); if (s && !seen.has(s)) { seen.add(s); variants.push(s); } };
                  if (v.variantLabel) push(v.variantLabel);
                  if (v.selectedOpts) Object.values(v.selectedOpts).forEach(push);
                  if (Array.isArray(v.boxSelection)) v.boxSelection.forEach(s => s && push((s.navn || s.name) + (s.qty ? ` ×${s.qty}` : "")));
                  const weight = v.grams ? (v.grams >= 1000 ? `${v.grams/1000} kg` : `${v.grams} g`) : (v.weight || "");
                  // Per-linje tilgjengelighet satt av admin
                  const availMap = {
                    ok:     null,
                    unsure: { label: "Bekreftes", color: "#f59e0b" },
                    no:     { label: "Ikke mulig", color: "#ef4444" },
                  };
                  const av = availMap[v.avail || "ok"];
                  return (
                    <div key={j} style={{ paddingBottom: j < Math.min(varer.length, 4) - 1 ? 8 : 0, borderBottom: j < Math.min(varer.length, 4) - 1 ? "1px dashed var(--hv-line)" : "none" }}>
                      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline" }}>
                        <span style={{ fontWeight: 600, color: "var(--hv-fg-1)" }}>{v.name || v.navn} {v.qty ? `× ${v.qty}` : ""}</span>
                        <span style={{ fontFamily: "monospace", color: "var(--hv-fg-3)" }}>{(v.price || 0) * (v.qty || 1)} kr</span>
                      </div>
                      {(variants.length > 0 || weight || av) && (
                        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center", marginTop: 4 }}>
                          {variants.map((t, idx) => (
                            <span key={idx} style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: "var(--hv-teal-wash)", color: "var(--hv-teal)" }}>{t}</span>
                          ))}
                          {weight && (
                            <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: "rgba(255,255,255,0.04)", color: "var(--hv-fg-3)", border: "1px solid var(--hv-line)" }}>⚖ {weight}</span>
                          )}
                          {av && (
                            <span style={{ marginLeft: "auto", fontSize: 11, padding: "2px 9px", borderRadius: 999, background: av.color + "22", color: av.color, border: `1px solid ${av.color}55`, fontWeight: 600 }}>{av.label}</span>
                          )}
                        </div>
                      )}
                    </div>
                  );
                })}
                {varer.length > 4 && <div style={{ fontSize: 12, color: "var(--hv-fg-3)" }}>…og {varer.length - 4} til</div>}
              </div>
            </div>
          );
        })}
      </div>
    );
  };

  const renderFavorites = () => favoriteProducts.length === 0 ? (
    <div style={{ padding: "32px 24px", border: "1px dashed var(--hv-line)", borderRadius: 12, textAlign: "center", color: "var(--hv-fg-3)" }}>
      Ingen favoritter enda. Klikk hjerte-ikonet på et produkt for å legge det til.
      <div style={{ marginTop: 16 }}><Btn variant="ghost" onClick={goShop}>Til butikken</Btn></div>
    </div>
  ) : (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 12 }}>
      {favoriteProducts.map(p => (
        <div key={p.slug} style={{ borderRadius: 12, overflow: "hidden", background: "var(--hv-ink-3)", border: "1px solid var(--hv-line)", position: "relative" }}>
          <div style={{ aspectRatio: "5/4", overflow: "hidden", cursor: "pointer" }} onClick={() => goPDP(p.slug)}>
            <img src={p.img} alt={p.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <button onClick={() => toggleFavorite(p.slug)} style={{ position: "absolute", top: 8, right: 8, width: 30, height: 30, borderRadius: "50%", border: "none", background: "rgba(8,10,9,0.8)", color: "#ef4444", fontSize: 14, cursor: "pointer", backdropFilter: "blur(6px)" }}>♥</button>
          <div style={{ padding: "12px 14px" }}>
            <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--hv-fg-3)" }}>{p.cat}</div>
            <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 600, fontSize: 14, marginTop: 2, marginBottom: 8 }}>{p.name}</div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 13 }}>{p.price} kr</span>
              <button className="nw-btn nw-btn-ghost nw-btn-sm" style={{ padding: "5px 10px", fontSize: 11 }} onClick={() => addToCart(p)}>
                <Plus size={11}/> Legg til
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );

  return (
    <Wrap>
      <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 32, paddingTop: 40, paddingBottom: 60, alignItems: "start" }}>

        {/* ─── Sidebar-meny ─── */}
        <aside style={{ position: "sticky", top: 90, display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ padding: 18, border: "1px solid var(--hv-line)", borderRadius: 14, background: "rgba(255,255,255,0.02)", textAlign: "center", marginBottom: 10 }}>
            <div style={{ width: 52, height: 52, borderRadius: "50%", background: "var(--hv-teal-wash)", color: "var(--hv-teal)", margin: "0 auto 12px", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, fontFamily: "var(--hv-font-display)", fontWeight: 700, border: "2px solid var(--hv-teal)" }}>{initial}</div>
            <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 700, fontSize: 15, color: "var(--hv-fg-1)", wordBreak: "break-word" }}>{email.split("@")[0]}</div>
            <div style={{ fontSize: 11, color: "var(--hv-fg-3)", marginTop: 2, wordBreak: "break-word" }}>{email}</div>
          </div>
          {MENU.map(m => {
            const active = tab === m.id;
            return (
              <button key={m.id} type="button" onClick={() => setTab(m.id)}
                style={{
                  display: "flex", alignItems: "center", gap: 12, padding: "12px 16px",
                  borderRadius: 10, border: "none", textAlign: "left", cursor: "pointer",
                  background: active ? "var(--hv-teal-wash)" : "transparent",
                  color: active ? "var(--hv-teal)" : "var(--hv-fg-2)",
                  fontSize: 14, fontWeight: active ? 600 : 500,
                  transition: "all 160ms var(--hv-ease)",
                }}>
                <span style={{ fontSize: 16, width: 18, textAlign: "center" }}>{m.icon}</span>
                <span>{m.label}</span>
                {typeof m.count === "number" && m.count > 0 && (
                  <span style={{ marginLeft: "auto", fontSize: 11, padding: "2px 8px", borderRadius: 999, background: active ? "var(--hv-teal)" : "var(--hv-line)", color: active ? "var(--hv-ink)" : "var(--hv-fg-3)", fontWeight: 700 }}>{m.count}</span>
                )}
              </button>
            );
          })}
        </aside>

        {/* ─── Hovedinnhold ─── */}
        <div>
          {loading && <p style={{ color: "var(--hv-fg-3)" }}>Henter dine data…</p>}
          {err && <p style={{ color: "#ef4444" }}>Feil: {err}</p>}

          {/* OVERSIKT */}
          {tab === "oversikt" && (
            <>
              <div style={{ marginBottom: 28 }}>
                <Eyebrow>Dashbord</Eyebrow>
                <h1 className="nw-h1" style={{ marginTop: 10, fontSize: "clamp(30px, 4vw, 44px)", lineHeight: 1.1 }}>Hei, <em>{email.split("@")[0]}</em></h1>
                <p style={{ color: "var(--hv-fg-3)", fontSize: 14, marginTop: 8 }}>Velkommen tilbake.</p>
              </div>
              {/* Stat-grid */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12, marginBottom: 28 }}>
                <div style={statCard}>
                  <div style={{ fontSize: 11, color: "var(--hv-fg-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Bestillinger</div>
                  <div style={{ fontFamily: "var(--hv-font-display)", fontSize: 30, fontWeight: 700 }}>{orders.length}</div>
                </div>
                <div style={statCard}>
                  <div style={{ fontSize: 11, color: "var(--hv-fg-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>Favoritter</div>
                  <div style={{ fontFamily: "var(--hv-font-display)", fontSize: 30, fontWeight: 700, color: "#ef4444" }}>♥ {favoriteProducts.length}</div>
                </div>
              </div>
              {/* Aktiv ordre */}
              {activeOrder && (
                <div style={{ ...card, marginBottom: 28, borderColor: "rgba(65,193,186,0.4)", background: "rgba(65,193,186,0.05)" }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
                    <div>
                      <div style={{ fontSize: 11, color: "var(--hv-teal)", textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 700 }}>Aktiv bestilling</div>
                      <div style={{ fontFamily: "var(--hv-font-display)", fontSize: 18, fontWeight: 700, marginTop: 4 }}>
                        {activeOrder.ordrenr || activeOrder.id} · {activeOrder.sum || activeOrder.total || 0} kr
                      </div>
                      <div style={{ fontSize: 13, color: "var(--hv-fg-3)", marginTop: 2 }}>
                        Status: <span style={{ color: statusOf(activeOrder).color, fontWeight: 600 }}>{statusOf(activeOrder).label}</span>
                      </div>
                    </div>
                    <Btn variant="ghost" size="sm" onClick={() => setTab("ordrer")}>Se detaljer →</Btn>
                  </div>
                </div>
              )}
              {/* Siste ordre */}
              {lastOrder && (
                <div style={{ marginBottom: 24 }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                    <h3 style={{ fontFamily: "var(--hv-font-display)", fontSize: 18, fontWeight: 700 }}>Sist bestilt</h3>
                    {orders.length > 1 && <button onClick={() => setTab("ordrer")} style={{ fontSize: 13, color: "var(--hv-teal)", background: "none", border: "none", cursor: "pointer" }}>Vis alle ({orders.length}) →</button>}
                  </div>
                  {renderOrders(1)}
                </div>
              )}
              {/* Favoritt-preview */}
              {favoriteProducts.length > 0 && (
                <div>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                    <h3 style={{ fontFamily: "var(--hv-font-display)", fontSize: 18, fontWeight: 700 }}>Dine favoritter</h3>
                    {favoriteProducts.length > 4 && <button onClick={() => setTab("favoritter")} style={{ fontSize: 13, color: "var(--hv-teal)", background: "none", border: "none", cursor: "pointer" }}>Vis alle →</button>}
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: 10 }}>
                    {favoriteProducts.slice(0, 4).map(p => (
                      <div key={p.slug} onClick={() => goPDP(p.slug)} style={{ borderRadius: 10, overflow: "hidden", background: "var(--hv-ink-3)", border: "1px solid var(--hv-line)", cursor: "pointer" }}>
                        <div style={{ aspectRatio: "5/4", overflow: "hidden" }}>
                          <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                        </div>
                        <div style={{ padding: "10px 12px" }}>
                          <div style={{ fontSize: 13, fontFamily: "var(--hv-font-display)", fontWeight: 600 }}>{p.name}</div>
                          <div style={{ fontSize: 12, color: "var(--hv-teal)", marginTop: 2 }}>{p.price} kr</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </>
          )}

          {/* BESTILLINGER */}
          {tab === "ordrer" && (
            <>
              <div style={{ marginBottom: 24 }}>
                <Eyebrow>Bestillinger</Eyebrow>
                <h2 className="nw-h2" style={{ marginTop: 10, fontSize: "clamp(28px, 3.5vw, 40px)" }}>Dine <em>bestillinger</em></h2>
                <p style={{ color: "var(--hv-fg-3)", fontSize: 14, marginTop: 6 }}>Status oppdateres automatisk når butikken pakker og sender.</p>
              </div>
              {renderOrders()}
            </>
          )}

          {/* FAVORITTER */}
          {tab === "favoritter" && (
            <>
              <div style={{ marginBottom: 24 }}>
                <Eyebrow>Favoritter</Eyebrow>
                <h2 className="nw-h2" style={{ marginTop: 10, fontSize: "clamp(28px, 3.5vw, 40px)" }}>Dine <em>faste råvarer</em></h2>
                <p style={{ color: "var(--hv-fg-3)", fontSize: 14, marginTop: 6 }}>Klikk hjerte-ikonet på produktsidene for å lagre flere.</p>
              </div>
              {renderFavorites()}
            </>
          )}

          {/* KONTOINFO */}
          {tab === "konto" && (
            <>
              <div style={{ marginBottom: 24 }}>
                <Eyebrow>Konto</Eyebrow>
                <h2 className="nw-h2" style={{ marginTop: 10, fontSize: "clamp(28px, 3.5vw, 40px)" }}>Kontoinfo &amp; <em>innstillinger</em></h2>
              </div>
              <div style={{ ...card, marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: "var(--hv-fg-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 4 }}>E-post</div>
                <div style={{ fontSize: 16, fontFamily: "var(--hv-font-display)", fontWeight: 600 }}>{email}</div>
              </div>
              <div style={{ ...card, marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: "var(--hv-fg-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 4 }}>Innlogging</div>
                <div style={{ fontSize: 14 }}>
                  {!!localStorage.getItem("nw_customer_email") ? "Husker deg på denne enheten" : "Kun i denne økten"}
                </div>
              </div>
              <div style={{ ...card }}>
                <div style={{ fontSize: 11, color: "var(--hv-fg-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 10 }}>Logg ut</div>
                <p style={{ fontSize: 13, color: "var(--hv-fg-3)", marginBottom: 14 }}>Fjerner e-posten fra denne enheten. Du må logge inn igjen neste gang.</p>
                <Btn variant="ghost" onClick={signOut}>Logg ut</Btn>
              </div>
            </>
          )}
        </div>
      </div>
    </Wrap>
  );
};

// ─── Personvern & Vilkår ─────────────────────────────────────────────────
const LegalPage = ({ eyebrow, title, intro, sections }) => (
  <>
    <Section tight>
      <Wrap style={{ paddingTop: 40 }}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(40px, 6vw, 80px)" }}>
          {title}
        </h1>
        {intro && <p className="nw-lead" style={{ marginTop: 20, maxWidth: "62ch" }}>{intro}</p>}
      </Wrap>
    </Section>
    <Wrap>
      <div style={{ maxWidth: 760, display: "flex", flexDirection: "column", gap: 32, paddingBottom: 80 }}>
        {sections.map((s, i) => (
          <section key={i}>
            <h2 className="nw-h3" style={{ marginBottom: 12 }}>{s.h}</h2>
            {s.p.map((para, j) => (
              <p key={j} style={{ color: "var(--hv-fg-2)", fontSize: 15.5, lineHeight: 1.75, marginBottom: 12 }}>{para}</p>
            ))}
            {s.list && (
              <ul style={{ color: "var(--hv-fg-2)", fontSize: 15.5, lineHeight: 1.8, paddingLeft: 22, margin: "8px 0 12px" }}>
                {s.list.map((li, j) => <li key={j}>{li}</li>)}
              </ul>
            )}
          </section>
        ))}
        <p style={{ color: "var(--hv-fg-3)", fontSize: 13, borderTop: "1px solid var(--hv-line)", paddingTop: 20 }}>
          Sist oppdatert: 27. april 2026 · Havøyet AS · Org.nr. 919 283 441
        </p>
      </div>
    </Wrap>
  </>
);

const Personvern = () => (
  <LegalPage
    eyebrow="Personvern"
    title={<>Hvordan vi håndterer <em>opplysningene dine.</em></>}
    intro="Vi samler kun det vi trenger for å levere fersk sjømat trygt på døren. Ingen sporing for sporingens skyld, ingen videresalg av data."
    sections={[
      { h: "Hvilke opplysninger vi behandler", p: ["Når du bestiller hos oss lagrer vi navn, leveringsadresse, e-post og telefon — det vi trenger for å levere ordren og kontakte deg dersom noe skulle skje."], list: ["Kontakt- og leveringsinfo (navn, adresse, e-post, telefon)", "Ordrehistorikk og favoritter knyttet til e-posten din", "Anonymisert besøksstatistikk (uten tredjeparts annonsesporing)"] },
      { h: "Hvorfor vi behandler dem", p: ["Bestillinger og leveranser krever et minimum av personopplysninger. Rettsgrunnlaget er avtale (GDPR art. 6 nr. 1 b) og berettiget interesse (art. 6 nr. 1 f) for grunnleggende statistikk."] },
      { h: "Hvor lenge vi lagrer dataene", p: ["Ordreinformasjon oppbevares i fem år av regnskapshensyn (bokføringsloven). Markedsføringssamtykker fjernes umiddelbart når du melder deg av."] },
      { h: "Dine rettigheter", p: ["Du kan når som helst be om innsyn, retting eller sletting av dine opplysninger. Send en e-post til erik@havoyet.no, så svarer vi innen én uke."] },
      { h: "Cookies", p: ["Vi bruker kun cookies som er nødvendige for at handlekurv og innlogging skal fungere. Ingen markedsførings- eller sporingscookies."] },
    ]}
  />
);

const Vilkår = () => (
  <LegalPage
    eyebrow="Vilkår"
    title={<>Salgs- og <em>leveringsvilkår.</em></>}
    intro="Vi selger kun ferskvare — aldri fryst, aldri på lager. Det stiller noen krav til hvordan vi håndterer bestillinger, levering og angrerett."
    sections={[
      { h: "Bestilling og avtaleinngåelse", p: ["Avtale er inngått når du har mottatt bekreftelse på e-post. Vi tar forbehold om utsolgte varer; dersom et produkt mangler etter bestilling, kontakter vi deg med alternativer eller refunderer beløpet."] },
      { h: "Pris og betaling", p: ["Alle priser er oppgitt i norske kroner inkl. mva. Betaling skjer via Vipps eller kort i kassen. Frakt vises tydelig før du bekrefter ordren."] },
      { h: "Levering", p: ["Vi leverer i Bergensområdet alle hverdager kl. 13–18 og enkelte lørdager. Leveringssone og pris bestemmes av postnummer og vises i kassen."], list: ["Gratis frakt fra 1 100 kr", "Redusert frakt (59 kr) fra 700 kr", "Standard frakt 199 kr"] },
      { h: "Angrerett og reklamasjon", p: ["Ferskvarer er unntatt angreretten (angrerettloven § 22 e). Skulle noe likevel være feil med varen — feil vekt, brutt kjølekjede, dårlig kvalitet — gi beskjed innen 24 timer fra levering, så ordner vi det. Vi erstatter eller refunderer."] },
      { h: "Personvern", p: ["Hvordan vi behandler personopplysninger er beskrevet i personvernerklæringen vår."] },
      { h: "Klage og kontakt", p: ["Klager rettes først til oss på erik@havoyet.no. Du kan også klage til Forbrukertilsynet eller Forbrukerklageutvalget."] },
    ]}
  />
);

// ─── Abonnement-side (månedlig sjømatkasse) ────────────────────────────────
const Abonnement = ({ goHome, goShop }) => {
  // Tre størrelser. Pris er per måned i kr.
  const sizes = [
    { id: "liten",   label: "Liten kasse",   beskrivelse: "1–2 personer · ferdig variert", pris: 599 },
    { id: "medium",  label: "Medium kasse",  beskrivelse: "3–4 personer · vår favoritt",   pris: 999 },
    { id: "stor",    label: "Stor kasse",    beskrivelse: "5+ personer · familie",         pris: 1499 },
  ];
  const [step, setStep]   = React.useState("form");   // form → confirmation
  const [size, setSize]   = React.useState("medium");
  const [submitting, setSubmitting] = React.useState(false);
  const [form, setForm]   = React.useState(() => {
    const d = { navn:"", epost:"", tlf:"", adresse:"", postnr:"", sted:"Bergen",
                leveringsdag:"torsdag", kommentar:"" };
    try {
      const saved = localStorage.getItem("nw_checkout_info");
      if (saved) Object.assign(d, JSON.parse(saved));
    } catch (e) {}
    const loggedIn = localStorage.getItem("nw_customer_email");
    if (loggedIn) d.epost = loggedIn;
    return d;
  });
  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const valgtSize = sizes.find(s => s.id === size) || sizes[1];
  const sum = valgtSize.pris;
  const canSubmit = form.navn.trim() && form.epost.trim() && form.tlf.trim()
    && form.adresse.trim() && form.postnr.trim();

  // Stripe Elements
  const stripeRef       = React.useRef(null);
  const cardElementRef  = React.useRef(null);
  const cardMountRef    = React.useRef(null);
  const [cardReady,    setCardReady]    = React.useState(false);
  const [cardError,    setCardError]    = React.useState("");
  const [cardComplete, setCardComplete] = React.useState(false);
  const [confirmation, setConfirmation] = React.useState(null);

  React.useEffect(() => {
    if (step !== "form") return;
    let cancelled = false;
    const ensureStripeJs = () => new Promise((res, rej) => {
      if (window.Stripe) return res();
      const ex = document.querySelector('script[data-hv-stripe]');
      if (ex) { ex.addEventListener("load", res); ex.addEventListener("error", rej); return; }
      const s = document.createElement("script");
      s.src = "https://js.stripe.com/v3/"; s.async = true;
      s.setAttribute("data-hv-stripe", "1"); s.onload = res; s.onerror = rej;
      document.head.appendChild(s);
    });
    (async () => {
      try {
        const base = window.HV_API_BASE || "";
        const cfg  = await fetch(`${base}/api/stripe/config`).then(r => r.json());
        if (cancelled) return;
        if (!cfg.ok || !cfg.publishableKey) {
          setCardError("Kortbetaling er ikke konfigurert ennå.");
          return;
        }
        await ensureStripeJs();
        if (cancelled) return;
        const stripe = window.Stripe(cfg.publishableKey, { locale: "nb" });
        stripeRef.current = stripe;
        const card = stripe.elements().create("card", {
          hidePostalCode: true,
          style: {
            base: { fontSize: "15px", color: "#F1EEE6", fontFamily: "'Maven Pro', system-ui, sans-serif",
                    "::placeholder": { color: "rgba(241,238,230,0.45)" }, iconColor: "#41C1BA" },
            invalid: { color: "#f87171", iconColor: "#f87171" },
          },
        });
        if (cancelled || !cardMountRef.current) return;
        card.mount(cardMountRef.current);
        cardElementRef.current = card;
        card.on("ready",  () => { if (!cancelled) setCardReady(true); });
        card.on("change", (e) => {
          if (cancelled) return;
          setCardError(e.error ? e.error.message : "");
          setCardComplete(!!e.complete);
        });
      } catch (e) {
        if (!cancelled) setCardError("Kortform kunne ikke lastes: " + (e && e.message ? e.message : e));
      }
    })();
    return () => {
      cancelled = true;
      if (cardElementRef.current) { try { cardElementRef.current.unmount(); } catch (e) {} cardElementRef.current = null; }
    };
  }, [step]);

  const submit = async () => {
    if (!canSubmit) return;
    setSubmitting(true);
    const stripe = stripeRef.current;
    const card   = cardElementRef.current;
    if (!stripe || !card) { alert("Kortform er ikke klar ennå."); setSubmitting(false); return; }
    if (!cardComplete)    { setCardError("Fyll ut kortinformasjonen først."); setSubmitting(false); return; }
    const base = window.HV_API_BASE || "";
    try {
      const r = await fetch(`${base}/api/subscription/create`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          amount: Math.round(sum * 100),
          description: `Sjømatkasse — ${valgtSize.label} (månedlig abonnement)`,
          kunde: { ...form },
          kasse: { size, label: valgtSize.label, prisPerMnd: sum },
        }),
      });
      const v = await r.json();
      if (!r.ok || !v.clientSecret) {
        alert("Kunne ikke opprette abonnement: " + (v.error || "ukjent feil"));
        setSubmitting(false); return;
      }
      const result = await stripe.confirmCardPayment(v.clientSecret, {
        payment_method: { card, billing_details: { name: form.navn, email: form.epost, phone: form.tlf.replace(/\s+/g, "") } },
      });
      if (result.error) { setCardError(result.error.message || "Kortet ble avvist."); setSubmitting(false); return; }
      if (result.paymentIntent && result.paymentIntent.status === "succeeded") {
        setConfirmation({
          subscriptionId: v.subscriptionId,
          amount: sum,
          size: valgtSize.label,
          email: form.epost,
        });
        setStep("confirmation");
        try { localStorage.setItem("nw_checkout_info", JSON.stringify(form)); } catch (e) {}
        return;
      }
      alert("Betalingen ble ikke fullført.");
    } catch (e) {
      alert("Det oppstod en feil: " + (e.message || e));
    }
    setSubmitting(false);
  };

  if (step === "confirmation" && confirmation) {
    return (
      <Section tight>
        <Wrap style={{ maxWidth: 640, margin: "0 auto", textAlign: "center", paddingTop: 60 }}>
          <div style={{ width: 80, height: 80, borderRadius: "50%", background: "var(--hv-teal-wash)", color: "var(--hv-teal)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 36, margin: "0 auto 24px", border: "2px solid var(--hv-teal)" }}>✓</div>
          <Eyebrow>Abonnement opprettet</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 16, fontSize: "clamp(36px, 5vw, 56px)" }}>Velkommen som abonnent!</h1>
          <p className="nw-lead" style={{ marginTop: 20 }}>
            Første <strong>{confirmation.size}</strong> sender vi snart. Vi trekker <strong>{confirmation.amount.toLocaleString("nb")} kr</strong> automatisk fra det samme kortet hver måned.
          </p>
          <div style={{ background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)", borderRadius: 14, padding: 28, marginTop: 32, textAlign: "left" }}>
            <div style={{ fontSize: 12, color: "var(--hv-fg-3)", textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 12 }}>Detaljer</div>
            <div style={{ fontSize: 14, lineHeight: 1.8 }}>
              <div><strong>Bekreftelse til:</strong> {confirmation.email}</div>
              <div><strong>Pris per måned:</strong> {confirmation.amount.toLocaleString("nb")} kr</div>
              <div><strong>Trekkes:</strong> første gang nå, deretter samme dag hver måned</div>
              <div><strong>Kanseller:</strong> svar på e-posten eller send melding til erik@havoyet.no</div>
            </div>
          </div>
          <div style={{ marginTop: 32 }}>
            <Btn variant="ghost" onClick={goHome}>Tilbake til forsiden <ArrowRight size={14}/></Btn>
          </div>
        </Wrap>
        <Section/>
      </Section>
    );
  }

  return (
    <Section tight>
      <Wrap style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ marginBottom: 32 }}>
          <Eyebrow>Abonnement</Eyebrow>
          <h1 className="nw-display" style={{ marginTop: 12, fontSize: "clamp(36px, 5vw, 64px)" }}>Sjømatkasse <em>hver måned.</em></h1>
          <p className="nw-lead" style={{ marginTop: 16, maxWidth: 600 }}>Velg størrelse, betal én gang, så sender vi en variert kasse til døra hver måned. Kanseller når du vil.</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 32, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            {/* Størrelse */}
            <div>
              <h3 style={{ fontFamily: "var(--hv-font-display)", fontSize: 18, fontWeight: 700, marginBottom: 12 }}>Størrelse</h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {sizes.map(s => {
                  const sel = s.id === size;
                  return (
                    <div key={s.id} onClick={() => setSize(s.id)}
                      style={{ borderRadius: 10, border: `1px solid ${sel ? "rgba(65,193,186,0.5)" : "var(--hv-line)"}`, background: sel ? "var(--hv-teal-wash)" : "transparent", padding: 14, cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                        <div style={{ width: 20, height: 20, borderRadius: "50%", flexShrink: 0, border: `2px solid ${sel ? "var(--hv-teal)" : "var(--hv-line)"}`, background: sel ? "var(--hv-teal)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
                          {sel && <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#080A09" }}/>}
                        </div>
                        <div>
                          <div style={{ fontWeight: 600, fontSize: 15 }}>{s.label}</div>
                          <div style={{ fontSize: 13, color: "var(--hv-fg-3)" }}>{s.beskrivelse}</div>
                        </div>
                      </div>
                      <div style={{ fontWeight: 700, color: "var(--hv-teal)" }}>{s.pris.toLocaleString("nb")} kr/mnd</div>
                    </div>
                  );
                })}
              </div>
            </div>
            {/* Kontakt + adresse */}
            <div>
              <h3 style={{ fontFamily: "var(--hv-font-display)", fontSize: 18, fontWeight: 700, marginBottom: 12 }}>Dine opplysninger</h3>
              <div style={{ display: "grid", gap: 12 }}>
                <input className="nw-input" placeholder="Fullt navn"  value={form.navn}    onChange={update("navn")}/>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <input className="nw-input" placeholder="E-post"      value={form.epost}   onChange={update("epost")}/>
                  <input className="nw-input" placeholder="Telefon"     value={form.tlf}     onChange={update("tlf")}/>
                </div>
                <input className="nw-input" placeholder="Leveringsadresse" value={form.adresse} onChange={update("adresse")}/>
                <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 12 }}>
                  <input className="nw-input" placeholder="Postnr"  value={form.postnr} onChange={update("postnr")}/>
                  <input className="nw-input" placeholder="Sted"     value={form.sted}   onChange={update("sted")}/>
                </div>
                <textarea className="nw-input" rows={2} placeholder="Kommentar (valgfritt)" value={form.kommentar} onChange={update("kommentar")}/>
              </div>
            </div>
            {/* Kort */}
            <div>
              <h3 style={{ fontFamily: "var(--hv-font-display)", fontSize: 18, fontWeight: 700, marginBottom: 12 }}>Betalingskort</h3>
              <div style={{ padding: "14px 16px", borderRadius: 10, border: "1px solid rgba(65,193,186,0.35)", background: "rgba(65,193,186,0.04)" }}>
                <label style={{ display: "block", fontSize: 12, color: "var(--hv-fg-3)", marginBottom: 6 }}>Kortnummer · utløp · CVC</label>
                <div ref={cardMountRef} style={{ padding: "14px 14px", borderRadius: 8, border: "1px solid var(--hv-line)", background: "rgba(0,0,0,0.25)", minHeight: 24 }}>
                  {!cardReady && <div style={{ color: "var(--hv-fg-3)", fontSize: 13 }}>Laster sikker kortform…</div>}
                </div>
                {cardError && <div style={{ marginTop: 8, color: "#f87171", fontSize: 12.5 }}>{cardError}</div>}
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12, paddingTop: 10, borderTop: "1px dashed var(--hv-line)", fontSize: 11.5, color: "var(--hv-fg-3)" }}>
                  <span aria-hidden style={{ fontSize: 13 }}>🔒</span>
                  <span>Sikker betaling via Stripe. Kortet trekkes automatisk én gang per måned. Ingen kortdata lagres på vår server.</span>
                </div>
              </div>
            </div>
          </div>
          {/* Sammendrag */}
          <aside style={{ position: "sticky", top: 100, background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)", borderRadius: 14, padding: 24 }}>
            <Eyebrow>Sammendrag</Eyebrow>
            <div style={{ marginTop: 16, paddingBottom: 16, borderBottom: "1px solid var(--hv-line)" }}>
              <div style={{ fontSize: 14, color: "var(--hv-fg-2)" }}>{valgtSize.label}</div>
              <div style={{ fontSize: 12, color: "var(--hv-fg-3)", marginTop: 4 }}>{valgtSize.beskrivelse}</div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 16 }}>
              <span style={{ fontSize: 13, color: "var(--hv-fg-3)" }}>Per måned</span>
              <span style={{ fontFamily: "var(--hv-font-display)", fontSize: 28, fontWeight: 800, color: "var(--hv-teal)" }}>{sum.toLocaleString("nb")} kr</span>
            </div>
            <div style={{ fontSize: 11.5, color: "var(--hv-fg-3)", marginTop: 6, lineHeight: 1.55 }}>
              Trekkes første gang i dag. Deretter samme dato hver måned. Kanseller når som helst.
            </div>
            <Btn variant="primary" onClick={submit} disabled={!canSubmit || submitting}
              style={{ width: "100%", marginTop: 22, justifyContent: "center" }}>
              {submitting ? "Bekrefter…" : "Start abonnement"}
            </Btn>
            <div style={{ fontSize: 11, color: "var(--hv-fg-3)", marginTop: 10, textAlign: "center" }}>
              Klikker du «Start abonnement» godtar du våre <a onClick={(e) => { e.preventDefault(); window.scrollTo(0,0); }} style={{ textDecoration: "underline", cursor: "pointer" }} href="#">vilkår</a>.
            </div>
          </aside>
        </div>
      </Wrap>
      <Section/>
    </Section>
  );
};

Object.assign(window, { Om, Catering, Levering, Kontakt, Checkout, Abonnement, MinKonto, Personvern, Vilkår });