// Five hero variants — selectable via Tweaks.
// V1 cinematic, V2 typographic split, V3 ukens fisk, V4 manifest split, V5 card stack.

const HeroV1 = ({ heading, onShop }) => (
  <section className="nw-hero v1">
    <div className="nw-hero-bg">
      <img src="assets/img/ekte-1.webp" alt="" />
    </div>
    <div className="nw-hero-scrim" />
    <div className="nw-hero-wash" />
    <div className="nw-wrap nw-hero-inner" style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", minHeight: "70vh" }}>
      <Reveal>
        <div style={{ marginBottom: 20 }}>
          <WaveGlyph width={64} height={20} animated={true} />
        </div>
        <Eyebrow plain style={{ marginBottom: 20 }}>Havøyet Bergen — siden 2019</Eyebrow>
        <h1 className="nw-display" style={{ maxWidth: "14ch", textWrap: "balance" }}>
          {heading.split(",").map((part, i, arr) => (
            <span key={i}>
              {i === arr.length - 1 && arr.length > 1 ? <em>{part.trim()}</em> : part.trim()}
              {i < arr.length - 1 ? "," : ""}<br/>
            </span>
          ))}
        </h1>
        <p className="nw-lead" style={{ marginTop: 28, maxWidth: "46ch" }}>
          Havøyet håndplukker bare de aller beste råvarene, fileterer selv, pakker det i vakuum pose, og kjører det helt hjem til deg!
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
          <Btn size="lg" onClick={onShop}>Kjøp sjømat <ArrowRight size={16} /></Btn>
          <Btn variant="ghost" size="lg">Ukens fisk <ArrowDown size={16} /></Btn>
        </div>
      </Reveal>
    </div>
    {/* stats row at bottom */}
    <div style={{ position: "absolute", bottom: 28, right: 0, left: 0, zIndex: 3 }}>
      <div className="nw-wrap" style={{ display: "flex", gap: 48, flexWrap: "wrap", color: "var(--hv-fg-2)", fontSize: 13 }}>
        <div><span style={{ color: "var(--hv-teal)", fontStyle: "italic", fontFamily: "var(--hv-font-display)", fontSize: 24, marginRight: 10 }}>~</span>landet 06:14 i dag</div>
        <div><span style={{ color: "var(--hv-teal)", fontStyle: "italic", fontFamily: "var(--hv-font-display)", fontSize: 24, marginRight: 10 }}>~</span>leverer alle hverdager</div>
        <div><span style={{ color: "var(--hv-teal)", fontStyle: "italic", fontFamily: "var(--hv-font-display)", fontSize: 24, marginRight: 10 }}>~</span>12 varer inne nå</div>
      </div>
    </div>
  </section>
);

