/* Grippy Brandmark — refined monogram.
   A confident filled chip with a geometric "G" letterform — clean, premium,
   no busy concentric arcs, no animation, just a quiet upward tick that
   nods to forward motion and signal. */

const GrippyMark = ({ size = 34, tone = 'flame', radius = 9 }) => {
  // tone: 'flame' = flame chip + white G | 'ink' = ink chip + flame G | 'outline' = transparent + flame G
  const id = React.useId();
  const chip = tone === 'flame' ? `url(#chip-${id})`
             : tone === 'ink'   ? '#0E0E0E'
             :                    'transparent';
  const stroke = tone === 'flame' ? '#FFFFFF' : '#FF5736';
  const chipStroke = tone === 'outline' ? '#FF5736' : 'none';

  return (
    <span className="relative inline-block align-middle" style={{ width: size, height: size }}>
      <svg viewBox="0 0 40 40" width={size} height={size} className="block" aria-label="Grippy">
        <defs>
          <linearGradient id={`chip-${id}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%"   stopColor="#FF7050"/>
            <stop offset="55%"  stopColor="#FF5736"/>
            <stop offset="100%" stopColor="#D9421C"/>
          </linearGradient>
        </defs>

        {/* Chip */}
        <rect
          x="0.75" y="0.75" width="38.5" height="38.5"
          rx={radius} ry={radius}
          fill={chip}
          stroke={chipStroke}
          strokeWidth={tone === 'outline' ? 1.5 : 0}
        />

        {/* Geometric "G" — open arc + crossbar + subtle upward serif at the tail.
            translate(-1.75) optically centers the glyph: the arc's mass sits left
            of the chord, so the raw path reads right-shifted inside the chip. */}
        <g fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" transform="translate(-1.75 0)">
          {/* Main G arc: starts top-right, swings around, ends mid-right */}
          <path d="M 28.5 13.5 A 8.5 8.5 0 1 0 28.5 26.5"/>
          {/* Crossbar */}
          <path d="M 22 21.5 L 28.5 21.5"/>
          {/* Inner spark — quiet tick that gives the mark its identity */}
          <path d="M 28.5 21.5 L 28.5 26.5"/>
        </g>
      </svg>
    </span>
  );
};

/* Globe glyph — replaces the "O" in "Code".
   Outline + equator + meridian. Sized below cap-height so a wireframe circle
   reads the same visual weight as a filled "O" beside flat-topped letters. */
const GlobeO = ({ className = '' }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2.2"
    strokeLinecap="round"
    aria-hidden="true"
    className={`inline-block ${className}`}
    style={{ width: '0.78em', height: '0.78em', verticalAlign: '-0.04em', margin: '0 0.03em' }}
  >
    <circle cx="12" cy="12" r="9.6" />
    {/* Equator — a flattened ellipse */}
    <ellipse cx="12" cy="12" rx="9.6" ry="3.4" />
    {/* Prime meridian */}
    <path d="M12 2.4 V 21.6" />
  </svg>
);

/* Wordmark — "GRIPPY CODE" in caps (B148, Mike), with the "O" in
   "CODE" rendered as a globe glyph. */
const GrippyWordmark = ({ suffix = 'CODE', size = 'md', showSuffix = true, tone = 'light' }) => {
  const fontSize = size === 'lg' ? 'text-[22px]'
                 : size === 'sm' ? 'text-[14px]'
                 : 'text-[18px]';
  const main   = tone === 'dark' ? 'text-black' : 'text-white';
  const accent = tone === 'dark' ? 'text-black' : 'text-flame';

  // Split the suffix on the first uppercase O so we can swap a glyph in.
  // Falls back to plain text if there's no O.
  const renderSuffix = () => {
    const i = suffix.indexOf('o');
    const j = suffix.indexOf('O');
    const idx = j >= 0 ? j : i;
    if (idx < 0) return suffix;
    const before = suffix.slice(0, idx);
    const after  = suffix.slice(idx + 1);
    return (
      <span className={accent}>
        {before}<GlobeO />{after}
      </span>
    );
  };

  return (
    <span className={`inline-flex items-baseline gap-[0.28em] select-none font-semibold tracking-[0.04em] leading-none ${fontSize}`}>
      <span className={main}>GRIPPY</span>
      {showSuffix && renderSuffix()}
    </span>
  );
};

const GrippyLogo = ({ suffix = 'CODE', size = 32, wordmarkSize = 'md', tone = 'flame' }) => (
  <span className="inline-flex items-center gap-2.5">
    <GrippyMark size={size} tone={tone}/>
    <GrippyWordmark suffix={suffix} size={wordmarkSize}/>
  </span>
);

Object.assign(window, { GrippyMark, GrippyWordmark, GrippyLogo, GlobeO });