// Shared primitives — eyebrow, price, buttons, reveal, etc.

const Eyebrow = ({ plain, children, style }) => (
  <span className={"nw-eyebrow" + (plain ? " plain" : "")} style={style}>{children}</span>
);

const Btn = ({ variant = "primary", size, children, onClick, style, ...rest }) => (
  <button
    className={["nw-btn", "nw-btn-" + variant, size === "lg" ? "nw-btn-lg" : size === "sm" ? "nw-btn-sm" : ""].join(" ")}
    onClick={onClick}
    style={style}
    {...rest}
  >
    {children}
  </button>
);

const Price = ({ amount, unit, size }) => (
  <span className="nw-price" style={size === "lg" ? { fontSize: 32 } : null}>
    {new Intl.NumberFormat("nb-NO").format(amount)}<span style={{ marginLeft: 4, letterSpacing: "0.02em" }}>kr</span>
    {unit ? <span className="nw-price-unit"> / {unit}</span> : null}
  </span>
);

const Dash = () => <span className="nw-dash" style={{ margin: "0 0.3em" }}>—</span>;

// Minimal scroll-reveal hook using IntersectionObserver
const useReveal = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    if (!("IntersectionObserver" in window)) { el.classList.add("in"); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { el.classList.add("in"); io.unobserve(el); }
      });
    }, { threshold: 0.1 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
};

const Reveal = ({ children, style, delay = 0 }) => {
  const ref = useReveal();
  return (
    <div ref={ref} className="nw-reveal" style={{ ...style, transitionDelay: delay + "ms" }}>
      {children}
    </div>
  );
};

// Wrap — 1280 max width container
const Wrap = ({ children, style, className }) => (
  <div className={"nw-wrap " + (className || "")} style={style}>{children}</div>
);

const Section = ({ children, tight, style, id }) => (
  <section id={id} className={"nw-section" + (tight ? " tight" : "")} style={style}>{children}</section>
);

// Wave divider — animated SVG stroke
const WaveDivider = ({ flip, color = "rgba(44,54,50,0.7)" }) => (
  <div className="nw-wave-div" style={flip ? { transform: "scaleY(-1)" } : null}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none">
      <path
        d="M0 40 C 240 10, 480 70, 720 40 S 1200 10, 1440 40"
        stroke={color} strokeWidth="1" fill="none"
      />
      <path
        d="M0 35 C 240 5, 480 65, 720 35 S 1200 5, 1440 35"
        stroke="rgba(65,193,186,0.3)" strokeWidth="1" fill="none"
        style={{
          strokeDasharray: 6,
          animation: "wdash 14s linear infinite"
        }}
      />
    </svg>
    <style>{`@keyframes wdash { to { stroke-dashoffset: -300; } }`}</style>
  </div>
);

// Marquee
const Marquee = ({ items }) => {
  const all = [...items, ...items]; // duplicate for loop
  return (
    <div className="nw-marquee" aria-hidden>
      <div className="nw-marquee-track">
        {all.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
};

Object.assign(window, { Eyebrow, Btn, Price, Dash, useReveal, Reveal, Wrap, Section, WaveDivider, Marquee });