// Wordmark — basket icon + EVERYDAY WORKS in Archivo Black. Uses the real
// basket PNG; the wordmark text is set in Archivo Black to match the lockup.

function BasketLogo({ size = 56, white = false }) {
  return (
    <img
      src="assets/basket-mark.png"
      alt="Everyday Works"
      style={{ width: size, height: size, display: "block" }}
    />
  );
}

function Wordmark({ scale = 1, color }) {
  // Two-tone wordmark: EVERYDAY in sea green, WORKS in charcoal — matches
  // the real horizontal lockup. Single-color override available for dark bgs.
  const w = (txt, c) => (
    <span style={{
      fontFamily: "var(--font-wordmark)",
      fontSize: `${28 * scale}px`,
      letterSpacing: "-0.01em",
      lineHeight: 0.85,
      color: color || c,
      textTransform: "uppercase",
    }}>{txt}</span>
  );
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 12 * scale,
    }}>
      <BasketLogo size={42 * scale} />
      <span style={{ display: "inline-flex", alignItems: "baseline", gap: `${6 * scale}px` }}>
        {w("EVERYDAY", "var(--c-sea-green)")}
        {w("WORKS", "var(--c-charcoal)")}
      </span>
    </div>
  );
}

window.Wordmark = Wordmark;
window.BasketLogo = BasketLogo;