// Shared brand marks + placeholders used across all three directions.

// Trident logo — geometric, restrained. Place in a colored span; `currentColor` drives stroke.
function TridentMark({ size = 32, stroke = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40"
         fill="none" stroke="currentColor" strokeWidth={stroke}
         strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      {/* center prong */}
      <line x1="20" y1="3"  x2="20" y2="22" />
      <path d="M16 7 L20 3 L24 7" />
      {/* side prongs */}
      <path d="M9 8 Q 9 18 14 22" />
      <path d="M31 8 Q 31 18 26 22" />
      <path d="M7 6 L9 8 L11 6" />
      <path d="M29 6 L31 8 L33 6" />
      {/* base sweep */}
      <path d="M12 26 Q 20 32 28 26" />
      <line x1="20" y1="22" x2="20" y2="30" />
      <line x1="16" y1="35" x2="24" y2="35" />
    </svg>
  );
}

// Compass rose — used as ornamental flourish.
function CompassRose({ size = 48, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64"
         fill="none" stroke="currentColor" strokeWidth="1" style={style} aria-hidden>
      <circle cx="32" cy="32" r="26" opacity="0.4" />
      <circle cx="32" cy="32" r="20" opacity="0.6" />
      <line x1="32" y1="4"  x2="32" y2="60" />
      <line x1="4"  y1="32" x2="60" y2="32" />
      <polygon points="32,8 28,32 32,28 36,32" fill="currentColor" />
      <polygon points="32,56 28,32 32,36 36,32" fill="currentColor" opacity="0.6" />
      <polygon points="8,32 32,28 28,32 32,36" fill="currentColor" opacity="0.5" />
      <polygon points="56,32 32,28 36,32 32,36" fill="currentColor" opacity="0.5" />
      <circle cx="32" cy="32" r="2" fill="currentColor" />
    </svg>
  );
}

// Greek-key meander band — classical ornamental rule.
function GreekKeyBand({ color = '#C9A961', height = 22, opacity = 0.55 }) {
  const unit = 16;
  const pattern = (
    <pattern id="gk-pattern" width={unit * 2} height={unit} patternUnits="userSpaceOnUse">
      <path d={`M0 ${unit - 1} V 3 H ${unit * 2 - 3} V ${unit - 5} H 5 V 7 H ${unit * 2 - 7}`}
            fill="none" stroke={color} strokeWidth="1" opacity={opacity} />
    </pattern>
  );
  return (
    <svg width="100%" height={height} aria-hidden style={{ display: 'block' }}>
      <defs>{pattern}</defs>
      <rect width="100%" height={height} fill="url(#gk-pattern)" />
    </svg>
  );
}

// Cinematic photo placeholder — striped, with monospace label.
function ImagePlaceholder({ ratio = '16/9', label = 'cinematic placeholder', tone = 'navy' }) {
  const palette = tone === 'cream'
    ? { bg: '#1A2B3F', stripe: '#0A1929', text: '#C7A858' }
    : tone === 'light'
    ? { bg: '#E8E2D2', stripe: '#D8D1BC', text: '#6E5A1E' }
    : { bg: '#112338', stripe: '#0B1828', text: '#C9A961' };
  return (
    <div style={{
      width: '100%', aspectRatio: ratio,
      background: `repeating-linear-gradient(135deg, ${palette.bg} 0 10px, ${palette.stripe} 10px 11px)`,
      position: 'relative',
      borderTop: '1px solid rgba(255,255,255,0.04)',
      borderBottom: '1px solid rgba(255,255,255,0.04)',
    }}>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        alignItems: 'center', justifyContent: 'center',
        fontFamily: '"JetBrains Mono", "IBM Plex Mono", monospace',
        fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
        color: palette.text, opacity: 0.7,
      }}>
        [ photo · {label} ]
      </div>
      <div style={{ position: 'absolute', top: 12, left: 14, fontFamily: '"JetBrains Mono", monospace',
                     fontSize: 10, color: palette.text, opacity: 0.55, letterSpacing: '0.08em' }}>
        IMG · 16:9 · DROP-IN
      </div>
    </div>
  );
}

