/* Hank — six logo options + brand tokens */

const HANK_TOKENS = {
  // Refined accent — the "Hank green": deep, warm, dependable, slightly aged
  ink: "#161514",
  paper: "#F5EFE3",
  paperDeep: "#EDE5D2",
  paperWarm: "#FAF5EA",
  green: "#2C4A3A",
  greenDeep: "#1A3025",
  greenBright: "#52A87A",
  rust: "#C2532A",
  sky: "#3B6F8C",
};

/* ----- 6 Logo / monogram options for Hank ----- */

function HankLogoA({ size = 140, color = HANK_TOKENS.ink, sw = 8 }) {
  // A · Bridged H — crossbar arcs slightly. The most "human" of the options.
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M 24 18 L 24 82"/>
      <path d="M 76 18 L 76 82"/>
      <path d="M 24 50 Q 50 36 76 50"/>
    </svg>
  );
}

function HankLogoB({ size = 140, color = HANK_TOKENS.ink, sw = 8 }) {
  // B · Geometric H — straight crossbar, a slab. Most institutional.
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M 22 18 L 22 82"/>
      <path d="M 78 18 L 78 82"/>
      <path d="M 22 50 L 78 50"/>
    </svg>
  );
}

function HankLogoC({ size = 140, color = HANK_TOKENS.ink }) {
  // C · Filled H in a softened square — badge / app-icon native
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill={color}>
      <rect x="6" y="6" width="88" height="88" rx="22"/>
      <path d="M 32 24 L 32 76 L 42 76 L 42 56 L 58 56 L 58 76 L 68 76 L 68 24 L 58 24 L 58 46 L 42 46 L 42 24 Z" fill={HANK_TOKENS.paper}/>
    </svg>
  );
}

function HankLogoD({ size = 140, color = HANK_TOKENS.ink, sw = 7 }) {
  // D · H as a doorway — top arches, like a porch entrance
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M 24 82 L 24 36 Q 24 22 36 22"/>
      <path d="M 76 82 L 76 36 Q 76 22 64 22"/>
      <path d="M 24 54 L 76 54"/>
    </svg>
  );
}

function HankLogoE({ size = 140, color = HANK_TOKENS.ink, sw = 7 }) {
  // E · Two posts + handshake arc — the "I know a guy" mark
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M 24 22 L 24 82"/>
      <path d="M 76 22 L 76 82"/>
      <path d="M 24 50 Q 38 62 50 50 Q 62 38 76 50"/>
    </svg>
  );
}

function HankLogoF({ size = 140, color = HANK_TOKENS.ink, sw = 8 }) {
  // F · Workshirt patch — H inside an oval name-tag
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <ellipse cx="50" cy="50" rx="38" ry="30"/>
      <path d="M 38 36 L 38 64"/>
      <path d="M 62 36 L 62 64"/>
      <path d="M 38 50 L 62 50"/>
    </svg>
  );
}

const HANK_LOGOS = [
  { id: "A", name: "Bridged H",       Mark: HankLogoA, sub: "Crossbar arcs slightly — the bridge between you and the right person." },
  { id: "B", name: "Geometric H",     Mark: HankLogoB, sub: "Straight crossbar, structural. Most institutional, scales cleanest." },
  { id: "C", name: "Badge",           Mark: HankLogoC, sub: "Filled H in a softened square. App-icon native, instant recognition." },
  { id: "D", name: "Doorway",         Mark: HankLogoD, sub: "Two arched posts — the porch entrance metaphor, warmest of the set." },
  { id: "E", name: "Handshake",       Mark: HankLogoE, sub: "Two posts joined by a handshake arc. The 'I know a guy' mark." },
  { id: "F", name: "Workshirt patch", Mark: HankLogoF, sub: "Oval name-tag. Embroidery-ready, blue-collar-American." },
];

/* Hank wordmark ­— subtle, confident, lowercase with a period */
function HankWordmark({ size = 80, color = HANK_TOKENS.ink, dot = true }) {
  return (
    <span style={{
      fontFamily: "'Inter Display', 'Inter', sans-serif",
      fontWeight: 600,
      fontSize: size,
      letterSpacing: "-0.04em",
      color,
      lineHeight: 0.9,
      display: "inline-block",
    }}>
      hank{dot ? "." : ""}
    </span>
  );
}

Object.assign(window, {
  HANK_TOKENS, HANK_LOGOS, HankWordmark,
  HankLogoA, HankLogoB, HankLogoC, HankLogoD, HankLogoE, HankLogoF,
});