/* STICKY PORTFOLIO — galería estilo "ui-layout sticky-scroll".
   3 columnas: izquierda y derecha hacen scroll normal con varias imágenes,
   columna central queda sticky con un grupo de 3 imágenes "destacadas".
   Cada figure tiene caption derivado de window.productData[src] y abre
   ProductLightbox al hacer click. */

const StickyPortfolio = ({ t, lang, setActiveProduct }) => {
  // Asignaciones VERIFICADAS visualmente. Los datos (título, cliente, medidas)
  // se leen desde window.productData en StickyFigure. Sin labels hardcodeados.
  const left = [
    'assets/cocina-linea.jpeg',                       // línea cocina industrial
    'assets/casetas-fila.jpeg',                       // gabinete exterior ventilado abierto
    'assets/totem-urban.jpeg',                        // tótems digitales Urban
    'assets/cabinet-archivero.jpeg',                  // archivero metálico 7 cajones
    'assets/gabinete-exhibidor-vidrio-inox-01.jpeg',  // vitrinas inox + vidrio en producción
  ];

  const center = [
    'assets/counter-7eleven.jpeg',                    // counter retail 7-Eleven
    'assets/casetas-fila-2.jpeg',                     // cocina con chefs en operación
    'assets/gabinetes-fila.jpeg',                     // lote cabinas inox en producción
  ];

  const right = [
    'assets/puesto-comida.jpeg',                      // puesto comida rápida marquesina
    'assets/cubicles-azul.jpeg',                      // estación cocina tarja + bain-marie
    'assets/cocina-trabajo.jpeg',                     // cubículos call center
    'assets/cocina-mesa.jpeg',                        // lote archiveros embalados
    'assets/totems-pareja.jpeg',                      // kiosco urbano CDMX MH093
  ];

  return (
    <section id="portafolio" style={{ background: '#0a0a0b', position: 'relative' }}>
      {/* Sticky title screen */}
      <div className="tech-grid" style={{
        position: 'sticky',
        top: 0,
        height: '100vh',
        width: '100%',
        display: 'grid',
        placeContent: 'center',
        zIndex: 1,
        textAlign: 'center',
        padding: '0 32px',
      }}>
        <div
          aria-hidden="true"
          style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse 60% 50% at 50% 0%, transparent 0%, var(--bg) 70%, var(--bg) 100%)',
            pointerEvents: 'none',
          }}
        />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <span className="eyebrow" style={{ marginBottom: 24, display: 'block' }}>— 04 / {t('Portafolio', 'Portfolio')}</span>
          <h2 className="display display-xl" style={{ textWrap: 'balance', marginBottom: 24 }}>
            {t('Esto es lo que', 'This is what')}<br/>
            <span className="steel-text">{t('entregamos.', 'we deliver.')}</span>
          </h2>
          <p className="mono" style={{ color: 'var(--ink-3)' }}>
            {t('Click en cualquier foto para ver la ficha · ↓ desplaza', 'Click any photo for details · ↓ scroll')}
          </p>
        </div>
      </div>

      {/* Sticky 3-col gallery */}
      <section style={{ position: 'relative', zIndex: 2, padding: '0 16px 0', background: 'var(--bg)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 8 }} className="sticky-grid">
          {/* LEFT */}
          <div style={{ gridColumn: 'span 4', display: 'grid', gap: 8 }} className="sticky-col-left">
            {left.map((src, i) => <StickyFigure key={i} src={src} lang={lang} onOpen={setActiveProduct} t={t} />)}
          </div>

          {/* CENTER - sticky */}
          <div
            className="sticky-col-center"
            style={{
              gridColumn: 'span 4',
              position: 'sticky',
              top: 8,
              height: 'calc(100vh - 16px)',
              display: 'grid',
              gridTemplateRows: '1fr 1fr 1fr',
              gap: 8,
            }}
          >
            {center.map((src, i) => <StickyFigure key={i} src={src} fill lang={lang} onOpen={setActiveProduct} t={t} />)}
          </div>

          {/* RIGHT */}
          <div style={{ gridColumn: 'span 4', display: 'grid', gap: 8 }} className="sticky-col-right">
            {right.map((src, i) => <StickyFigure key={i} src={src} lang={lang} onOpen={setActiveProduct} t={t} />)}
          </div>
        </div>

        {/* Closing CTA */}
        <div style={{ borderTop: '1px solid var(--hairline)', marginTop: 8, padding: '80px 16px', textAlign: 'center' }}>
          <p className="mono" style={{ color: 'var(--ink-3)', marginBottom: 16 }}>
            {t('+ MUCHO MÁS EN EL PORTAFOLIO COMPLETO', '+ MUCH MORE IN THE FULL PORTFOLIO')}
          </p>
          <a href="https://wa.me/525578680250" target="_blank" rel="noopener" className="btn btn-primary">
            {t('Pedir portafolio completo por WhatsApp', 'Request full portfolio via WhatsApp')}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>
      </section>

      {/* Big gradient footer text "AceroLab" — same vibe as ui-layout demo */}
      <footer style={{ background: 'var(--bg)', position: 'relative', zIndex: 2, overflow: 'hidden' }}>
        <h2
          className="display"
          style={{
            fontSize: 'clamp(80px, 16vw, 280px)',
            transform: 'translateY(15%)',
            lineHeight: 1,
            textTransform: 'uppercase',
            fontWeight: 600,
            textAlign: 'center',
            background: 'linear-gradient(180deg, #d8d8dc 0%, #888892 50%, #2a2a30 100%)',
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            color: 'transparent',
            letterSpacing: '-0.04em',
            margin: 0,
            padding: 0,
          }}
        >
          ACEROLAB
        </h2>
        <div style={{
          background: 'var(--bg-1)',
          height: 80,
          position: 'relative',
          zIndex: 5,
          borderTopLeftRadius: '50% 100%',
          borderTopRightRadius: '50% 100%',
          marginTop: -1,
        }} />
      </footer>

      <style>{`
        @media (max-width: 800px) {
          .sticky-grid { grid-template-columns: 1fr !important; }
          .sticky-col-left, .sticky-col-right { grid-column: span 1 !important; }
          .sticky-col-center { position: relative !important; top: 0 !important; height: auto !important; grid-column: span 1 !important; }
        }
      `}</style>
    </section>
  );
};

