// Home page — timeline, seasonal calendar, product preview, editorial split

// Havbakgrunn: gradient festet til DOKUMENTPOSISJON (ikke viewport).
// Svart fra sesongkalender og nedover, transparent over. Bobler i egen fixed-laget.
const OceanBackground = () => {
  React.useEffect(() => {
    document.body.classList.add("nw-has-ocean");
    const measure = () => {
      const el = document.getElementById("sesongkalender");
      if (!el) return;
      // Faste dokumentpunkter: full svart starter ved sesongkalenderens topp
      const anchor = el.getBoundingClientRect().top + window.scrollY;
      // Fade-startpunktet: 60vh over anker — gir myk overgang fra hav til svart
      const fadeStart = Math.max(0, anchor - window.innerHeight * 0.6);
      document.documentElement.style.setProperty("--ocean-anchor-px", anchor + "px");
      document.documentElement.style.setProperty("--ocean-fade-start-px", fadeStart + "px");
    };
    measure();
    window.addEventListener("resize", measure);
    // Re-mål når bilder/innhold endrer layout-høyde
    const t1 = setTimeout(measure, 600);
    const t2 = setTimeout(measure, 1800);
    return () => {
      window.removeEventListener("resize", measure);
      clearTimeout(t1); clearTimeout(t2);
      document.body.classList.remove("nw-has-ocean");
    };
  }, []);
  return (
    <>
      {/* Gradient-laget er ABSOLUTT-posisjonert i dokumentet — fast posisjon, ikke viewport */}
      <div className="nw-ocean-bg" aria-hidden="true">
        <div className="nw-ocean-grad" />
        <div className="nw-ocean-caustics" />
      </div>
    </>
  );
};

const currentMonth = new Date().getMonth(); // 0-11

const MONTH_NAMES = ["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"];

