/* CAPABILITIES — proceso técnico de fabricación.
   8 capacidades como tarjetas técnicas con SVG isotipo (cizalla, punzonado, etc.)
   estilo "ficha de planta". */

const Capabilities = ({ t }) => {
  const caps = [
    {
      n: 'C-01',
      name: t('Cizalla', 'Shear cutting'),
      desc: t('Corte recto de lámina. Primer paso del flujo.', 'Straight sheet cutting. First step of the flow.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="8" y="20" width="48" height="24" />
          <line x1="8" y1="32" x2="56" y2="32" strokeDasharray="2 3"/>
          <path d="M48 14 L56 22 L48 30" />
          <line x1="20" y1="44" x2="20" y2="52" />
          <line x1="44" y1="44" x2="44" y2="52" />
        </svg>
      ),
    },
    {
      n: 'C-02',
      name: t('Punzonado', 'Punching'),
      desc: t('Perforaciones y recortes con matriz CNC.', 'Perforations and cuts with CNC die.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="12" y="32" width="40" height="20" />
          <circle cx="22" cy="42" r="2" fill="currentColor"/>
          <circle cx="32" cy="42" r="2" fill="currentColor"/>
          <circle cx="42" cy="42" r="2" fill="currentColor"/>
          <line x1="32" y1="8" x2="32" y2="32" />
          <rect x="28" y="8" width="8" height="8" fill="currentColor"/>
        </svg>
      ),
    },
    {
      n: 'C-03',
      name: t('Troquelado', 'Die cutting'),
      desc: t('Corte de formas en serie con dado.', 'Serial shape cutting with die set.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="10" y="36" width="44" height="14" />
          <path d="M22 36 L26 24 L38 24 L42 36" />
          <path d="M16 36 L20 28 L22 28" strokeDasharray="2 2"/>
          <path d="M48 36 L44 28 L42 28" strokeDasharray="2 2"/>
        </svg>
      ),
    },
    {
      n: 'C-04',
      name: t('Doblado / Plegado', 'Bending / Folding'),
      desc: t('Plegado de lámina para estructuras 3D.', 'Sheet folding for 3D structures.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M8 44 L32 44 L32 24" />
          <path d="M32 24 L52 24" strokeDasharray="2 2"/>
          <path d="M32 24 L48 16" />
          <path d="M28 40 A 8 8 0 0 0 32 32" />
        </svg>
      ),
    },
    {
      n: 'C-05',
      name: t('Soldadura', 'Welding'),
      desc: t('Unión por fusión. Estructuras y uniones rígidas.', 'Fusion bond. Structures and rigid joints.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <line x1="8" y1="44" x2="56" y2="44" />
          <path d="M16 44 Q 20 40 24 44 T 32 44 T 40 44 T 48 44" />
          <line x1="32" y1="44" x2="32" y2="20" />
          <path d="M28 16 L32 8 L36 16 Z" fill="currentColor"/>
          <circle cx="32" cy="32" r="3" fill="currentColor"/>
        </svg>
      ),
    },
    {
      n: 'C-06',
      name: t('Punteado', 'Spot welding'),
      desc: t('Soldadura por puntos, lámina-lámina.', 'Spot welding, sheet-to-sheet.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="8" y="28" width="48" height="6" />
          <rect x="8" y="34" width="48" height="6" />
          <circle cx="20" cy="34" r="2" fill="currentColor"/>
          <circle cx="32" cy="34" r="2" fill="currentColor"/>
          <circle cx="44" cy="34" r="2" fill="currentColor"/>
          <line x1="32" y1="14" x2="32" y2="28" />
          <line x1="32" y1="40" x2="32" y2="54" />
        </svg>
      ),
    },
    {
      n: 'C-07',
      name: t('Pintura electrostática', 'Powder coating'),
      desc: t('Acabado en polvo, color a elegir.', 'Powder finish, color to spec.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="34" y="20" width="20" height="24" />
          <path d="M16 32 L34 32" />
          <path d="M14 28 L8 32 L14 36 Z" />
          <circle cx="20" cy="22" r="1" fill="currentColor"/>
          <circle cx="22" cy="42" r="1" fill="currentColor"/>
          <circle cx="26" cy="32" r="1" fill="currentColor"/>
          <circle cx="18" cy="38" r="1" fill="currentColor"/>
          <circle cx="24" cy="24" r="1" fill="currentColor"/>
        </svg>
      ),
    },
    {
      n: 'C-08',
      name: t('Carpintería integrada', 'Integrated carpentry'),
      desc: t('Madera para piezas híbridas.', 'Wood for hybrid pieces.'),
      icon: (
        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="10" y="22" width="44" height="20" />
          <path d="M14 26 Q 22 30 30 26 Q 38 22 46 26 Q 50 28 50 32" opacity="0.4"/>
          <path d="M14 32 Q 22 36 30 32 Q 38 28 46 32 Q 50 34 50 38" opacity="0.4"/>
          <path d="M14 38 Q 22 42 30 38" opacity="0.4"/>
        </svg>
      ),
    },
  ];

  return (
    <section id="capacidades" className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'baseline', marginBottom: 64 }}>
          <span className="eyebrow">— 03</span>
          <div>
            <h2 className="display display-lg" style={{ maxWidth: '16ch', textWrap: 'balance' }}>
              {t('Todo bajo un mismo techo.', 'Everything under one roof.')}
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: 640, marginTop: 24, lineHeight: 1.6 }}>
              {t(
                'No subcontratamos las etapas críticas. Materiales y máquinas son nuestras. Por eso podemos garantizar tiempos, precio directo y calidad consistente.',
                "We don't subcontract the critical stages. Materials and machines are ours. That's why we can guarantee turnaround, direct pricing and consistent quality."
              )}
            </p>
          </div>
        </div>

        {/* Materials strip */}
        <div style={{
          display: 'flex',
          gap: 12,
          flexWrap: 'wrap',
          marginBottom: 48,
          paddingBottom: 24,
          borderBottom: '1px solid var(--hairline)',
        }}>
          <span className="mono" style={{ color: 'var(--ink-3)', fontSize: 11, marginRight: 8 }}>
            {t('MATERIALES:', 'MATERIALS:')}
          </span>
          {[
            t('Inox T304', 'Stainless T304'),
            t('Inox T316', 'Stainless T316'),
            t('Acero al carbón', 'Carbon steel'),
            t('Galvanizado', 'Galvanized'),
            t('Aluminio', 'Aluminum'),
            t('Madera', 'Wood'),
            t('Cristal templado', 'Tempered glass'),
          ].map((m, i) => (
            <span key={i} className="tag">{m}</span>
          ))}
        </div>

        {/* Capabilities grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 1,
          background: 'var(--hairline)',
          border: '1px solid var(--hairline)',
        }}>
          {caps.map((c, i) => (
            <div
              key={i}
              className="cap-card"
              style={{
                background: 'var(--bg-1)',
                padding: 28,
                position: 'relative',
                transition: 'background .2s ease',
                cursor: 'default',
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'var(--bg-1)'}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
                <span className="mono" style={{ color: 'var(--ink-3)', fontSize: 10 }}>{c.n}</span>
                <div style={{ width: 6, height: 6, background: 'var(--ink-4)', borderRadius: '50%' }}></div>
              </div>
              <div style={{ width: 56, height: 56, color: 'var(--ink)', marginBottom: 24 }}>
                {c.icon}
              </div>
              <h3 className="display" style={{ fontSize: 22, fontWeight: 500, marginBottom: 8, lineHeight: 1.1 }}>
                {c.name}
              </h3>
              <p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5 }}>
                {c.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Capabilities = Capabilities;