// Shared atoms: striped SVG placeholders, monogram, icons, formatting
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const fmtPrice = (n) => `$${n.toFixed(0)}`;

// Striped placeholder with a monospace tag describing what should go there.
function Placeholder({ label, src, alt, hue = 14, ratio = "4/5", dark = true, accent = false, style = {} }) {
  const bg = dark ? `hsl(${hue} 14% 11%)` : `hsl(${hue} 22% 86%)`;
  const stripe = dark ? `hsla(${hue} 22% 22% / 0.6)` : `hsla(${hue} 22% 70% / 0.6)`;
  const fg = dark ? `hsl(${hue} 8% 62%)` : `hsl(${hue} 10% 30%)`;
  return (
    <div
      className="ph"
      style={{
        position: "relative",
        aspectRatio: ratio,
        width: "100%",
        background: `repeating-linear-gradient(135deg, ${bg} 0 14px, ${stripe} 14px 15px)`,
        color: fg,
        overflow: "hidden",
        ...style,
      }}
    >
      {src ? (
        <img
          src={src}
          alt={alt || label || "image"}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
        />
      ) : null}
      {accent ? (
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: `radial-gradient(60% 60% at 70% 30%, hsl(${hue} 60% 28% / 0.35), transparent 70%)`,
          }}
        />
      ) : null}
      {/* <div
        style={{
          position: "absolute",
          left: 14,
          top: 14,
          fontFamily: "var(--mono)",
          fontSize: 10,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
        }}
      >
        {label || "image"}
      </div> */}

      <figcaption>{label}</figcaption>
      <div
        style={{
          position: "absolute",
          right: 14,
          bottom: 14,
          fontFamily: "var(--mono)",
          fontSize: 10,
          letterSpacing: "0.12em",
          opacity: 0.65,
        }}
      >
      </div>
    </div>
  );
}

// SVG monogram logo: BB inside a stamped rectangle
function Monogram({ size = 28, color = "currentColor" }) {
  return (
    <img src="images\brokeboisOC.png" alt="BrokeBoisOC" width="50"/>
  );
}

// Icon set — thin line, 1.5 stroke
const Icon = {
  search: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <circle cx="11" cy="11" r="7" />
      <path d="M20 20l-3.5-3.5" strokeLinecap="round" />
    </svg>
  ),
  bag: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 8h14l-1 12H6L5 8z" strokeLinejoin="round" />
      <path d="M9 8V6a3 3 0 016 0v2" />
    </svg>
  ),
  user: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" strokeLinecap="round" />
    </svg>
  ),
  close: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 5l14 14M19 5L5 19" strokeLinecap="round" />
    </svg>
  ),
  arrow: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  plus: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M12 5v14M5 12h14" strokeLinecap="round" />
    </svg>
  ),
  minus: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M5 12h14" strokeLinecap="round" />
    </svg>
  ),
  star: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.5l7.1-.6L12 2z" />
    </svg>
  ),
  menu: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M3 7h18M3 17h18" strokeLinecap="round" />
    </svg>
  ),
  instagram: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <rect x="3.5" y="3.5" width="17" height="17" rx="4" />
      <circle cx="12" cy="12" r="4.2" />
      <circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none" />
    </svg>
  ),
  tiktok: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M16.8 4.2c.6 1.9 2 3.4 4 3.9v3.5c-1.4 0-2.8-.4-4-1.1V15c0 3.1-2.5 5.6-5.6 5.6S5.6 18.1 5.6 15 8.1 9.4 11.2 9.4c.3 0 .7 0 1 .1v3.7c-.3-.1-.6-.2-1-.2-1.1 0-2.1.9-2.1 2.1s.9 2.1 2.1 2.1 2.1-.9 2.1-2.1V2h3.5c0 .7.1 1.5.3 2.2z" />
    </svg>
  ),
  youtube: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M21.8 7.6a3.2 3.2 0 0 0-2.3-2.3C17.5 5 12 5 12 5s-5.5 0-7.5.3A3.2 3.2 0 0 0 2.2 7.6 33 33 0 0 0 2 12a33 33 0 0 0 .2 4.4 3.2 3.2 0 0 0 2.3 2.3c2 .3 7.5.3 7.5.3s5.5 0 7.5-.3a3.2 3.2 0 0 0 2.3-2.3A33 33 0 0 0 22 12a33 33 0 0 0-.2-4.4zM10 15.2V8.8l5.7 3.2-5.7 3.2z" />
    </svg>
  ),
  facebook: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M14 8.5V7c0-.8.5-1.5 1.5-1.5H17V2h-2.2C12.3 2 11 3.6 11 6v2.5H9V12h2v10h3.5V12H17l.5-3.5H14z" />
    </svg>
  ),
};

// Marquee that scrolls horizontally
function Marquee({ items }) {
  const doubled = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((it, i) => (
          <span key={i} className="marquee-item">
            <span>{it}</span>
            <span className="marquee-dot">◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Placeholder, Monogram, Icon, Marquee, fmtPrice });