// Shared JSX used by app/icon.tsx, app/apple-icon.tsx and the per-locale
// opengraph-image.tsx / twitter-image.tsx — keeps the brand badge (the same
// circular "ML" mark used in Navbar) defined in exactly one place.

export function BrandBadge({ size, ringWidth = 3 }: { size: number; ringWidth?: number }) {
  return (
    <div
      style={{
        width: size,
        height: size,
        borderRadius: '50%',
        background: '#FBFAF6',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <div
        style={{
          width: size * 0.8,
          height: size * 0.8,
          borderRadius: '50%',
          border: `${ringWidth}px dashed #2E9C9A`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <span style={{ fontSize: size * 0.36, fontWeight: 800, color: '#123238', letterSpacing: '-1px' }}>ML</span>
      </div>
    </div>
  )
}

export function OgImageContent({ tagline }: { tagline: string }) {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        background: '#123238',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 80,
      }}
    >
      <div style={{ display: 'flex', marginBottom: 40 }}>
        <BrandBadge size={140} />
      </div>
      <div style={{ display: 'flex', fontSize: 64, fontWeight: 800, color: '#FBFAF6' }}>
        <span>marmaris&nbsp;</span>
        <span style={{ color: '#2E9C9A' }}>local</span>
      </div>
      <div style={{ display: 'flex', fontSize: 28, color: '#EDEEE3', marginTop: 20, textAlign: 'center' }}>
        {tagline}
      </div>
    </div>
  )
}