/* CATEGORÍAS — "Lo que fabricamos".
   Cada categoría se ilustra con la foto que REALMENTE muestra ese producto.
   El campo `featured` (= ruta del asset) referencia ProductData.jsx para
   mostrar título + medidas + material del ejemplo concreto al expandir. */

const Categories = ({ t, lang, setActiveProduct }) => {
  const [active, setActive] = React.useState(0);

  const pick = (field) => (typeof field === 'string' ? field : (field && (field[lang] || field.es)) || '');

  const cats = [
    {
      n: '01',
      title: t('Cocinas industriales', 'Industrial kitchens'),
      sub: t('Restaurantes, hoteles, cadenas', 'Restaurants, hotels, chains'),
      items: t(
        'Líneas de producción · Tarjas de lavado · Campanas de extracción · Mesas de trabajo · Barras de servicio · Carritos · Racks · Estaciones fríos/calientes',
        'Production lines · Wash sinks · Exhaust hoods · Work tables · Service counters · Carts · Racks · Hot/cold stations'
      ),
      img: 'assets/cocina-linea.jpeg',
      featured: 'assets/cocina-linea.jpeg',
      tag: 'T304 / T316',
    },
    {
      n: '02',
      title: t('Mobiliario urbano', 'Street furniture'),
      sub: t('Mupis, tótems digitales, casetas en calle', 'Bus shelters, digital totems, street booths'),
      items: t(
        'Mupis publicitarios · Tótems digitales · Casetas de información · Paradas de autobús · Marquesinas · Soportes y pedestales en inox para exterior',
        'Advertising mupis · Digital totems · Info booths · Bus stops · Marquees · Outdoor stainless supports and pedestals'
      ),
      img: 'assets/totem-urban.jpeg',
      featured: 'assets/totem-urban.jpeg',
      tag: 'OUTDOOR · IP65',
    },
    {
      n: '03',
      title: t('Casetas y cabinas', 'Booths & enclosures'),
      sub: t('Vigilancia, control de acceso, espacio público', 'Security, access control, public space'),
      items: t(
        'Casetas de vigilancia en inox · Cabinas con vidrio templado · Módulos de control · Garitas · Encerramientos peatonales',
        'Stainless guard booths · Tempered-glass cabins · Control modules · Sentry boxes · Pedestrian enclosures'
      ),
      img: 'assets/caseta-vigilancia-garita-inox-01.jpeg',
      featured: 'assets/caseta-vigilancia-garita-inox-01.jpeg',
      tag: 'INOX · VIDRIO',
    },
    {
      n: '04',
      title: t('Mobiliario de oficina', 'Office furniture'),
      sub: t('Cubículos, call centers, escuelas', 'Cubicles, call centers, schools'),
      items: t(
        'Cubículos para call center · Mamparas · Estaciones de trabajo · Paneles divisorios · Mobiliario operativo',
        'Call-center cubicles · Partitions · Workstations · Dividing panels · Operational furniture'
      ),
      img: 'assets/cocina-trabajo.jpeg',
      featured: 'assets/cocina-trabajo.jpeg',
      tag: 'PINTURA POLVO',
    },
    {
      n: '05',
      title: t('Archiveros y guarda', 'Filing & storage'),
      sub: t('Oficina, gobierno, áreas operativas', 'Office, government, operations'),
      items: t(
        'Archiveros verticales · Archiveros de cajones · Gabinetes con llave · Lockers metálicos · Producción seriada',
        'Vertical filing cabinets · Drawer units · Locking cabinets · Metal lockers · Serial production'
      ),
      img: 'assets/cabinet-archivero.jpeg',
      featured: 'assets/cabinet-archivero.jpeg',
      tag: 'SERIE · PROYECTO',
    },
    {
      n: '06',
      title: t('Lo que tú necesites', 'Whatever you need'),
      sub: t('Sí. Cualquier cosa en metal.', 'Yes. Anything in metal.'),
      items: t(
        'Después de 30+ años hemos hecho de todo. Si lo dibujas — incluso en una servilleta — lo fabricamos. Trae tu boceto, foto, idea, render, plano CAD o referencia visual.',
        "After 30+ years we've made it all. If you sketch it — even on a napkin — we'll build it. Bring your sketch, photo, idea, render, CAD plan or visual reference."
      ),
      img: 'assets/exhibidor-iluminado.jpeg',
      featured: 'assets/exhibidor-iluminado.jpeg',
      tag: 'ASK · ANYTHING',
    },
  ];

  return (
    <section id="fabricamos" className="section">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'baseline', marginBottom: 64 }}>
          <span className="eyebrow">— 02</span>
          <div>
            <h2 className="display display-lg" style={{ maxWidth: '14ch', textWrap: 'balance' }}>
              {t('Lo que fabricamos.', 'What we build.')}
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: 600, marginTop: 24, lineHeight: 1.6 }}>
              {t(
                'Cinco verticales claras y una sexta sin nombre — para todo lo demás. Pasa el cursor o toca cada una para ver ejemplos.',
                'Five clear verticals and a sixth without a name — for everything else. Hover or tap each to see examples.'
              )}
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)', gap: 80, alignItems: 'start' }} className="cats-grid">
          <div style={{ borderTop: '1px solid var(--hairline)' }}>
            {cats.map((c, i) => (
              <div
                key={i}
                onMouseEnter={() => setActive(i)}
                onClick={() => setActive(i)}
                style={{
                  borderBottom: '1px solid var(--hairline)',
                  padding: '24px 0',
                  cursor: 'pointer',
                  transition: 'background .2s, padding .25s',
                  paddingLeft: active === i ? 16 : 0,
                  background: active === i ? 'rgba(255,255,255,0.02)' : 'transparent',
                  position: 'relative',
                }}
              >
                {active === i && (
                  <span style={{ position: 'absolute', left: 0, top: 24, bottom: 24, width: 2, background: 'var(--ink)' }}/>
                )}
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24 }}>
                  <span className="mono" style={{ color: 'var(--ink-3)', minWidth: 32, paddingTop: 6, fontSize: 11 }}>{c.n}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
                      <h3 className="display" style={{ fontSize: 'clamp(24px, 2.6vw, 38px)', fontWeight: 500, lineHeight: 1.1 }}>
                        {c.title}
                      </h3>
                      <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>{c.tag}</span>
                    </div>
                    <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4, marginBottom: active === i ? 12 : 0 }}>{c.sub}</p>
                    <div style={{
                      maxHeight: active === i ? 320 : 0,
                      overflow: 'hidden',
                      transition: 'max-height .35s ease, opacity .35s ease',
                      opacity: active === i ? 1 : 0,
                    }}>
                      <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 8 }}>
                        {c.items}
                      </p>
                      {(() => {
                        const f = c.featured && window.productData?.[c.featured];
                        if (!f) return null;
                        return (
                          <div style={{
                            marginTop: 14,
                            paddingTop: 14,
                            borderTop: '1px dashed var(--hairline)',
                            display: 'flex',
                            flexWrap: 'wrap',
                            gap: 10,
                            alignItems: 'baseline',
                          }}>
                            <span className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.14em' }}>
                              {t('EJEMPLO ENTREGADO', 'DELIVERED EXAMPLE')}
                            </span>
                            <button
                              onClick={(e) => { e.stopPropagation(); setActiveProduct?.(c.featured); }}
                              style={{
                                background: 'transparent',
                                border: 'none',
                                padding: 0,
                                fontFamily: 'inherit',
                                color: 'var(--ink)',
                                cursor: 'pointer',
                                textAlign: 'left',
                                fontSize: 14,
                                fontWeight: 500,
                                textDecoration: 'underline',
                                textUnderlineOffset: 3,
                                textDecorationColor: 'var(--accent)',
                              }}
                            >
                              {pick(f.title)}
                            </button>
                            {f.measures && (
                              <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>· {f.measures}</span>
                            )}
                            {f.material && (
                              <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>· {pick(f.material)}</span>
                            )}
                          </div>
                        );
                      })()}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div
            className="cats-image"
            onClick={() => setActiveProduct?.(cats[active].featured)}
            role="button"
            tabIndex={0}
            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setActiveProduct?.(cats[active].featured); }}
            title={t('Ver ficha', 'View details')}
            style={{ position: 'sticky', top: 100, aspectRatio: '4/5', background: 'var(--bg-2)', overflow: 'hidden', cursor: 'pointer' }}
          >
            {cats.map((c, i) => (
              <img
                key={i}
                src={c.img}
                alt={c.title}
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%',
                  objectFit: 'cover',
                  opacity: active === i ? 1 : 0,
                  transform: active === i ? 'scale(1)' : 'scale(1.05)',
                  transition: 'opacity .5s ease, transform 1.2s ease',
                  filter: 'contrast(1.04)',
                }}
              />
            ))}
            <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', pointerEvents: 'none' }}>
              <span className="mono" style={{ background: 'rgba(0,0,0,0.6)', color: '#fff', padding: '4px 8px', fontSize: 10 }}>
                {String(active + 1).padStart(2, '0')} / {String(cats.length).padStart(2, '0')}
              </span>
              <span className="mono" style={{ background: 'rgba(0,0,0,0.6)', color: '#fff', padding: '4px 8px', fontSize: 10 }}>
                {t('CLICK · VER FICHA', 'CLICK · VIEW DETAILS')}
              </span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .cats-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .cats-image { position: relative !important; top: 0 !important; aspect-ratio: 4/3 !important; }
        }
      `}</style>
    </section>
  );
};

window.Categories = Categories;