// logo.jsx — Logo components matching the shop signage
const Logo = ({ className = '', style = {} }) => (
  <svg className={className} style={style} viewBox="0 0 560 140" fill="none" preserveAspectRatio="xMinYMid meet">
    <text x="0" y="70" fontFamily="'Bebas Neue', Impact, sans-serif" fontSize="64" letterSpacing="3" fill="currentColor">HOUSE DES</text>
    <text x="300" y="102" fontFamily="'Allura', cursive" fontSize="82" fontStyle="italic" fill="currentColor">Barbers</text>
  </svg>
);

const LogoMark = ({ size = 44 }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
    <defs>
      <linearGradient id="lm-g" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="#e8c78a"/>
        <stop offset="1" stopColor="#8a6d3a"/>
      </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="47" stroke="url(#lm-g)" strokeWidth="1.2" fill="none"/>
    <circle cx="50" cy="50" r="40" stroke="url(#lm-g)" strokeWidth="0.4" fill="none" opacity="0.4"/>
    {/* Crossed razor + scissors */}
    <g transform="translate(50 50)" stroke="url(#lm-g)" strokeWidth="1.8" strokeLinecap="round" fill="none">
      <path d="M -22 -14 L 22 18"/>
      <rect x="-28" y="-18" width="8" height="8" transform="rotate(-38 -24 -14)" fill="url(#lm-g)"/>
      <path d="M 22 -14 L -22 18"/>
      <circle cx="-22" cy="18" r="4.5"/>
      <circle cx="-11" cy="18" r="4.5"/>
    </g>
    <text x="50" y="90" textAnchor="middle" fontFamily="'Bebas Neue', sans-serif" fontSize="6" letterSpacing="2" fill="url(#lm-g)">EST · WUPPERTAL</text>
  </svg>
);

// Icons
const Ic = {
  phone: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  pin: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  clock: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>,
  ig: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>,
  fb: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>,
  wa: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>,
  arrow: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  check: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg>,
  scissors: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"/></svg>,
  star: <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>,
};

Object.assign(window, { Logo, LogoMark, Ic });
