// Logo.jsx — go logo system
//
// The wordmark in the codebase is just "go" in Fraunces with a terracotta dot.
// We extend it into a small lockup family for the landing page:
//
//   • Wordmark      — "go." (the canonical mark)
//   • Lockup        — wordmark + strapline beneath
//   • Symbol/badge  — a circular pin glyph (for app icon, favicon, social)
//   • Pin           — the wordmark inside a pin shape (alt mark)
//
// Everything is built with HTML/SVG — no images.

function LogoWordmark({ size = 64, color = 'currentColor', accent = 'var(--accent)', style = {} }) {
  // The "go" wordmark — Fraunces with a terracotta dot trailing.
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'baseline',
        fontFamily: 'var(--display)',
        fontWeight: 700,
        fontVariationSettings: '"opsz" 144, "SOFT" 60',
        fontSize: size,
        lineHeight: size * 0.86 + 'px',
        letterSpacing: -size * 0.045,
        color,
        ...style,
      }}
    >
      <span style={{ display: 'inline-block' }}>go</span>
      <span
        style={{
          display: 'inline-block',
          width: size * 0.13,
          height: size * 0.13,
          borderRadius: '50%',
          background: accent,
          marginLeft: size * 0.04,
          transform: `translateY(-${size * 0.04}px)`,
        }}
      />
    </span>
  );
}

function LogoLockup({ size = 64, color = 'currentColor', accent = 'var(--accent)', dark = false }) {
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6 }}>
      <LogoWordmark size={size} color={color} accent={accent} />
      <div
        style={{
          fontFamily: 'var(--display)',
          fontVariationSettings: '"opsz" 144, "SOFT" 100',
          fontStyle: 'italic',
          fontSize: size * 0.18,
          letterSpacing: -size * 0.003,
          color: dark ? 'rgba(255,252,245,0.78)' : 'var(--on-page-soft)',
          lineHeight: 1.2,
        }}
      >
        find your people, nearby
      </div>
    </div>
  );
}

// Tiny — for app bar / nav.
function LogoSmall({ color = 'currentColor', accent = 'var(--accent)' }) {
  return <LogoWordmark size={26} color={color} accent={accent} />;
}

// Symbol — circular pin badge. Reads as both a "g" and a pin drop.
// Used for app icon, social avatar, favicon.
function LogoSymbol({ size = 64, bg = 'var(--accent)', fg = 'var(--on-accent)' }) {
  // Custom letterform — a "g" with a stem hooked into a pin shape.
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 64 64"
      style={{ display: 'block' }}
    >
      <defs>
        <clipPath id={`pin-clip-${size}`}>
          <path d="M32 4C18.5 4 8 14.5 8 28c0 13 14 26 22 31 1.3.8 2.7.8 4 0 8-5 22-18 22-31C56 14.5 45.5 4 32 4Z" />
        </clipPath>
      </defs>
      {/* pin body */}
      <path
        d="M32 4C18.5 4 8 14.5 8 28c0 13 14 26 22 31 1.3.8 2.7.8 4 0 8-5 22-18 22-31C56 14.5 45.5 4 32 4Z"
        fill={bg}
      />
      {/* "g" mark inside */}
      <g clipPath={`url(#pin-clip-${size})`}>
        <text
          x="32"
          y="38"
          textAnchor="middle"
          fontFamily="Fraunces, serif"
          fontSize="34"
          fontWeight="700"
          fontStyle="normal"
          fill={fg}
          style={{ fontVariationSettings: '"opsz" 144, "SOFT" 60' }}
        >
          go
        </text>
      </g>
    </svg>
  );
}

// Round mono mark (alt) — just "g" centered in a circle.
function LogoBadge({ size = 64, bg = 'var(--ink)', fg = 'var(--paper)', accent = 'var(--accent)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block' }}>
      <circle cx="32" cy="32" r="30" fill={bg} />
      <text
        x="32"
        y="44"
        textAnchor="middle"
        fontFamily="Fraunces, serif"
        fontSize="40"
        fontWeight="700"
        fill={fg}
        style={{ fontVariationSettings: '"opsz" 144, "SOFT" 60' }}
      >
        g
      </text>
      <circle cx="46" cy="42" r="3.5" fill={accent} />
    </svg>
  );
}

// Stacked lockup — for posters, t-shirts, app-store hero.
function LogoStacked({ size = 80, color = 'currentColor', accent = 'var(--accent)' }) {
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
      <div
        style={{
          fontFamily: 'var(--sans)',
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color,
          opacity: 0.7,
          whiteSpace: 'nowrap',
        }}
      >
        ✦ est · london · 2026 ✦
      </div>
      <LogoWordmark size={size} color={color} accent={accent} />
      <div
        style={{
          fontFamily: 'var(--display)',
          fontVariationSettings: '"opsz" 144, "SOFT" 100',
          fontStyle: 'italic',
          fontSize: size * 0.16,
          color,
          opacity: 0.7,
        }}
      >
        find your people
      </div>
    </div>
  );
}

Object.assign(window, { LogoWordmark, LogoLockup, LogoSmall, LogoSymbol, LogoBadge, LogoStacked });