// ICONS — Lucide-style, all inline SVG, currentColor strokes.
// Matches Havøyet: stroke 1.8, round caps/joins, no fills.

const Icon = ({ size = 20, stroke = 1.8, children, style, ...rest }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    style={style}
    {...rest}
  >
    {children}
  </svg>
);

const Bag = (p) => (
  <Icon {...p}>
    <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
    <path d="M3 6h18" />
    <path d="M16 10a4 4 0 0 1-8 0" />
  </Icon>
);
const Search = (p) => (
  <Icon {...p}><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></Icon>
);
const Sun = (p) => (
  <Icon {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m5 5 1.5 1.5"/><path d="m17.5 17.5 1.5 1.5"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m5 19 1.5-1.5"/><path d="m17.5 6.5 1.5-1.5"/></Icon>
);
const Moon = (p) => (
  <Icon {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></Icon>
);
const Close = (p) => (
  <Icon {...p}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></Icon>
);
const Plus = (p) => (
  <Icon {...p}><path d="M12 5v14"/><path d="M5 12h14"/></Icon>
);
const Minus = (p) => (
  <Icon {...p}><path d="M5 12h14"/></Icon>
);
const ArrowRight = (p) => (
  <Icon {...p}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></Icon>
);
const ArrowDown = (p) => (
  <Icon {...p}><path d="M12 5v14"/><path d="m5 12 7 7 7-7"/></Icon>
);
const ChevDown = (p) => (
  <Icon {...p}><path d="m6 9 6 6 6-6"/></Icon>
);
const MapPin = (p) => (
  <Icon {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="3"/></Icon>
);
const Truck = (p) => (
  <Icon {...p}><path d="M5 17H3V6h11v11"/><path d="M14 9h4l3 4v4h-2"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></Icon>
);
const Clock = (p) => (
  <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>
);
const Fish = (p) => (
  <Icon {...p}><path d="M6.5 12c2-4 6-5 10-5 4 0 6 1 6 1s-1 3-1 4 1 4 1 4-2 1-6 1c-4 0-8-1-10-5Z"/><path d="M2 12s1-2 4.5-2"/><circle cx="16" cy="11" r="0.5" fill="currentColor"/></Icon>
);
const Anchor = (p) => (
  <Icon {...p}><circle cx="12" cy="5" r="2"/><path d="M12 22V7"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><path d="M8 10h8"/></Icon>
);
const Phone = (p) => (
  <Icon {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 13 13 0 0 0 .7 2.8 2 2 0 0 1-.5 2L8 9.6a16 16 0 0 0 6 6l1-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.7a2 2 0 0 1 1.7 2Z"/></Icon>
);
const Mail = (p) => (
  <Icon {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></Icon>
);
const Check = (p) => (
  <Icon {...p}><path d="M20 6 9 17l-5-5"/></Icon>
);
const Leaf = (p) => (
  <Icon {...p}><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19.8 2c.2 1.3 1 5 1 8a7 7 0 0 1-7 7Z"/><path d="M2 21c0-3 1.9-6 5-9"/></Icon>
);
const Snowflake = (p) => (
  <Icon {...p}><path d="M2 12h20"/><path d="M12 2v20"/><path d="m4.9 4.9 14.2 14.2"/><path d="m19.1 4.9-14.2 14.2"/></Icon>
);

// Brand wave — the signature tilde mark from the logo.
// Two teal stops echo the logo gradient.
const WaveGlyph = ({ width = 56, height = 20, color, animated = false, style }) => (
  <svg width={width} height={height} viewBox="0 0 100 32" fill="none" style={style}>
    <defs>
      <linearGradient id={"wg" + (animated ? "a" : "s")} x1="0" y1="0" x2="100" y2="0" gradientUnits="userSpaceOnUse">
        <stop offset="0" stopColor="#148777" />
        <stop offset="1" stopColor="#55E0D5" />
      </linearGradient>
    </defs>
    <path
      d="M4 18 C 18 6, 30 30, 50 16 S 82 2, 96 14"
      stroke={color || ("url(#wg" + (animated ? "a" : "s") + ")")}
      strokeWidth="4"
      strokeLinecap="round"
      fill="none"
      style={animated ? { strokeDasharray: 140, strokeDashoffset: 0, animation: "wave-dash 6s ease-in-out infinite" } : null}
    />
    {animated && <style>{`@keyframes wave-dash { 0%,100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -12; } }`}</style>}
  </svg>
);

const Logotype = ({ variant = "white", height = 36 }) => {
  // logo-dark.png = dark wordmark + teal wave (for light backgrounds)
  // logo-light.png = white wordmark + teal wave (for dark backgrounds)
  const src = variant === "color" ? "assets/logo-brand.png" : variant === "black" ? "assets/logo-dark.png" : "assets/logo-light.png";
  return (
    <img
      src={src}
      alt="Havøyet — bare fersk sjømat"
      style={{ height, width: "auto", display: "block" }}
    />
  );
};

Object.assign(window, {
  Icon, Bag, Search, Sun, Moon, Close, Plus, Minus,
  ArrowRight, ArrowDown, ChevDown, MapPin, Truck, Clock,
  Fish, Anchor, Phone, Mail, Check, Leaf, Snowflake,
  WaveGlyph, Logotype,
});
