interface LogoProps {
  /** `white` — pełna biel z cieniem (np. mobile nad zdjęciem / półprzezroczystym paskiem). */
  variant?: 'light' | 'dark' | 'white'
}

export default function Logo({ variant = 'light' }: LogoProps) {
  const color =
    variant === 'dark' ? '#2d5a6d' : variant === 'white' ? '#ffffff' : '#9BBFCC'

  return (
    <div
      className={`flex shrink-0 items-center gap-1 sm:gap-1.5 lg:gap-2 xl:gap-3 ${variant === 'light' || variant === 'white' ? 'drop-shadow-lg' : ''}`}
      style={{
        fontFamily: 'var(--font-cinzel), serif',
        color,
        fontSize: 'clamp(18px, 2.75vw, 36px)',
        letterSpacing: '0.08em',
      }}
      role="img"
      aria-label="Twoja Łódka"
    >
      <span>twoja</span>
      <svg
        viewBox="0 0 38 44"
        width={38}
        height={44}
        className="h-8 w-7 shrink-0 sm:h-9 sm:w-8 lg:h-10 lg:w-9 xl:h-11 xl:w-[38px]"
        aria-hidden
      >
        <line x1={19} y1={4} x2={19} y2={36} stroke={color} strokeWidth={1.5} />
        <path d="M19 5 L4 28 L19 28 Z" fill={color} fillOpacity={0.85} />
        <path d="M19 10 L34 28 L19 28 Z" fill={color} fillOpacity={0.5} />
        <path
          d="M6 36 Q19 40 32 36"
          stroke={color}
          strokeWidth={1.5}
          fill="none"
          strokeLinecap="round"
        />
      </svg>
      <span>łódka</span>
    </div>
  )
}