// PortCall.ai anchor mark: gold anchor body, teal heartbeat waveform across the
// stock, Greek-key meander inside the top ring. Two-color (props let callers
// theme it on dark or light backgrounds).
function AnchorMark({ size = 32, gold = '#D4B36A', teal = '#2DD4BF', stroke = 2 }) {
  const ringR = 5;
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none"
         xmlns="http://www.w3.org/2000/svg" aria-label="PortCall.ai anchor mark">
      {/* top ring with greek-key meander */}
      <circle cx="32" cy="10" r={ringR + 1.5} fill="none" stroke={gold} strokeWidth={stroke - 0.4} />
      <circle cx="32" cy="10" r="2" fill={gold} />
      {/* ring spokes — evoke the meander */}
      {[0, 45, 90, 135, 180, 225, 270, 315].map(a => (
        <line key={a}
              x1={32 + Math.cos(a * Math.PI / 180) * (ringR - 1)}
              y1={10 + Math.sin(a * Math.PI / 180) * (ringR - 1)}
              x2={32 + Math.cos(a * Math.PI / 180) * (ringR + 1.5)}
              y2={10 + Math.sin(a * Math.PI / 180) * (ringR + 1.5)}
              stroke={gold} strokeWidth="0.8" />
      ))}
      {/* horizontal stock (top bar under ring) */}
      <line x1="20" y1="19" x2="44" y2="19" stroke={gold} strokeWidth={stroke + 0.4} strokeLinecap="square" />
      {/* vertical shank, broken so the waveform sits over it */}
      <line x1="32" y1="15" x2="32" y2="22" stroke={gold} strokeWidth={stroke + 0.4} strokeLinecap="round" />
      <line x1="32" y1="30" x2="32" y2="48" stroke={gold} strokeWidth={stroke + 0.4} strokeLinecap="round" />
      {/* curved arms / flukes — traditional anchor bottom */}
      <path d="M 14 38 Q 14 50 28 52 L 31 47 L 26 46 Q 19 44 19 36 Z" fill={gold} />
      <path d="M 50 38 Q 50 50 36 52 L 33 47 L 38 46 Q 45 44 45 36 Z" fill={gold} />
      <line x1="14" y1="38" x2="10" y2="34" stroke={gold} strokeWidth={stroke - 0.2} strokeLinecap="round" />
      <line x1="50" y1="38" x2="54" y2="34" stroke={gold} strokeWidth={stroke - 0.2} strokeLinecap="round" />
      {/* central spike at base */}
      <path d="M 28 50 L 32 56 L 36 50 Z" fill={gold} />
      {/* teal heartbeat / waveform across the stock area */}
      <path d="M 14 26 L 22 26 L 26 22 L 30 30 L 34 18 L 38 30 L 42 26 L 50 26"
            stroke={teal} strokeWidth={stroke - 0.2} fill="none"
            strokeLinecap="round" strokeLinejoin="round" />
      {/* waveform end nodes */}
      <circle cx="14" cy="26" r="1.4" fill={teal} />
      <circle cx="50" cy="26" r="1.4" fill={teal} />
      <circle cx="32" cy="26" r="1.8" fill={teal} />
    </svg>
  );
}

// PortCall.ai full wordmark lockup — anchor + "PortCall" (gold) + ".ai" (teal).
function PortCallLockup({ height = 28, gold = '#D4B36A', teal = '#2DD4BF', fontFamily }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: height * 0.36,
                    lineHeight: 1 }}>
      <AnchorMark size={height * 1.25} gold={gold} teal={teal} stroke={2.2} />
      <span style={{
        fontFamily: fontFamily || '"Cormorant Garamond", "Newsreader", serif',
        fontWeight: 500, fontSize: height,
        letterSpacing: '-0.005em',
        backgroundImage: `linear-gradient(180deg, ${gold} 0%, #E8D096 50%, ${gold} 100%)`,
        WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        WebkitTextFillColor: 'transparent',
      }}>
        PortCall<span style={{
          backgroundImage: `linear-gradient(180deg, ${teal} 0%, #5FE8D5 100%)`,
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          WebkitTextFillColor: 'transparent',
        }}>.ai</span>
      </span>
    </span>
  );
}

Object.assign(window, {
  TridentMark, AnchorMark, PortCallLockup, CompassRose, GreekKeyBand, ImagePlaceholder,
});