// Industries.jsx — 4 segmentos con mockups SVG
const Industries = () => {
  const ClinicaSVG = () => (
    <svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="cg1" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stopColor="#0D1B2A"/><stop offset="1" stopColor="#1a2f47"/></linearGradient>
      </defs>
      <rect width="320" height="240" fill="url(#cg1)"/>
      {/* phone in clinic */}
      <rect x="100" y="32" width="120" height="200" rx="20" fill="#0a1522" stroke="#2a3a4f" strokeWidth="2"/>
      <rect x="108" y="40" width="104" height="184" rx="14" fill="#122438"/>
      <rect x="120" y="56" width="56" height="6" rx="3" fill="#2ECC71"/>
      <rect x="120" y="68" width="40" height="4" rx="2" fill="#9aa3af"/>
      <rect x="118" y="86" width="80" height="22" rx="8" fill="rgba(255,255,255,0.06)"/>
      <rect x="124" y="92" width="68" height="3" rx="1.5" fill="#cfd6e0"/>
      <rect x="124" y="99" width="52" height="3" rx="1.5" fill="#cfd6e0" opacity=".7"/>
      <rect x="138" y="116" width="62" height="22" rx="8" fill="#2ECC71"/>
      <rect x="144" y="122" width="48" height="3" rx="1.5" fill="#073d1f"/>
      <rect x="144" y="129" width="34" height="3" rx="1.5" fill="#073d1f" opacity=".8"/>
      <rect x="118" y="146" width="84" height="40" rx="8" fill="rgba(255,255,255,0.06)"/>
      <rect x="124" y="154" width="72" height="3" rx="1.5" fill="#cfd6e0"/>
      <rect x="124" y="161" width="60" height="3" rx="1.5" fill="#cfd6e0" opacity=".7"/>
      <rect x="124" y="172" width="40" height="8" rx="2" fill="#2ECC71"/>
      {/* tooth icon floating */}
      <circle cx="58" cy="78" r="22" fill="rgba(46,204,113,0.16)"/>
      <path d="M50,68 Q58,60 66,68 Q70,78 64,90 Q58,84 52,90 Q46,78 50,68 Z" fill="#2ECC71"/>
      <circle cx="262" cy="170" r="18" fill="rgba(21,87,255,0.20)"/>
      <path d="M255,170 l5,5 l10,-10" stroke="#6f95ff" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    </svg>
  );

  const RestauranteSVG = () => (
    <svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="rg1" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stopColor="#1a2f47"/><stop offset="1" stopColor="#0D1B2A"/></linearGradient>
      </defs>
      <rect width="320" height="240" fill="url(#rg1)"/>
      {/* table-top top view */}
      <ellipse cx="160" cy="160" rx="140" ry="50" fill="#243a55" opacity=".5"/>
      {/* phone tilted */}
      <g transform="rotate(-8 160 120)">
        <rect x="100" y="32" width="120" height="180" rx="20" fill="#0a1522" stroke="#2a3a4f" strokeWidth="2"/>
        <rect x="108" y="40" width="104" height="164" rx="14" fill="#122438"/>
        <rect x="118" y="54" width="84" height="32" rx="6" fill="#2ECC71"/>
        <text x="124" y="68" fontFamily="Inter" fontSize="8" fontWeight="700" fill="#073d1f">RESERVAR</text>
        <text x="124" y="78" fontFamily="Inter" fontSize="6" fill="#073d1f" opacity=".8">Mesa para 4 · 8pm</text>
        <rect x="118" y="94" width="84" height="14" rx="4" fill="rgba(255,255,255,0.06)"/>
        <rect x="124" y="99" width="56" height="3" rx="1.5" fill="#cfd6e0"/>
        <rect x="118" y="114" width="84" height="14" rx="4" fill="rgba(255,255,255,0.06)"/>
        <rect x="124" y="119" width="48" height="3" rx="1.5" fill="#cfd6e0"/>
        <rect x="118" y="134" width="84" height="14" rx="4" fill="rgba(46,204,113,0.16)"/>
        <rect x="124" y="139" width="60" height="3" rx="1.5" fill="#2ECC71"/>
        <rect x="118" y="154" width="84" height="14" rx="4" fill="rgba(255,255,255,0.06)"/>
        <rect x="124" y="159" width="40" height="3" rx="1.5" fill="#cfd6e0"/>
      </g>
      {/* fork knife */}
      <circle cx="56" cy="62" r="20" fill="rgba(46,204,113,0.16)"/>
      <path d="M52,52 v20 M52,72 h8 M60,52 v20" stroke="#2ECC71" strokeWidth="2" strokeLinecap="round" fill="none"/>
      {/* clock */}
      <circle cx="266" cy="180" r="18" fill="rgba(245,165,36,0.20)"/>
      <circle cx="266" cy="180" r="11" fill="none" stroke="#F5A524" strokeWidth="2"/>
      <path d="M266,172 v8 l5,3" stroke="#F5A524" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );

  const ServiciosSVG = () => (
    <svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="sg1" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stopColor="#0D1B2A"/><stop offset="1" stopColor="#122438"/></linearGradient>
      </defs>
      <rect width="320" height="240" fill="url(#sg1)"/>
      {/* laptop */}
      <rect x="60" y="58" width="200" height="130" rx="6" fill="#0a1522" stroke="#2a3a4f" strokeWidth="2"/>
      <rect x="68" y="66" width="184" height="114" rx="3" fill="#122438"/>
      <rect x="40" y="186" width="240" height="8" rx="2" fill="#1a2f47"/>
      {/* dashboard inside */}
      <rect x="74" y="74" width="172" height="14" rx="3" fill="#1a2f47"/>
      <circle cx="82" cy="81" r="3" fill="#2ECC71"/>
      <rect x="92" y="78" width="28" height="6" rx="2" fill="#cfd6e0"/>
      <rect x="74" y="94" width="55" height="40" rx="4" fill="rgba(46,204,113,0.16)"/>
      <text x="82" y="110" fontFamily="Montserrat" fontSize="11" fontWeight="800" fill="#2ECC71">+38%</text>
      <rect x="82" y="118" width="34" height="3" rx="1.5" fill="#2ECC71" opacity=".6"/>
      <rect x="135" y="94" width="55" height="40" rx="4" fill="rgba(21,87,255,0.16)"/>
      <text x="143" y="110" fontFamily="Montserrat" fontSize="11" fontWeight="800" fill="#6f95ff">142</text>
      <rect x="143" y="118" width="34" height="3" rx="1.5" fill="#6f95ff" opacity=".6"/>
      <rect x="196" y="94" width="50" height="40" rx="4" fill="rgba(255,255,255,0.06)"/>
      <text x="204" y="110" fontFamily="Montserrat" fontSize="11" fontWeight="800" fill="#fff">24/7</text>
      <rect x="204" y="118" width="30" height="3" rx="1.5" fill="#cfd6e0" opacity=".5"/>
      {/* line chart */}
      <polyline points="74,168 100,158 130,162 160,148 190,150 220,138 246,140" fill="none" stroke="#2ECC71" strokeWidth="2"/>
      <rect x="74" y="142" width="172" height="28" rx="3" fill="rgba(255,255,255,0.03)"/>
      <polyline points="74,168 100,158 130,162 160,148 190,150 220,138 246,140" fill="none" stroke="#2ECC71" strokeWidth="2"/>
    </svg>
  );

  const ComerciosSVG = () => (
    <svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="cmg1" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stopColor="#122438"/><stop offset="1" stopColor="#0D1B2A"/></linearGradient>
      </defs>
      <rect width="320" height="240" fill="url(#cmg1)"/>
      {/* shopping bag */}
      <circle cx="80" cy="120" r="40" fill="rgba(46,204,113,0.10)"/>
      <path d="M68,108 v40 a4,4 0 0 0 4,4 h16 a4,4 0 0 0 4,4 v-40 z M76,108 v-6 a4,4 0 0 1 4,-4 h0 a4,4 0 0 1 4,4 v6" fill="none" stroke="#2ECC71" strokeWidth="2.5" strokeLinejoin="round"/>
      {/* phone with product card */}
      <rect x="170" y="32" width="120" height="180" rx="20" fill="#0a1522" stroke="#2a3a4f" strokeWidth="2"/>
      <rect x="178" y="40" width="104" height="164" rx="14" fill="#122438"/>
      {/* product image */}
      <rect x="186" y="50" width="88" height="64" rx="6" fill="#1a2f47"/>
      <circle cx="230" cy="82" r="18" fill="#243a55"/>
      <rect x="216" y="76" width="28" height="3" fill="#9aa3af"/>
      <rect x="216" y="84" width="20" height="3" fill="#9aa3af" opacity=".7"/>
      <rect x="186" y="120" width="60" height="6" rx="2" fill="#fff"/>
      <rect x="186" y="130" width="40" height="4" rx="2" fill="#9aa3af"/>
      <text x="186" y="152" fontFamily="Montserrat" fontSize="14" fontWeight="800" fill="#2ECC71">₡18,500</text>
      <rect x="186" y="162" width="88" height="22" rx="6" fill="#2ECC71"/>
      <text x="208" y="176" fontFamily="Inter" fontSize="9" fontWeight="700" fill="#073d1f">AÑADIR · 1</text>
      {/* badge */}
      <circle cx="278" cy="46" r="14" fill="#E5484D"/>
      <text x="271" y="50" fontFamily="Inter" fontSize="9" fontWeight="800" fill="#fff">-20%</text>
    </svg>
  );

  const items = [
    { slug: 'https://wa.me/50660495999', svg: <img src="assets/ind-clinicas.png" alt="Clínicas" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center',display:'block'}}/>, title: 'Clínicas', desc: 'Citas que se agendan solas. Recordatorios automáticos. Cero ausencias.' },
    { slug: 'https://wa.me/50660495999', svg: <img src="assets/ind-restaurante.png" alt="Restaurantes" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center',display:'block'}}/>, title: 'Restaurantes', desc: 'Reservas, menú digital y delivery por WhatsApp. Fines de semana sin caos.' },
    { slug: 'https://wa.me/50660495999', svg: <ServiciosSVG/>, title: 'Servicios profesionales', desc: 'Cotizaciones rápidas, web que convierte y clientes que llegan calientes.' },
    { slug: 'https://wa.me/50660495999', svg: <ComerciosSVG/>, title: 'Comercios', desc: 'Catálogo en línea + bot que vende. Tu tienda abierta los 365 días.' },
  ];

  return (
    <section className="s alt" id="industrias">
      <div className="container">
        <div className="s-head">
          <div className="left">
            <div className="s-eyebrow">Industrias</div>
            <h2 className="s-title">Diseñado para tu negocio, <span className="acc">no genérico.</span></h2>
            <p className="s-sub">Cada landing tiene su propio chatbot, sus dolores específicos y sus precios claros. Elegí el tuyo.</p>
          </div>
          <div className="right">
            ¿Otro rubro? Hacemos custom. <a href="https://wa.me/50660495999" style={{color:'var(--bytec-green)',fontWeight:600}}>Hablemos →</a>
          </div>
        </div>
        <div className="ind-grid">
          {items.map((it, i) => (
            <a key={i} href={it.slug} className="ind-card">
              <div className="ind-photo">{it.svg}</div>
              <div className="ind-body">
                <div className="ind-slug">agenciabytec.com{it.slug}</div>
                <h4>{it.title}</h4>
                <p>{it.desc}</p>
                <span className="ind-cta">Ver demo y precios <Icon name="arrow-right" size={14}/></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Industries = Industries;
