// hl-mark.jsx — Hale Lumina monogram component.
// Variants:
//   "refined" (default, brand spec #1): two black verticals share a stroke
//     between H and L; brass crossbar joins them mid-height (H's bar) and a
//     brass foot extends right at the baseline (L's foot). Architectural,
//     restrained, the recommended brand direction.
//   "doorway": tall H with brass crossbar, smaller L offset right and below.
//   "lockup":  H and L sit side-by-side with a thin brass crossbar between.

function HLMark({ size = 56, variant = "refined", inkColor = "currentColor", brassColor = "var(--brass)", strokeWidth = null }) {
  const [hovered, setHovered] = React.useState(false);
  const sw = strokeWidth ?? Math.max(1.4, size * 0.04);
  const brassW = Math.max(1, size * 0.025);

  if (variant === "refined") {
    // Brand spec #1 — refined architectural monogram.
    // viewBox 56 units; verticals at 16 and 32, brass crossbar mid-height
    // joins them, brass L-foot extends from x=32 to x=46 at baseline.
    const vb = 56;
    return (
      <svg
        width={size} height={size} viewBox={`0 0 ${vb} ${vb}`}
        fill="none" aria-label="Hale Lumina"
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{ display: "inline-block", flexShrink: 0, cursor: "pointer" }}
      >
        {/* Soft brass glow under the crossbar on hover */}
        <line
          x1="16" y1="28" x2="32" y2="28"
          stroke={brassColor} strokeWidth={brassW * 5} strokeLinecap="round"
          style={{
            opacity: hovered ? 0.32 : 0,
            transition: 'opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1)',
            filter: 'blur(1.2px)'
          }}
        />
        {/* H left vertical */}
        <line x1="16" y1="8" x2="16" y2="48" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
        {/* Shared right vertical (H's right stroke + L's stroke) */}
        <line x1="32" y1="8" x2="32" y2="48" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
        {/* Brass H crossbar — between the two verticals */}
        <line
          x1="16" y1="28" x2="32" y2="28"
          stroke={brassColor} strokeWidth={brassW * (hovered ? 2.6 : 2.0)} strokeLinecap="square"
          style={{ transition: 'stroke-width 0.5s cubic-bezier(0.22, 1, 0.36, 1)' }}
        />
        {/* Brass L foot — extends right from the bottom of the shared vertical */}
        <line
          x1="32" y1="48" x2={hovered ? "50" : "46"} y2="48"
          stroke={brassColor} strokeWidth={brassW * (hovered ? 2.6 : 2.0)} strokeLinecap="square"
          style={{ transition: 'all 0.5s cubic-bezier(0.22, 1, 0.36, 1)' }}
        />
      </svg>
    );
  }

  if (variant === "lockup") {
    // H | L  — both letters share baseline, brass horizontal connector at mid-height
    const vb = 56;
    return (
      <svg
        width={size} height={size} viewBox={`0 0 ${vb} ${vb}`}
        fill="none" aria-label="Hale Lumina"
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{ display: "inline-block", flexShrink: 0, cursor: "pointer" }}
      >
        {/* H: two verticals + crossbar (crossbar is brass) */}
        <line x1="10" y1="8" x2="10" y2="48" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
        <line x1="24" y1="8" x2="24" y2="48" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
        {/* L: tall vertical, no foot — minimal */}
        <line x1="40" y1="8" x2="40" y2="48" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
        <line x1="40" y1="48" x2="50" y2="48" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
        {/* Brass crossbar glow behind */}
        <line 
          x1="10" y1="28" x2={hovered ? "42" : "24"} y2="28" 
          stroke={brassColor} strokeWidth={brassW * 4.5} strokeLinecap="round" 
          style={{ 
            opacity: hovered ? 0.35 : 0, 
            transition: 'all 0.5s cubic-bezier(0.22, 1, 0.36, 1)',
            filter: 'blur(1px)' 
          }} 
        />
        {/* Brass crossbar — connects H's two verticals and continues toward L */}
        <line 
          x1="10" y1="28" x2={hovered ? "28" : "24"} y2="28" 
          stroke={brassColor} strokeWidth={brassW * (hovered ? 2.2 : 1.6)} strokeLinecap="square" 
          style={{ transition: 'all 0.5s cubic-bezier(0.22, 1, 0.36, 1)' }}
        />
        <line 
          x1="32" y1="28" x2="40" y2="28" 
          stroke={brassColor} strokeWidth={brassW * 1.6} strokeLinecap="square" 
          style={{ transition: 'all 0.5s cubic-bezier(0.22, 1, 0.36, 1)' }}
        />
      </svg>
    );
  }

  // "doorway" variant — vertical H | L with brass underline crossbar
  const vb = 56;
  return (
    <svg
      width={size} height={size} viewBox={`0 0 ${vb} ${vb}`}
      fill="none" aria-label="Hale Lumina"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ display: "inline-block", flexShrink: 0, cursor: "pointer" }}
    >
      {/* Tall H: two verticals + brass crossbar */}
      <line x1="14" y1="6" x2="14" y2="50" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
      <line x1="28" y1="6" x2="28" y2="50" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
      {/* Glow path under crossbar */}
      <line 
        x1="14" y1="26" x2={hovered ? "36" : "28"} y2="26" 
        stroke={brassColor} strokeWidth={brassW * 5} strokeLinecap="round" 
        style={{ 
          opacity: hovered ? 0.35 : 0, 
          transition: 'all 0.5s cubic-bezier(0.22, 1, 0.36, 1)',
          filter: 'blur(1px)' 
        }} 
      />
      {/* Brass crossbar line */}
      <line 
        x1="14" y1="26" x2={hovered ? "34" : "28"} y2="26" 
        stroke={brassColor} strokeWidth={brassW * (hovered ? 2.4 : 1.8)} strokeLinecap="square" 
        style={{ transition: 'all 0.5s cubic-bezier(0.22, 1, 0.36, 1)' }}
      />
      {/* L (smaller, lower) */}
      <line x1="40" y1="20" x2="40" y2="50" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
      <line x1="40" y1="50" x2="50" y2="50" stroke={inkColor} strokeWidth={sw} strokeLinecap="square" />
    </svg>
  );
}

// Wordmark — wide-tracked HALE LUMINA. Defaults to the brand-spec serif
// (Cormorant via --f-display). Pass `serif={false}` for the legacy sans-serif.
function HLWordmark({ size = 14, color = "currentColor", tracking = "0.34em", serif = true }) {
  return (
    <span
      style={{
        fontFamily: serif ? 'var(--f-display)' : 'var(--f-body)',
        fontSize: size,
        letterSpacing: tracking,
        textTransform: 'uppercase',
        fontWeight: serif ? 400 : 500,
        color,
        whiteSpace: 'nowrap',
      }}
    >
      Hale Lumina
    </span>
  );
}

Object.assign(window, { HLMark, HLWordmark });