const InSeasonNow = () => {
  const inSeason = SEASONS.filter(s => s.months[currentMonth] > 0);
  const peak = inSeason.filter(s => s.months[currentMonth] === 2);
  const variable = inSeason.filter(s => s.months[currentMonth] === 1);
  const rootRef = React.useRef(null);
  React.useEffect(() => {
    if (!window.anime || !rootRef.current) return;
    const anime = window.anime;
    const chips = rootRef.current.querySelectorAll("[data-season-chip]");
    anime.set(chips, { opacity: 0, translateY: 16, scale: 0.85 });
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (!e.isIntersecting) return;
        anime({
          targets: chips,
          opacity: [0, 1],
          translateY: [16, 0],
          scale: [0.85, 1],
          duration: 650,
          delay: anime.stagger(40, { grid: [10, Math.ceil(chips.length / 10)], from: "first" }),
          easing: "cubicBezier(0.16, 1, 0.3, 1)",
        });
        io.disconnect();
      });
    }, { threshold: 0.15 });
    io.observe(rootRef.current);
    return () => io.disconnect();
  }, [peak.length, variable.length]);
  return (
    <div ref={rootRef} style={{ marginTop: 48 }}>
      <div style={{ marginBottom: 24 }}>
        <Eyebrow plain>I sesong i {MONTH_NAMES[currentMonth]}</Eyebrow>
        <h3 className="nw-h3" style={{ marginTop: 12 }}>
          {peak.length} arter på topp — {variable.length > 0 ? `${variable.length} med varierende tilgang` : ""}
        </h3>
      </div>
      {peak.length > 0 && (
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--hv-fg-3)", marginBottom: 12 }}>God tilgang</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {peak.map((s, i) => (
              <span key={i} data-season-chip style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "8px 16px", borderRadius: 999,
                background: "var(--hv-teal-wash)",
                border: "1px solid rgba(65,193,186,0.35)",
                fontSize: 14, fontWeight: 500,
                color: "var(--hv-teal)",
                willChange: "transform, opacity"
              }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--hv-teal)", boxShadow: "0 0 6px rgba(65,193,186,0.6)" }} />
                {s.label}
              </span>
            ))}
          </div>
        </div>
      )}
      {variable.length > 0 && (
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--hv-fg-3)", marginBottom: 12 }}>Varierende tilgang</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {variable.map((s, i) => (
              <span key={i} data-season-chip style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "8px 16px", borderRadius: 999,
                background: "rgba(65,193,186,0.06)",
                border: "1px solid rgba(65,193,186,0.2)",
                fontSize: 14, fontWeight: 500,
                color: "var(--hv-fg-2)",
                willChange: "transform, opacity"
              }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "rgba(65,193,186,0.5)" }} />
                {s.label}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const SEASON_LEGEND = () => (
  <div style={{ display: "flex", gap: 24, marginBottom: 20, fontSize: 13, color: "var(--hv-fg-3)", flexWrap: "wrap" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <span style={{ width: 28, height: 10, borderRadius: 999, background: "var(--hv-teal)", boxShadow: "0 0 10px rgba(65,193,186,0.4)" }} /> God tilgang
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <span style={{ width: 28, height: 10, borderRadius: 999, background: "rgba(65,193,186,0.35)" }} /> Varierende tilgang
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <span style={{ width: 28, height: 10, borderRadius: 999, background: "var(--hv-ink-4)", border: "1px solid var(--hv-line)" }} /> Ikke i sesong
    </div>
  </div>
);

const SeasonSearch = () => {
  const [query, setQuery] = React.useState("");
  const [showFull, setShowFull] = React.useState(false);
  const q = query.trim().toLowerCase();
  const results = q.length > 0 ? SEASONS.filter(s => s.label.toLowerCase().includes(q)) : [];

  return (
    <div>
      <div style={{ position: "relative", maxWidth: 420, marginBottom: 28 }}>
        <input
          value={query}
          onChange={e => setQuery(e.target.value)}
          placeholder="Søk på en fisk, f.eks. «torsk»…"
          style={{
            width: "100%", padding: "14px 18px", borderRadius: 12,
            background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)",
            color: "var(--hv-fg-1)", fontSize: 15, fontFamily: "inherit", outline: "none",
          }}
        />
      </div>

      {q.length > 0 && results.length === 0 && (
        <p style={{ color: "var(--hv-fg-3)", marginBottom: 24 }}>Ingen treff på «{query}».</p>
      )}

      {results.length > 0 && (
        <div style={{ marginBottom: 32, display: "grid", gap: 24 }}>
          {results.map((row, ri) => {
            const status = row.months[currentMonth];
            return (
              <div key={ri} style={{ padding: "20px 24px", borderRadius: 14, background: "var(--hv-ink-2)", border: "1px solid var(--hv-line)" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16, flexWrap: "wrap", gap: 8 }}>
                  <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 600, fontSize: 18 }}>{row.label}</div>
                  <span style={{
                    padding: "5px 14px", borderRadius: 999, fontSize: 12, fontWeight: 600,
                    background: status === 2 ? "var(--hv-teal-wash)" : status === 1 ? "rgba(65,193,186,0.08)" : "var(--hv-ink-4)",
                    color: status === 2 ? "var(--hv-teal)" : status === 1 ? "rgba(65,193,186,0.8)" : "var(--hv-fg-3)",
                    border: `1px solid ${status === 2 ? "rgba(65,193,186,0.4)" : status === 1 ? "rgba(65,193,186,0.2)" : "var(--hv-line)"}`,
                  }}>
                    {status === 2 ? "God tilgang nå" : status === 1 ? "Varierende tilgang nå" : "Ikke i sesong nå"}
                  </span>
                </div>
                <div style={{ display: "flex", gap: 3 }}>
                  {row.months.map((v, mi) => (
                    <div key={mi} style={{ flex: 1, textAlign: "center" }}>
                      <div style={{
                        height: 8, borderRadius: 4,
                        background: v === 2 ? "var(--hv-teal)" : v === 1 ? "rgba(65,193,186,0.35)" : "var(--hv-ink-4)",
                        border: v === 0 ? "1px solid var(--hv-line)" : "none",
                        outline: mi === currentMonth ? "2px solid var(--hv-teal)" : "none",
                        outlineOffset: 2,
                      }} />
                      <div style={{ fontSize: 9, marginTop: 4, color: mi === currentMonth ? "var(--hv-teal)" : "var(--hv-fg-3)", fontWeight: mi === currentMonth ? 700 : 400 }}>{MONTHS_NB[mi]}</div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {!showFull ? (
        <Btn variant="ghost" onClick={() => setShowFull(true)}>Se hele kalenderen <ArrowDown size={14} /></Btn>
      ) : (
        <>
          <div style={{ marginBottom: 24 }}>
            <Btn variant="ghost" onClick={() => setShowFull(false)}>Skjul kalender <ArrowDown size={14} style={{ transform: "rotate(180deg)" }} /></Btn>
          </div>
          <SEASON_LEGEND />
          <SeasonalCalendar />
        </>
      )}
    </div>
  );
};

const CAL_CATS = ["Villfanget fisk", "Oppdrettsfisk", "Skalldyr og skjell"];

const SeasonalCalendar = () => {
  const [activeCat, setActiveCat] = React.useState("Villfanget fisk");
  const iconMap = { Snowflake, Fish, Anchor };
  const rows = activeCat === "Alle" ? SEASONS : SEASONS.filter(s => s.cat === activeCat);
  return (
    <div>

      <div style={{ display: "flex", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
        {CAL_CATS.map(cat => (
          <button key={cat}
            className={"nw-kalk-chip" + (activeCat === cat ? " active" : "")}
            onClick={() => setActiveCat(cat)}
            style={{ padding: "8px 18px" }}
          >{cat}</button>
        ))}
      </div>
      <div className="nw-cal">
        <div className="nw-cal-head">
          <div>Sesong</div>
          {MONTHS_NB.map((m, i) => (
            <div key={i} className={i === currentMonth ? "current" : ""}>{m}</div>
          ))}
        </div>
        {rows.map((row, ri) => {
          const Ic = iconMap[row.ic] || Fish;
          return (
            <div className="nw-cal-row" key={ri}>
              <div className="nw-cal-label"><Ic size={16} style={{ color: "var(--hv-teal)" }} />{row.label}</div>
              {row.months.map((v, mi) => (
                <div className="nw-cal-cell" key={mi}>
                  {v > 0 && <div className={"nw-cal-bar " + (v === 2 ? "peak" : "mid")} />}
                </div>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
};

const FraBaatTilDoer = () => {
  const rootRef = React.useRef(null);
  React.useEffect(() => {
    if (!window.anime || !rootRef.current) return;
    const anime = window.anime;
    const stepEls = Array.from(rootRef.current.querySelectorAll(".nw-tl-step"));
    // Skjul alle deler av alle trinn fra start
    stepEls.forEach(step => {
      anime.set(step, { opacity: 1 });
      anime.set(step.querySelector(".nw-tl-num"), { opacity: 0, translateY: 22, scale: 0.7 });
      anime.set(step.querySelector(".nw-tl-dot"), { opacity: 0, scale: 0.5, rotate: -30 });
      anime.set(step.querySelector("h4"),         { opacity: 0, translateY: 18 });
      anime.set(step.querySelector("p"),          { opacity: 0, translateY: 16 });
    });

    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (!e.isIntersecting) return;
        // Sekvensiell timeline — hvert trinn i sin helhet, i rekkefølge (01 → 02 → 03 → 04)
        const tl = anime.timeline({ easing: "cubicBezier(0.16, 1, 0.3, 1)" });
        stepEls.forEach((step, i) => {
          const num  = step.querySelector(".nw-tl-num");
          const dot  = step.querySelector(".nw-tl-dot");
          const head = step.querySelector("h4");
          const desc = step.querySelector("p");
          // Første trinn starter umiddelbart, neste bygger på forrige (kortere gap)
          const baseOffset = i === 0 ? 0 : "+=90";
          // Nummer-tallet popper opp først (attention grabber)
          tl.add({ targets: num,  opacity: [0, 1], translateY: [22, 0], scale: [0.7, 1], duration: 320 }, baseOffset);
          // Ikon-prikken fjærer inn rett etter
          tl.add({ targets: dot,  opacity: [0, 1], scale: [0.5, 1], rotate: [-30, 0], duration: 380, easing: "spring(1, 90, 12, 0)" }, "-=230");
          // Overskriften glir opp
          tl.add({ targets: head, opacity: [0, 1], translateY: [18, 0], duration: 300 }, "-=260");
          // Beskrivelsen avslutter trinnet
          tl.add({ targets: desc, opacity: [0, 1], translateY: [16, 0], duration: 300 }, "-=260");
        });
        io.disconnect();
      });
    }, { threshold: 0.2 });
    io.observe(rootRef.current);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={rootRef} className="nw-timeline">
      {[
        { n: "01", ic: Anchor, t: "Fiskebåt", d: "Fisken vår er villfanget av lokale båter på Vestlandet og i Nord-Norge." },
        { n: "02", ic: Truck, t: "Hentet av Domstein", d: "Fisken plukkes opp på fiskekaia og kjøres rett til oss. Ingen mellomlager, ingen uke på palle." },
        { n: "03", ic: Fish, t: "Filetert og pakket hos oss", d: "Vi mottar fisken vår hel, og fileterer selv. Da blir kvaliteten enda bedre!" },
        { n: "04", ic: Check, t: "Hjem til deg, på is", d: "Sjømaten holder 0-4 grader i bilen, mens vi kjører hjem til deg." },
      ].map((s, i) => (
        <div className="nw-tl-step" key={i} style={{ willChange: "transform, opacity" }}>
          <div className="nw-tl-num" style={{ willChange: "transform, opacity" }}>{s.n}</div>
          <div className="nw-tl-dot" style={{ willChange: "transform, opacity" }}><s.ic size={20} /></div>
          <h4 style={{ willChange: "transform, opacity" }}>{s.t}</h4>
          <p style={{ willChange: "transform, opacity" }}>{s.d}</p>
        </div>
      ))}
    </div>
  );
};

const PREVIEW_SLUGS = [
  "breiflabb-filet", "laks-filet",    "reker-ferske",
  "rodspette-filet", "speket-orret",  "kamskjell",
  "torsk-filet",     "fjellørret-filet",
];

const ProductPreview = ({ goShop, addToCart, goPDP }) => {
  const preview = PREVIEW_SLUGS.map(s => PRODUCTS.find(p => p.slug === s)).filter(Boolean);
  const gridRef = React.useRef(null);

  // Scroll-triggered staggered reveal for produktkortene
  React.useEffect(() => {
    if (!window.anime || !gridRef.current) return;
    const cards = gridRef.current.querySelectorAll("[data-pcard]");
    window.anime.set(cards, { opacity: 0, translateY: 48, scale: 0.96 });
    const io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          window.anime({
            targets: cards,
            opacity: [0, 1],
            translateY: [48, 0],
            scale: [0.96, 1],
            duration: 900,
            delay: window.anime.stagger(80),
            easing: "cubicBezier(0.16, 1, 0.3, 1)",
          });
          io.disconnect();
        }
      });
    }, { threshold: 0.15 });
    io.observe(gridRef.current);
    return () => io.disconnect();
  }, []);

  return (
    <Wrap>
      <div className="nw-section-head">
        <div>
          <Eyebrow>Butikk <Dash /> fersk i dag</Eyebrow>
          <h2 className="nw-h2" style={{ marginTop: 16 }}>Det vi har <em>akkurat nå</em></h2>
        </div>
        <Btn variant="ghost" onClick={goShop}>Se alle <ArrowRight size={14} /></Btn>
      </div>
      <div ref={gridRef} style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
        {preview.map(p => (
          <div key={p.slug} data-pcard onClick={() => goPDP(p.slug)}
            style={{
              borderRadius: 12, overflow: "hidden", cursor: "pointer",
              background: "var(--hv-ink-3)", border: "1px solid var(--hv-line)",
              transition: "border-color 180ms, transform 300ms var(--hv-ease)",
              willChange: "transform, opacity",
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = "rgba(65,193,186,0.5)"; e.currentTarget.style.transform = "translateY(-4px)"; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--hv-line)"; e.currentTarget.style.transform = "translateY(0)"; }}
          >
            <div style={{ position: "relative", aspectRatio: "5/4", overflow: "hidden" }}>
              <img src={p.img} alt={p.name} loading="lazy"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              {p.tag && (
                <span style={{
                  position: "absolute", top: 8, left: 8,
                  padding: "3px 8px", borderRadius: 999, fontSize: 10, fontWeight: 600,
                  background: "var(--hv-teal)", color: "#080A09", textTransform: "uppercase", letterSpacing: "0.08em",
                }}>{p.tag}</span>
              )}
            </div>
            <div style={{ padding: "10px 12px 12px" }}>
              <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--hv-fg-3)", marginBottom: 3 }}>{p.cat}</div>
              <div style={{ fontFamily: "var(--hv-font-display)", fontWeight: 600, fontSize: 14, lineHeight: 1.3, marginBottom: 8 }}>{p.name}</div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 }}>
                <ProductPriceDisplay p={p} />
                <button
                  className="nw-btn nw-btn-ghost nw-btn-sm"
                  style={{ padding: "5px 10px", fontSize: 12 }}
                  onClick={e => { e.stopPropagation(); addToCart(p); }}
                >
                  <Plus size={12} /> Legg til
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Wrap>
  );
};

// Scroll-parallax hook: flytter refererert element svakt med scroll-posisjon
const useParallax = (strength = 0.15) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const rect = el.getBoundingClientRect();
        const vh = window.innerHeight;
        const progress = (rect.top + rect.height / 2 - vh / 2) / vh;
        el.style.transform = `translateY(${-progress * strength * 100}px)`;
        ticking = false;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [strength]);
  return ref;
};

// Quote-seksjon med SVG wave-draw + ord-for-ord tekstreveal
const AnimatedQuote = () => {
  const rootRef = React.useRef(null);
  React.useEffect(() => {
    if (!window.anime || !rootRef.current) return;
    const anime = window.anime;
    const paths = rootRef.current.querySelectorAll("path");
    const words = rootRef.current.querySelectorAll(".nw-qword");
    const attr  = rootRef.current.querySelector(".nw-quote-attr");
    anime.set(words, { opacity: 0, translateY: 24 });
    if (attr) anime.set(attr, { opacity: 0, translateY: 12 });
    // Forbered SVG path-draw
    paths.forEach(p => {
      const len = p.getTotalLength ? p.getTotalLength() : 400;
      p.style.strokeDasharray = len;
      p.style.strokeDashoffset = len;
    });

    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (!e.isIntersecting) return;
        const tl = anime.timeline({ easing: "cubicBezier(0.16, 1, 0.3, 1)" });
        tl.add({ targets: Array.from(paths), strokeDashoffset: [anime.setDashoffset, 0], duration: 1400, easing: "easeInOutQuart", delay: anime.stagger(120) })
          .add({ targets: words, opacity: [0, 1], translateY: [24, 0], duration: 700, delay: anime.stagger(35) }, "-=900")
          .add({ targets: attr,  opacity: [0, 1], translateY: [12, 0], duration: 600 }, "-=200");
        io.disconnect();
      });
    }, { threshold: 0.3 });
    io.observe(rootRef.current);
    return () => io.disconnect();
  }, []);

  const line1 = "\"Bare fersk sjømat.".split(" ");
  const line2 = "Det er hele forretningen.".split(" ");
  const line3 = "Vi skal ikke late som det er noe annet.\"".split(" ");
  return (
    <div ref={rootRef} className="nw-quote">
      <WaveGlyph width={80} height={28} animated={true} />
      <div className="nw-quote-text" style={{ marginTop: 24 }}>
        {line1.map((w, i) => <span key={"l1"+i} className="nw-qword" style={{ display: "inline-block", marginRight: "0.25em", willChange: "transform, opacity" }}>{w}</span>)}
        <span className="mark">
          {" "}
          {line2.map((w, i) => <span key={"l2"+i} className="nw-qword" style={{ display: "inline-block", marginRight: "0.25em", willChange: "transform, opacity" }}>{w}</span>)}
        </span>
        {" "}
        {line3.map((w, i) => <span key={"l3"+i} className="nw-qword" style={{ display: "inline-block", marginRight: "0.25em", willChange: "transform, opacity" }}>{w}</span>)}
      </div>
      <div className="nw-quote-attr" style={{ willChange: "transform, opacity" }}>Erik Havøyet · grunnlegger</div>
    </div>
  );
};

// Split-bildet av Erik med scroll-parallax + ken-burns
const ErikParallaxImage = () => {
  const ref = useParallax(0.12);
  return (
    <img
      ref={ref}
      src="assets/img/erik-2.webp"
      alt="Erik"
      style={{ animation: "nw-kenburns 26s ease-in-out infinite alternate", willChange: "transform" }}
    />
  );
};

// Hook: er vi på mobil? Lytt på resize.
const useIsMobile = () => {
  const [isMobile, setIsMobile] = React.useState(() =>
    typeof window !== "undefined" && window.matchMedia("(max-width: 720px)").matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia("(max-width: 720px)");
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener ? mq.addEventListener("change", handler) : mq.addListener(handler);
    return () => mq.removeEventListener ? mq.removeEventListener("change", handler) : mq.removeListener(handler);
  }, []);
  return isMobile;
};

// ─── Mobile Home — egen layout, kun for små skjermer ──────────────
const MOBILE_HERO_IMGS = [
  "assets/img/torsk-loin.webp",
  "assets/img/laks-filet.webp",
  "assets/img/reker.webp",
  "assets/img/sjokreps.webp",
  "assets/img/kongekrabbe.webp",
  "assets/img/rodspette-filet.webp",
  "assets/img/fjellorret-filet.webp",
  "assets/img/kamskjell.webp",
];

const MobileHeroSlideshow = () => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    // Respekter brukerens "redusert bevegelse"-preferanse
    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const t = setInterval(() => setIdx(i => (i + 1) % MOBILE_HERO_IMGS.length), 5500);
    return () => clearInterval(t);
  }, []);
  return (
    <>
      {MOBILE_HERO_IMGS.map((src, i) => (
        <img
          key={src}
          src={src}
          alt={i === 0 ? "Fersk sjømat fra Havøyet" : ""}
          loading={i === 0 ? "eager" : "lazy"}
          style={{
            position: "absolute",
            inset: 0,
            opacity: i === idx ? 1 : 0,
            transition: "opacity 1400ms ease-in-out",
            willChange: "opacity",
          }}
        />
      ))}
    </>
  );
};

const HomeMobile = ({ goShop, goShopCat, goPDP, goAbout, goSjømatkasse, addToCart }) => {
  const featured = (window.PRODUCTS || []).slice(0, 6);
  const inSeasonNow = SEASONS ? SEASONS.filter(s => s.months[currentMonth] === 2).slice(0, 6) : [];
  return (
    <>
      <OceanBackground />
      {/* Mobil hero — full-bleed bildekarusell + tittel under */}
      <section className="hv-mob-hero">
        <div className="hv-mob-hero-img">
          <MobileHeroSlideshow />
          <div className="hv-mob-hero-grad" />
        </div>
        <div className="hv-mob-hero-text">
          <div className="hv-mob-eyebrow">Vakuumert · pakket på is</div>
          <h1 className="hv-mob-h1">Fersk sjømat,<br/><em>helt hjem.</em></h1>
          <p className="hv-mob-lead">
            Håndplukket fra båt, filetert hos oss, levert på døren.
          </p>
          <div className="hv-mob-cta-row">
            <button className="nw-btn nw-btn-primary" onClick={goShop}>Kjøp sjømat</button>
            <button className="nw-btn nw-btn-ghost" onClick={goSjømatkasse}>Sjømatkasse</button>
          </div>
        </div>
      </section>

      {/* Hurtig-kategorier */}
      <section className="hv-mob-cats">
        <div className="hv-mob-cats-grid">
          {[
            { name: "Hvit fisk",  img: "assets/img/torsk-filet.jpg" },
            { name: "Rød fisk",   img: "assets/img/laks-filet.webp" },
            { name: "Skalldyr og skjell", img: "assets/img/reker.webp" },
            { name: "Fiskemat",   img: "assets/img/plukkfisk.webp" },
          ].map(c => (
            <button key={c.name} className="hv-mob-cat-card" onClick={() => (goShopCat ? goShopCat(c.name) : goShop())}>
              <img src={c.img} alt="" />
              <span>{c.name}</span>
            </button>
          ))}
        </div>
      </section>

      {/* I sesong nå */}
      {inSeasonNow.length > 0 && (
        <section className="hv-mob-section">
          <div className="hv-mob-section-head">
            <span className="hv-mob-eyebrow">I sesong i {MONTH_NAMES[currentMonth]}</span>
            <h2 className="hv-mob-h2">Akkurat nå</h2>
          </div>
          <div className="hv-mob-chip-row">
            {inSeasonNow.map(s => (
              <span key={s.label} className="hv-mob-chip">{s.label}</span>
            ))}
          </div>
        </section>
      )}

      {/* Utvalgte produkter */}
      <section className="hv-mob-section">
        <div className="hv-mob-section-head">
          <span className="hv-mob-eyebrow">Bla i butikken</span>
          <h2 className="hv-mob-h2">Populært</h2>
        </div>
        <div className="hv-mob-pgrid">
          {featured.map(p => (
            <button key={p.slug} className="hv-mob-pcard" onClick={() => goPDP(p.slug)}>
              <div className="hv-mob-pcard-img"><img src={p.img} alt={p.name} loading="lazy"/></div>
              <div className="hv-mob-pcard-body">
                <div className="hv-mob-pcard-cat">{p.cat}</div>
                <div className="hv-mob-pcard-name">{p.name}</div>
                <div className="hv-mob-pcard-price">{p.price} kr<span className="u">/{p.unitLabel || p.unit || "stk"}</span></div>
              </div>
            </button>
          ))}
        </div>
        <button className="nw-btn nw-btn-ghost" style={{ width: "100%", marginTop: 16 }} onClick={goShop}>
          Se hele butikken <ArrowRight size={14}/>
        </button>
      </section>

      {/* Sjømatkasse pitch */}
      <section className="hv-mob-section hv-mob-pitch">
        <span className="hv-mob-eyebrow">Sjømatkasse</span>
        <h2 className="hv-mob-h2">Få sjømat på <em>fast dag.</em></h2>
        <p className="hv-mob-lead">Velg hvor ofte. Vi sender dagens beste fra båten.</p>
        <button className="nw-btn nw-btn-primary" style={{ width: "100%", marginTop: 14 }} onClick={goSjømatkasse}>
          Lag din sjømatkasse <ArrowRight size={14}/>
        </button>
      </section>

      {/* Om Havøyet */}
      <section className="hv-mob-section hv-mob-about">
        <div className="hv-mob-about-img">
          <img src="assets/img/erik-2.webp" alt="Erik, grunder av Havøyet" />
        </div>
        <span className="hv-mob-eyebrow">Bergen siden 2019</span>
        <h2 className="hv-mob-h2">"Bare det aller <em>beste fra havet.</em>"</h2>
        <p className="hv-mob-lead">
          Erik plukker råvarene selv, fileterer på huset, og leverer rett på døra.
        </p>
        <button className="nw-btn nw-btn-ghost" style={{ marginTop: 14 }} onClick={goAbout}>
          Hvem vi er <ArrowRight size={14}/>
        </button>
      </section>
    </>
  );
};

const Home = ({ tweaks, goShop, goShopCat, goPDP, goAbout, goSjømatkasse, addToCart }) => {
  const isMobile = useIsMobile();
  if (isMobile) return <HomeMobile goShop={goShop} goShopCat={goShopCat} goPDP={goPDP} goAbout={goAbout} goSjømatkasse={goSjømatkasse} addToCart={addToCart} />;
  return <HomeDesktop tweaks={tweaks} goShop={goShop} goPDP={goPDP} goAbout={goAbout} goSjømatkasse={goSjømatkasse} addToCart={addToCart} />;
};

const HomeDesktop = ({ tweaks, goShop, goPDP, goAbout, goSjømatkasse, addToCart }) => (
  <>
    <OceanBackground />
    <Hero variant={tweaks.hero_variant} heading={tweaks.hero_heading} onShop={goShop} onSjømatkasse={goSjømatkasse} />
    <Section>
      <Wrap>
        <div className="nw-section-head">
          <div>
            <Eyebrow>Fisken sin reise</Eyebrow>
            <h2 className="nw-h2" style={{ marginTop: 16 }}>Kvalitet i hvert ledd!</h2>
          </div>
          <p className="nw-lead" style={{ maxWidth: 480 }}>
            Vi har håndplukket de beste leverandørene, for å kunne levere det aller beste. Derfor kjenner våre kunder forskjellen!
          </p>
        </div>
        <Reveal><FraBaatTilDoer /></Reveal>
      </Wrap>
    </Section>

    <Section style={{ background: "var(--hv-ink-2)" }}>
      <Wrap>
        <ProductPreview goShop={goShop} addToCart={addToCart} goPDP={goPDP} />
      </Wrap>
    </Section>

    <Section id="sesongkalender">
      <Wrap>
        <div className="nw-section-head">
          <div>
            <Eyebrow>Sesongkalender</Eyebrow>
            <h2 className="nw-h2" style={{ marginTop: 16 }}>Norsk <em>villfanget</em> sjømat i sesong</h2>
          </div>
          <p className="nw-lead" style={{ maxWidth: 480 }}>
            Havøyet selger villfanget sjømat, der det er mulig. Se når din favoritt er i sesong under!
          </p>
        </div>
        <SeasonSearch />
      </Wrap>
    </Section>

    <Section style={{ background: "var(--hv-ink-2)" }}>
      <Wrap>
        <div className="nw-split">
          <Reveal>
            <div className="nw-split-img" style={{ willChange: "transform" }}>
              <ErikParallaxImage />
            </div>
          </Reveal>
          <Reveal delay={100}>
            <Eyebrow>Erik <Dash /> Grunder av Havøyet</Eyebrow>
            <h2 className="nw-h2" style={{ marginTop: 16 }}>"Du skal være sikker på at du får <em>det beste av sjømat.</em>"</h2>
            <p className="nw-lead" style={{ marginTop: 20 }}>
              Jeg var lei av å kjøpe fisk som luktet og var opptint. Derfor startet jeg Havøyet.
            </p>
            <p className="nw-lead" style={{ marginTop: 16 }}>
              Kundene våre har aldri fått sjømat som lukter, og barna spiser mye mer fisk nå!
            </p>
            <p className="nw-lead" style={{ marginTop: 16 }}>
              Våre kunder <strong>skal</strong> forvente det beste hver gang!
            </p>
            <div style={{ marginTop: 28 }}>
              <Btn variant="ghost" onClick={goAbout}>Les om oss <ArrowRight size={14} /></Btn>
            </div>
          </Reveal>
        </div>
      </Wrap>
    </Section>

    <Section>
      <Wrap>
        <div className="nw-cb">
          <div className="nw-grid-2" style={{ alignItems: "center", gap: 48 }}>
            <div>
              <Eyebrow>Sjømatkasse</Eyebrow>
              <h2 className="nw-h2" style={{ marginTop: 16 }}>Få levert sjømat <em>faste dager.</em></h2>
              <p className="nw-lead" style={{ marginTop: 20 }}>
                Velg hvor ofte og når du ønsker å få fersk sjømat levert. For deg som jevnlig spiser sjømat!
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
                <Btn onClick={goSjømatkasse}>Lag din sjømatkasse <ArrowRight size={14} /></Btn>
              </div>
            </div>
            <div style={{ position: "relative", aspectRatio: "4/5", borderRadius: "var(--hv-r-lg)", overflow: "hidden" }}>
              <img src="assets/img/sjomat-kasse.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          </div>
        </div>
      </Wrap>
    </Section>

    <Section tight>
      <Wrap>
        <AnimatedQuote />
      </Wrap>
    </Section>
  </>
);

Object.assign(window, { Home, SeasonalCalendar, FraBaatTilDoer, ProductPreview, InSeasonNow });