const StickyFigure = ({ src, fill = false, lang = 'es', onOpen, t }) => {
  const data = window.productData?.[src];
  const pick = (field) => (typeof field === 'string' ? field : (field && (field[lang] || field.es)) || '');

  const category = data ? pick(data.category) : '';
  const title    = data ? pick(data.title)    : '';
  const client   = data ? pick(data.client)   : '';

  return (
    <figure
      className="sticky-figure"
      onClick={() => onOpen?.(src)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onOpen?.(src); }}
      style={{
        margin: 0,
        width: '100%',
        height: fill ? '100%' : 'auto',
        position: 'relative',
        background: 'var(--bg-2)',
        overflow: 'hidden',
        cursor: 'pointer',
      }}
    >
      <img
        src={src}
        alt={title || category}
        style={{
          width: '100%',
          height: fill ? '100%' : 380,
          objectFit: 'cover',
          filter: 'contrast(1.04) saturate(0.9)',
          transition: 'transform .8s ease, filter .4s ease',
        }}
      />
      <figcaption style={{
        position: 'absolute',
        left: 12, bottom: 12, right: 12,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-end',
        gap: 12,
        pointerEvents: 'none',
      }}>
        <div style={{ background: 'rgba(0,0,0,0.7)', padding: '6px 10px', backdropFilter: 'blur(6px)', maxWidth: '90%' }}>
          <div className="mono" style={{ fontSize: 9, color: '#fff', letterSpacing: '0.12em', marginBottom: 2 }}>
            {(category || '').toUpperCase()}
          </div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.85)', fontWeight: 500 }}>
            {title}
          </div>
          {(client || (data && data.measures)) && (
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>
              {client}{client && data?.measures ? ' · ' : ''}{data?.measures || ''}
            </div>
          )}
        </div>
        <span className="mono" style={{
          background: 'rgba(255,106,31,0.92)',
          color: '#fff',
          padding: '4px 8px',
          fontSize: 9,
          letterSpacing: '0.1em',
          alignSelf: 'flex-end',
          flexShrink: 0,
        }}>
          {t ? t('VER FICHA', 'DETAILS') : 'VER FICHA'}
        </span>
      </figcaption>
    </figure>
  );
};

window.StickyPortfolio = StickyPortfolio;