// SVG website mockups — one per category, each with its own brand look.
// Sized 400x250 viewBox. Used inside .pl-website-card.

const MOCKUPS = {
  fontanero: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="f-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#0a2540"/><stop offset="1" stopColor="#1e3a5f"/>
        </linearGradient>
        <pattern id="f-grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <circle cx="10" cy="10" r="1" fill="#fff" opacity=".06"/>
        </pattern>
      </defs>
      <rect width="400" height="250" fill="url(#f-bg)"/>
      <rect width="400" height="250" fill="url(#f-grid)"/>
      {/* nav */}
      <rect x="22" y="18" width="92" height="11" rx="2" fill="#3b82f6"/>
      <rect x="240" y="20" width="32" height="7" rx="1" fill="#fff" opacity=".55"/>
      <rect x="280" y="20" width="28" height="7" rx="1" fill="#fff" opacity=".55"/>
      <rect x="316" y="20" width="44" height="7" rx="1" fill="#fff" opacity=".55"/>
      {/* hero text */}
      <text x="22" y="92" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="28" fill="#fff" letterSpacing="-0.5">Tu fontanero</text>
      <text x="22" y="120" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="28" fill="#3b82f6" letterSpacing="-0.5">de confianza 24/7</text>
      <text x="22" y="146" fontFamily="Manrope, sans-serif" fontSize="9" fill="#fff" opacity=".7">Urgencias · Reparaciones · Calderas · Burgos</text>
      {/* CTA + phone */}
      <rect x="22" y="162" width="100" height="26" rx="13" fill="#3b82f6"/>
      <text x="72" y="178" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="9" fill="#fff">PEDIR PRESUPUESTO</text>
      <rect x="130" y="162" width="86" height="26" rx="13" fill="none" stroke="#fff" strokeOpacity=".25"/>
      <text x="173" y="178" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="600" fontSize="9" fill="#fff">📞 947 26 ···</text>
      {/* right: pipe icon collage */}
      <g transform="translate(290, 60)" opacity=".9">
        <circle cx="40" cy="60" r="60" fill="#3b82f6" opacity=".18"/>
        <path d="M20 40 L60 40 L60 80 L80 80" stroke="#60a5fa" strokeWidth="6" fill="none" strokeLinecap="round"/>
        <path d="M30 90 L30 60 L50 60" stroke="#93c5fd" strokeWidth="6" fill="none" strokeLinecap="round"/>
        <circle cx="20" cy="40" r="4" fill="#fff"/>
        <circle cx="80" cy="80" r="4" fill="#fff"/>
        <text x="40" y="115" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fff" opacity=".6">★ 4.8 (128 reseñas)</text>
      </g>
      {/* trust strip bottom */}
      <rect x="0" y="222" width="400" height="28" fill="#000" opacity=".25"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fff" opacity=".6">✓ 15 años exp. · ✓ Sin desplazamiento · ✓ Garantía 2 años</text>
    </svg>
  ),

  dental: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="d-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#f0fdfa"/><stop offset="1" stopColor="#e6fffb"/>
        </linearGradient>
      </defs>
      <rect width="400" height="250" fill="url(#d-bg)"/>
      {/* nav */}
      <text x="22" y="28" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="14" fill="#0f766e" letterSpacing="-0.3">Clínica Aurora</text>
      <rect x="252" y="22" width="28" height="6" rx="1" fill="#0f766e" opacity=".5"/>
      <rect x="288" y="22" width="36" height="6" rx="1" fill="#0f766e" opacity=".5"/>
      <rect x="332" y="14" width="44" height="22" rx="11" fill="#14b8a6"/>
      <text x="354" y="28" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="7" fill="#fff">PEDIR CITA</text>
      {/* hero */}
      <text x="22" y="78" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="22" fill="#0f172a" letterSpacing="-0.4">Tu sonrisa,</text>
      <text x="22" y="103" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="22" fill="#14b8a6" letterSpacing="-0.4">nuestra obsesión.</text>
      <text x="22" y="124" fontFamily="Manrope, sans-serif" fontSize="9" fill="#475569">Primera consulta gratuita · sin compromiso</text>

      {/* tooth illustration */}
      <g transform="translate(265, 80)">
        <ellipse cx="55" cy="55" rx="55" ry="55" fill="#14b8a6" opacity=".08"/>
        <path d="M55 30 C 38 30 28 42 30 60 C 32 78 38 95 45 95 C 48 95 50 88 52 80 C 53 75 55 73 56 73 C 57 73 59 75 60 80 C 62 88 64 95 67 95 C 74 95 80 78 82 60 C 84 42 72 30 55 30 Z" fill="#fff" stroke="#14b8a6" strokeWidth="2"/>
        <circle cx="48" cy="48" r="3" fill="#14b8a6" opacity=".25"/>
      </g>

      {/* services pills */}
      <g transform="translate(22, 150)">
        <rect width="76" height="22" rx="11" fill="#fff" stroke="#0f766e" strokeOpacity=".2"/>
        <text x="38" y="15" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#0f766e">Implantes</text>
        <rect x="84" width="84" height="22" rx="11" fill="#fff" stroke="#0f766e" strokeOpacity=".2"/>
        <text x="126" y="15" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#0f766e">Ortodoncia</text>
        <rect x="176" y="0" width="74" height="22" rx="11" fill="#fff" stroke="#0f766e" strokeOpacity=".2"/>
        <text x="213" y="15" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#0f766e">Estética</text>
      </g>

      <rect x="0" y="222" width="400" height="28" fill="#0f766e"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fff" opacity=".85">★ 4.9 · 287 reseñas Google · Financiación 0% interés</text>
    </svg>
  ),

  abogado: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <rect width="400" height="250" fill="#fafaf9"/>
      {/* serif logo */}
      <text x="22" y="32" fontFamily="Bricolage Grotesque, serif" fontWeight="700" fontSize="16" fill="#1c1917" letterSpacing="0.1em">MÉNDEZ &amp; ASOC.</text>
      <rect x="22" y="38" width="80" height="1.5" fill="#a16207"/>

      <text x="270" y="32" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#44403c">SERVICIOS</text>
      <text x="316" y="32" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#44403c">EQUIPO</text>
      <text x="354" y="32" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#44403c">CONTACTO</text>

      {/* big editorial headline */}
      <text x="22" y="92" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="600" fontSize="24" fill="#1c1917" fontStyle="italic" letterSpacing="-0.4">Defensa laboral</text>
      <text x="22" y="118" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="600" fontSize="24" fill="#1c1917" fontStyle="italic" letterSpacing="-0.4">con resultado.</text>

      <text x="22" y="144" fontFamily="Manrope, sans-serif" fontSize="9" fill="#57534e">+340 despidos impugnados con éxito desde 2008.</text>

      <rect x="22" y="160" width="120" height="30" rx="0" fill="#1c1917"/>
      <text x="82" y="180" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="9" fill="#fafaf9" letterSpacing="0.08em">PEDIR CONSULTA</text>

      {/* right column: scales icon */}
      <g transform="translate(280, 70)" stroke="#a16207" strokeWidth="2" fill="none" strokeLinecap="round">
        <rect x="55" y="0" width="2" height="100" fill="#a16207"/>
        <line x1="20" y1="20" x2="92" y2="20"/>
        <line x1="20" y1="20" x2="10" y2="60"/>
        <line x1="20" y1="20" x2="30" y2="60"/>
        <line x1="92" y1="20" x2="82" y2="60"/>
        <line x1="92" y1="20" x2="102" y2="60"/>
        <ellipse cx="20" cy="60" rx="14" ry="3" fill="#a16207" opacity=".15"/>
        <ellipse cx="92" cy="60" rx="14" ry="3" fill="#a16207" opacity=".15"/>
        <rect x="40" y="100" width="32" height="6" fill="#a16207"/>
      </g>

      {/* press strip */}
      <rect x="0" y="222" width="400" height="28" fill="#1c1917"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="7.5" fill="#fafaf9" opacity=".75" letterSpacing="0.15em">EL PAÍS  ·  EXPANSIÓN  ·  CONFILEGAL  ·  ICAM Nº 87.234</text>
    </svg>
  ),

  restaurante: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="r-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3f0d0d"/><stop offset="1" stopColor="#1a0606"/>
        </linearGradient>
        <radialGradient id="r-glow" cx="0.7" cy="0.5" r="0.7">
          <stop offset="0" stopColor="#dc2626" stopOpacity="0.3"/>
          <stop offset="1" stopColor="transparent"/>
        </radialGradient>
      </defs>
      <rect width="400" height="250" fill="url(#r-bg)"/>
      <rect width="400" height="250" fill="url(#r-glow)"/>

      <text x="22" y="32" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="14" fill="#fbbf24" letterSpacing="0.2em">CASA LARA</text>

      <text x="290" y="28" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#fbbf24" opacity=".8">CARTA</text>
      <text x="320" y="28" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#fbbf24" opacity=".8">RESERVAR</text>
      <text x="358" y="28" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#fbbf24" opacity=".8">EVENTOS</text>

      <text x="22" y="100" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="32" fill="#fff" letterSpacing="-0.5">Cocina de mercado</text>
      <text x="22" y="128" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="400" fontSize="20" fill="#fbbf24" fontStyle="italic">con alma de barrio.</text>

      <text x="22" y="156" fontFamily="Manrope, sans-serif" fontSize="9" fill="#fff" opacity=".7">Reserva tu mesa · menú diario 18€ · finde 35€</text>

      <rect x="22" y="172" width="106" height="30" rx="15" fill="#fbbf24"/>
      <text x="75" y="191" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="9" fill="#3f0d0d" letterSpacing="0.05em">RESERVAR MESA</text>

      {/* plate */}
      <g transform="translate(280, 110)">
        <circle cx="55" cy="55" r="60" fill="#fff" opacity=".06"/>
        <circle cx="55" cy="55" r="46" fill="#fff" opacity=".95"/>
        <circle cx="55" cy="55" r="34" fill="#7c2d12"/>
        <circle cx="45" cy="50" r="6" fill="#fbbf24"/>
        <circle cx="62" cy="55" r="5" fill="#22c55e"/>
        <circle cx="55" cy="65" r="4" fill="#dc2626"/>
        <circle cx="48" cy="62" r="3" fill="#a16207"/>
      </g>

      <rect x="0" y="222" width="400" height="28" fill="#000" opacity=".4"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fff" opacity=".7">★★★★★ Tripadvisor #3 · Calle del Olmo 12 · Bilbao</text>
    </svg>
  ),

  gimnasio: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <rect width="400" height="250" fill="#0a0a0a"/>
      <defs>
        <linearGradient id="g-acc" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#84cc16"/><stop offset="1" stopColor="#22c55e"/>
        </linearGradient>
      </defs>
      {/* diagonal stripe */}
      <polygon points="200,0 400,0 400,250 100,250" fill="url(#g-acc)" opacity=".18"/>
      <polygon points="280,0 400,0 400,250 200,250" fill="url(#g-acc)" opacity=".25"/>

      <text x="22" y="32" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="14" fill="#84cc16" letterSpacing="0.15em">IRONHOUSE</text>

      <text x="252" y="28" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="700" fill="#fff" opacity=".7" letterSpacing="0.1em">CLASES</text>
      <text x="288" y="28" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="700" fill="#fff" opacity=".7" letterSpacing="0.1em">TARIFAS</text>
      <text x="332" y="28" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="700" fill="#fff" opacity=".7" letterSpacing="0.1em">CONTACTO</text>

      <text x="22" y="88" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="32" fill="#fff" letterSpacing="-0.7">NO ES UN GIMNASIO.</text>
      <text x="22" y="116" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="32" fill="#84cc16" letterSpacing="-0.7">ES UN PACTO.</text>

      <text x="22" y="142" fontFamily="Manrope, sans-serif" fontSize="9" fill="#fff" opacity=".55">Cambia tu cuerpo en 90 días o te devolvemos cada euro.</text>

      <rect x="22" y="158" width="98" height="32" rx="0" fill="#84cc16"/>
      <text x="71" y="178" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="9" fill="#0a0a0a" letterSpacing="0.1em">EMPIEZA HOY</text>
      <text x="22" y="206" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fff" opacity=".4">Sin matrícula · Cancela cuando quieras</text>

      {/* dumbbell */}
      <g transform="translate(265, 100)" fill="#fff" opacity=".95">
        <rect x="10" y="30" width="14" height="40" rx="2"/>
        <rect x="86" y="30" width="14" height="40" rx="2"/>
        <rect x="0" y="20" width="8" height="60" rx="2"/>
        <rect x="102" y="20" width="8" height="60" rx="2"/>
        <rect x="22" y="44" width="66" height="12" rx="1" fill="#84cc16"/>
      </g>

      <rect x="0" y="222" width="400" height="28" fill="#1a1a1a"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="8" fill="#84cc16" letterSpacing="0.1em">⚡ +1.200 SOCIOS · 4 SEDES · ABIERTO 6:00 - 23:00</text>
    </svg>
  ),

  inmobiliaria: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="i-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#fef3e2"/><stop offset="1" stopColor="#fde8c4"/>
        </linearGradient>
      </defs>
      <rect width="400" height="250" fill="url(#i-bg)"/>

      <g>
        <rect x="22" y="18" width="22" height="22" rx="4" fill="#92400e"/>
        <text x="48" y="33" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="13" fill="#451a03">Casas del Sur</text>
      </g>
      <text x="220" y="33" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#451a03">COMPRAR</text>
      <text x="262" y="33" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#451a03">ALQUILAR</text>
      <text x="306" y="33" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#451a03">VENDER</text>
      <text x="345" y="33" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#451a03">EQUIPO</text>

      <text x="22" y="78" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="20" fill="#451a03" letterSpacing="-0.3">Encuentra el hogar</text>
      <text x="22" y="102" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="20" fill="#b45309" letterSpacing="-0.3">que te imaginas.</text>

      {/* search bar */}
      <rect x="22" y="118" width="240" height="30" rx="15" fill="#fff" stroke="#fbbf24" strokeOpacity=".4"/>
      <text x="36" y="138" fontFamily="Manrope, sans-serif" fontSize="9" fill="#92400e">Sevilla, Triana...</text>
      <rect x="208" y="121" width="52" height="24" rx="12" fill="#b45309"/>
      <text x="234" y="137" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="8" fill="#fff">BUSCAR</text>

      {/* property card */}
      <g transform="translate(270, 60)">
        <rect width="115" height="130" rx="10" fill="#fff" stroke="#fbbf24" strokeOpacity=".25"/>
        <rect width="115" height="70" rx="10" fill="#fb923c"/>
        <polygon points="20,55 40,40 70,55" fill="#fff" opacity=".4"/>
        <polygon points="60,55 85,35 100,55" fill="#fff" opacity=".5"/>
        <text x="10" y="88" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="9" fill="#451a03">Chalet Aljarafe</text>
        <text x="10" y="100" fontFamily="Manrope, sans-serif" fontSize="7" fill="#92400e">320 m² · 4 hab · piscina</text>
        <text x="10" y="120" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="700" fontSize="14" fill="#b45309" letterSpacing="-0.3">485.000€</text>
      </g>

      {/* row of mini chips */}
      <g transform="translate(22, 168)">
        <rect width="56" height="20" rx="10" fill="#fff" stroke="#b45309" strokeOpacity=".2"/>
        <text x="28" y="14" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="7.5" fontWeight="600" fill="#92400e">Chalet</text>
        <rect x="62" width="42" height="20" rx="10" fill="#fff" stroke="#b45309" strokeOpacity=".2"/>
        <text x="83" y="14" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="7.5" fontWeight="600" fill="#92400e">Piso</text>
        <rect x="110" width="70" height="20" rx="10" fill="#fff" stroke="#b45309" strokeOpacity=".2"/>
        <text x="145" y="14" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="7.5" fontWeight="600" fill="#92400e">Obra nueva</text>
        <rect x="186" width="60" height="20" rx="10" fill="#fff" stroke="#b45309" strokeOpacity=".2"/>
        <text x="216" y="14" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="7.5" fontWeight="600" fill="#92400e">Lujo</text>
      </g>

      <rect x="0" y="222" width="400" height="28" fill="#451a03"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fef3e2" opacity=".85">🏡 412 propiedades · 28 años en Sevilla · Valoración gratis</text>
    </svg>
  ),

  cerrajero: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <rect width="400" height="250" fill="#fef2f2"/>
      <rect x="0" y="0" width="400" height="56" fill="#991b1b"/>

      <text x="22" y="34" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="14" fill="#fff" letterSpacing="0.15em">CERRAJERO 24H</text>
      <rect x="290" y="20" width="90" height="22" rx="11" fill="#fef2f2"/>
      <text x="335" y="34" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="9" fill="#991b1b">📞 LLAMAR YA</text>

      {/* urgency banner */}
      <rect x="22" y="74" width="155" height="22" rx="0" fill="#fef2f2" stroke="#991b1b"/>
      <circle cx="34" cy="85" r="4" fill="#dc2626"/>
      <text x="44" y="89" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="9" fill="#991b1b" letterSpacing="0.05em">DISPONIBLE 24/7</text>

      <text x="22" y="124" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="26" fill="#0c0a09" letterSpacing="-0.6">¿Te has quedado</text>
      <text x="22" y="150" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="26" fill="#991b1b" letterSpacing="-0.6">fuera de casa?</text>

      <text x="22" y="170" fontFamily="Manrope, sans-serif" fontSize="9" fill="#44403c">Llegamos en 20 min. Presupuesto cerrado.</text>

      {/* big CTA */}
      <rect x="22" y="184" width="180" height="34" rx="0" fill="#dc2626"/>
      <text x="112" y="206" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="11" fill="#fff" letterSpacing="0.05em">PRESUPUESTO GRATIS</text>

      {/* key + lock */}
      <g transform="translate(270, 90)">
        <circle cx="65" cy="65" r="65" fill="#991b1b" opacity=".08"/>
        <rect x="40" y="60" width="50" height="40" rx="4" fill="#991b1b"/>
        <path d="M50 60 L50 50 C 50 42 56 38 65 38 C 74 38 80 42 80 50 L 80 60" stroke="#991b1b" strokeWidth="4" fill="none"/>
        <circle cx="65" cy="78" r="4" fill="#fef2f2"/>
        <rect x="63" y="78" width="4" height="10" fill="#fef2f2"/>
      </g>

      <rect x="0" y="222" width="400" height="28" fill="#0c0a09"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fff" opacity=".85">⚡ 20 min máx · ★ 4.9 (462 reseñas) · Madrid centro</text>
    </svg>
  ),

  peluqueria: (
    <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="p-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#fdf2f8"/><stop offset="1" stopColor="#fce7f3"/>
        </linearGradient>
      </defs>
      <rect width="400" height="250" fill="url(#p-bg)"/>

      <text x="22" y="34" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="400" fontStyle="italic" fontSize="20" fill="#831843" letterSpacing="-0.3">Estudio Nora</text>
      <text x="270" y="33" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#831843">SERVICIOS</text>
      <text x="316" y="33" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="600" fill="#831843">EQUIPO</text>
      <rect x="350" y="20" width="32" height="22" rx="11" fill="#831843"/>
      <text x="366" y="34" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="7.5" fill="#fff">RESERVAR</text>

      <text x="22" y="86" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="600" fontSize="26" fill="#0c0a09" letterSpacing="-0.5">Tu pelo,</text>
      <text x="22" y="114" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="400" fontSize="26" fill="#be185d" fontStyle="italic" letterSpacing="-0.5">tu firma.</text>

      <text x="22" y="138" fontFamily="Manrope, sans-serif" fontSize="9" fill="#6b21a8">Color, balayage y peluquería de autor en el barrio de Salamanca.</text>

      <rect x="22" y="156" width="92" height="28" rx="14" fill="#831843"/>
      <text x="68" y="173" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="9" fill="#fff">RESERVAR ONLINE</text>

      {/* portrait */}
      <g transform="translate(285, 60)">
        <circle cx="50" cy="55" r="55" fill="#fbcfe8" opacity=".5"/>
        <ellipse cx="50" cy="60" rx="35" ry="42" fill="#fed7aa"/>
        <path d="M15 40 Q 50 5 85 40 Q 90 75 85 95 Q 60 85 50 95 Q 40 85 15 95 Q 10 75 15 40 Z" fill="#7c2d12"/>
        <circle cx="40" cy="58" r="2" fill="#3f1206"/>
        <circle cx="60" cy="58" r="2" fill="#3f1206"/>
        <path d="M44 75 Q 50 80 56 75" stroke="#be185d" strokeWidth="2" fill="none" strokeLinecap="round"/>
      </g>

      {/* services row */}
      <g transform="translate(22, 200)">
        <text fontFamily="Manrope, sans-serif" fontSize="7.5" fontWeight="700" fill="#6b21a8" letterSpacing="0.06em">CORTE · COLOR · BALAYAGE · KERATINA · NOVIAS</text>
      </g>

      <rect x="0" y="222" width="400" height="28" fill="#831843"/>
      <text x="22" y="240" fontFamily="Manrope, sans-serif" fontSize="8" fill="#fff" opacity=".85">★ 4.95 · Goya 47 · Reserva online 24/7</text>
    </svg>
  ),
};

function CategoryMockup({ kind }) {
  return MOCKUPS[kind] || null;
}

window.CategoryMockup = CategoryMockup;