const HeroV2 = ({ heading, onShop }) => (
  <section className="nw-hero v2">
    <div className="nw-wrap">
      <Reveal>
        <Eyebrow plain style={{ marginBottom: 28 }}>Uke 17 — Fra Bergen, med alvor</Eyebrow>
        <h1 className="nw-display" style={{ fontSize: "clamp(64px, 12vw, 200px)", marginBottom: 40 }}>
          Fersk.<br/>
          <em style={{ fontStyle: "italic" }}>Fisk.</em><br/>
          Punktum.
        </h1>
      </Reveal>
      <div className="nw-hero-typo" style={{ marginTop: 40 }}>
        <Reveal delay={100}>
          <p className="nw-lead" style={{ fontSize: 22 }}>
            {heading}<br/>
            <span style={{ color: "var(--hv-fg-3)" }}>Vi skal ikke late som det er noe annet.</span>
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
            <Btn size="lg" onClick={onShop}>Se butikken <ArrowRight size={16} /></Btn>
            <Btn variant="ghost" size="lg">Hva er ferskt i dag?</Btn>
          </div>
        </Reveal>
        <Reveal delay={200}>
          <div className="nw-hero-typo-img">
            <img src="assets/img/torsk-loin.webp" alt="" style={{ animation: "nw-kenburns 22s ease-in-out infinite alternate" }} />
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const HeroV3 = ({ heading, onShop }) => {
  const featured = PRODUCTS.find(p => p.slug === "skrei-skiver");
  return (
    <section className="nw-hero v3">
      <div className="nw-hero-bg">
        <img src="assets/img/skrei-hero.webp" alt="" style={{ objectPosition: "center center" }} />
      </div>
      <div className="nw-hero-scrim side" />
      <div className="nw-hero-wash" />
      <div className="nw-wrap" style={{ position: "relative", zIndex: 2 }}>
        <div className="nw-hero-uf">
          <Reveal>
            <Eyebrow plain style={{ marginBottom: 20 }}>
              <WaveGlyph width={40} height={12} /> Ukens fisk — uke 17
            </Eyebrow>
            <h1 className="nw-display" style={{ fontSize: "clamp(56px, 8vw, 120px)", maxWidth: "12ch" }}>
              {heading.split(",")[0]},<br/>
              <em>denne uken.</em>
            </h1>
            <p className="nw-lead" style={{ marginTop: 24 }}>
              Skrei fra Lofoten. Den gyter bare nå, fra januar til april.
              Landet i Henningsvær mandag, hos deg samme kveld.
            </p>
          </Reveal>
          <Reveal delay={150}>
            <div className="nw-hero-uf-card">
              <div className="nw-hero-uf-media">
                <img src={featured.img} alt={featured.name} />
                <div style={{ position: "absolute", top: 16, left: 16 }}>
                  <span className="nw-badge nw-badge-limit">Begrenset sesong</span>
                </div>
              </div>
              <div className="nw-hero-uf-body">
                <div style={{ fontSize: 12, letterSpacing: "0.12em", color: "var(--hv-fg-3)", textTransform: "uppercase", fontWeight: 500 }}>{featured.cat}</div>
                <h3 className="nw-h3" style={{ marginTop: 6 }}>{featured.name}</h3>
                <p style={{ fontSize: 14, color: "var(--hv-fg-3)", lineHeight: 1.6, marginTop: 10 }}>{featured.desc}</p>
                <div className="nw-hero-uf-price-block">
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--hv-fg-3)", textTransform: "uppercase" }}>Fra</div>
                    <div className="nw-hero-uf-price">{featured.price} kr <span style={{ fontSize: 14, color: "var(--hv-fg-3)", fontWeight: 400 }}>/ {featured.unit}</span></div>
                  </div>
                  <Btn onClick={onShop}>Legg i kurv</Btn>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

const HeroV4 = ({ heading, onShop }) => (
  <section className="nw-hero v4">
    <div className="nw-hero-split-grid">
      <div className="nw-hero-split-img">
        <img src="assets/img/erik-1.webp" alt="Erik ved sjøen" style={{ animation: "nw-kenburns 26s ease-in-out infinite alternate" }} />
        <div style={{
          position: "absolute", bottom: 24, left: 24,
          padding: "10px 16px", borderRadius: 999,
          background: "rgba(8,10,9,0.7)", backdropFilter: "blur(10px)",
          fontSize: 12, display: "flex", alignItems: "center", gap: 10
        }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--hv-ok)" }} />
          Erik · i butikken akkurat nå
        </div>
      </div>
      <div className="nw-hero-split-text">
        <Reveal>
          <Eyebrow>Havøyet <Dash /> manifest</Eyebrow>
          <h1 className="nw-display" style={{ fontSize: "clamp(44px, 5.5vw, 88px)" }}>
            {heading.split(",")[0]}<br/>
            <em>uten mellomledd.</em>
          </h1>
          <p className="nw-lead" style={{ marginTop: 20 }}>
            Mest villfanget i Nord-Norge. Domstein henter fisken på kaia og kjører den rett til oss.
            Vi fileterer og pakker for hånd samme dag, og kjører ut til deg. Det er hele forretningen.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0", display: "grid", gap: 10 }}>
            {["Villfanget i Nord-Norge", "Pakket på is, aldri fryst", "Levert i Bergen hver dag — også lørdag"].map((t, i) => (
              <li key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Check size={16} style={{ color: "var(--hv-teal)" }} /> <span>{t}</span>
              </li>
            ))}
          </ul>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <Btn size="lg" onClick={onShop}>Handle nå</Btn>
            <Btn variant="ghost" size="lg">Møt Erik <ArrowRight size={16} /></Btn>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const HERO_SLIDES = [
  { img: "assets/img/torsk-loin.webp",   label: "Torsk loin",     porsjon: "160 kr" },
  { img: "assets/img/laks-filet.webp",  label: "Laks filet",     porsjon: "145 kr" },
  { img: "assets/img/krabbeklor.webp",  label: "Krabbeklør",     porsjon: "213 kr" },
  { img: "assets/img/reker.webp",       label: "Reker ferske",   porsjon: "100 kr" },
  { img: "assets/img/kveite-filet.webp",label: "Rødspette",      porsjon: "97 kr"  },
  { img: "assets/img/orret-filet.webp", label: "Speket ørret",   porsjon: "79 kr"  },
  { img: "assets/img/sjokreps.webp",    label: "Sjøkreps",       porsjon: "160 kr" },
];

const HeroV5 = ({ heading, onShop, onSjømatkasse }) => {
  const [idx, setIdx] = React.useState(0);
  const n = HERO_SLIDES.length;

  const frontRef = React.useRef(null);
  const middleRef = React.useRef(null);
  const backRef = React.useRef(null);
  const headingRef = React.useRef(null);
  const isAnimatingRef = React.useRef(false);

  // Ord-for-ord avsløring av heading ved mount (anime.stagger)
  React.useEffect(() => {
    if (!window.anime || !headingRef.current) return;
    const words = headingRef.current.querySelectorAll(".nw-word");
    window.anime.set(words, { opacity: 0, translateY: 40 });
    window.anime({
      targets: words,
      opacity: [0, 1],
      translateY: [40, 0],
      duration: 900,
      delay: window.anime.stagger(90, { start: 200 }),
      easing: "cubicBezier(0.16, 1, 0.3, 1)",
    });
  }, []);

  // Ren krysstoning: front-kortet fader ut, dataen rulleres, fader inn igjen.
  // Ingen fysisk forflytning — ingen "hakking" mulig.
  React.useEffect(() => {
    if (!window.anime) return;
    const anime = window.anime;
    const swap = () => {
      if (isAnimatingRef.current) return;
      const front = frontRef.current;
      if (!front) return;
      isAnimatingRef.current = true;

      anime({
        targets: front,
        opacity: [1, 0],
        duration: 500,
        easing: "cubicBezier(0.4, 0, 0.6, 1)",
        complete: () => {
          setIdx(i => (i + 1) % n);
          requestAnimationFrame(() => {
            anime({
              targets: front,
              opacity: [0, 1],
              duration: 500,
              easing: "cubicBezier(0.4, 0, 0.6, 1)",
              complete: () => { isAnimatingRef.current = false; },
            });
          });
        },
      });
    };
    const timer = setInterval(swap, 5000);
    return () => clearInterval(timer);
  }, [n]);

  const front  = HERO_SLIDES[idx % n];
  const middle = HERO_SLIDES[(idx + 1) % n];
  const back   = HERO_SLIDES[(idx + 2) % n];

  const words = heading.split(",")[0].split(" ");
  const italicPart = (heading.split(",").slice(1).join(",").trim() || "fra båt til dør.").split(" ");

  return (
    <section className="nw-hero v5" style={{ minHeight: "auto" }}>
      <div className="nw-wrap">
        <div className="nw-hero-stack-grid">
          <div>
            <Eyebrow plain style={{ marginBottom: 20 }}>Vakuumert og pakket på is</Eyebrow>
            <h1 ref={headingRef} className="nw-display" style={{ fontSize: "clamp(56px, 8vw, 128px)", maxWidth: "11ch" }}>
              {words.map((w, i) => <span key={"a"+i} className="nw-word" style={{ display: "inline-block", marginRight: "0.25em", willChange: "transform, opacity" }}>{w}</span>)}
              <br/>
              <em>
                {italicPart.map((w, i) => <span key={"b"+i} className="nw-word" style={{ display: "inline-block", marginRight: "0.25em", willChange: "transform, opacity" }}>{w}</span>)}
              </em>
            </h1>
            <Reveal delay={700}>
              <p className="nw-lead" style={{ marginTop: 28 }}>
                Havøyet håndplukker bare de aller beste råvarene, fileterer selv, pakker det i vakuum pose, og kjører det helt hjem til deg!
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
                <Btn size="lg" onClick={onShop}>Kjøp sjømat</Btn>
                <Btn variant="ghost" size="lg" onClick={onSjømatkasse}>Lag din sjømatkasse <ArrowRight size={16} /></Btn>
              </div>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <div className="nw-hero-stack-cards">
              <div ref={backRef} className="nw-hero-stack-card c3" style={{ willChange: "transform, opacity" }}>
                <img src={back.img} alt="" />
                <div className="nw-hero-stack-card-pill"><span>{back.label}</span><span className="p">{back.porsjon} <span style={{fontWeight:400,opacity:0.7,fontSize:"0.85em"}}>pr porsjon</span></span></div>
              </div>
              <div ref={middleRef} className="nw-hero-stack-card c2" style={{ willChange: "transform, opacity" }}>
                <img src={middle.img} alt="" />
                <div className="nw-hero-stack-card-pill"><span>{middle.label}</span><span className="p">{middle.porsjon} <span style={{fontWeight:400,opacity:0.7,fontSize:"0.85em"}}>pr porsjon</span></span></div>
              </div>
              <div ref={frontRef} className="nw-hero-stack-card c1" style={{ willChange: "transform, opacity" }}>
                <img src={front.img} alt="" />
                <div className="nw-hero-stack-card-pill"><span>{front.label}</span><span className="p">{front.porsjon} <span style={{fontWeight:400,opacity:0.7,fontSize:"0.85em"}}>pr porsjon</span></span></div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

const Hero = ({ variant, heading, onShop, onSjømatkasse }) => {
  const Comp = [HeroV1, HeroV2, HeroV3, HeroV4, HeroV5][(variant || 1) - 1] || HeroV1;
  return <Comp heading={heading} onShop={onShop} onSjømatkasse={onSjømatkasse} />;
};

Object.assign(window, { Hero, HeroV1, HeroV2, HeroV3, HeroV4, HeroV5 });