// FRIDAY SELECT SHOP — SVG logo recreation matching the brand mark
const FridayLogo = ({ size = 28, color = 'currentColor', withTag = true }) => {
  const h = size;
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1, gap: 2 }}>
      <svg
        viewBox="0 0 320 80" height={h} style={{ display: 'block', overflow: 'visible' }}
        xmlns="http://www.w3.org/2000/svg" aria-label="FRIDAY"
      >
        {/* orbit ring */}
        <ellipse cx="160" cy="46" rx="150" ry="18"
          fill="none" stroke={color} strokeWidth="2.4"
          transform="rotate(-6 160 46)" />
        {/* four-point star */}
        <path d="M 200 6 L 205 20 L 219 25 L 205 30 L 200 44 L 195 30 L 181 25 L 195 20 Z" fill={color} />
        {/* wordmark */}
        <text x="160" y="58" textAnchor="middle"
          fill={color}
          style={{
            fontFamily: "'Space Grotesk', system-ui, sans-serif",
            fontWeight: 800, fontStyle: 'italic',
            fontSize: '56px', letterSpacing: '-0.02em',
            paintOrder: 'stroke fill',
            stroke: color, strokeWidth: '0.5px',
          }}>FRIDAY</text>
      </svg>
      {withTag && (
        <div style={{
          fontFamily: 'Space Grotesk, sans-serif', fontSize: Math.max(7, h * 0.22),
          letterSpacing: '0.32em', color, marginTop: 1, fontWeight: 500,
          whiteSpace: 'nowrap'
        }}>
          SELECT SHOP
        </div>
      )}
    </div>
  );
};

window.FridayLogo = FridayLogo;