/* global React, LR_IMAGES, gsap, ScrollTrigger */

function PortfolioWall() {
  const t = window.useT();

  const projectDefs = [
    {
      key: 'aurora',
      folder: '01-aurora',
      title: t('portfolio.projects.aurora.title'),
      loc: t('portfolio.projects.aurora.location'),
      tipo: t('portfolio.projects.aurora.type'),
      cliente: t('portfolio.projects.aurora.client'),
      tier: t('portfolio.tier.essential'),
      servicios: [
        t('portfolio.projects.aurora.services.0'),
        t('portfolio.projects.aurora.services.1'),
        t('portfolio.projects.aurora.services.2'),
      ],
      rol: t('portfolio.projects.aurora.role'),
      resultados: [
        { value: '80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.aurora.description'),
    },
    {
      key: 'verania',
      folder: '02-verania',
      title: t('portfolio.projects.verania.title'),
      loc: t('portfolio.projects.verania.location'),
      tipo: t('portfolio.projects.verania.type'),
      cliente: t('portfolio.projects.verania.client'),
      tier: t('portfolio.tier.premium'),
      servicios: [
        t('portfolio.projects.verania.services.0'),
        t('portfolio.projects.verania.services.1'),
        t('portfolio.projects.verania.services.2'),
        t('portfolio.projects.verania.services.3'),
      ],
      rol: t('portfolio.projects.verania.role'),
      resultados: [
        { value: '60-80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1-5', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.verania.description'),
    },
    {
      key: 'estepona',
      folder: '03-torre-levante',
      title: t('portfolio.projects.estepona.title'),
      loc: t('portfolio.projects.estepona.location'),
      tipo: t('portfolio.projects.estepona.type'),
      cliente: t('portfolio.projects.estepona.client'),
      tier: t('portfolio.tier.commercial'),
      servicios: [
        t('portfolio.projects.estepona.services.0'),
        t('portfolio.projects.estepona.services.1'),
        t('portfolio.projects.estepona.services.2'),
      ],
      rol: t('portfolio.projects.estepona.role'),
      resultados: [
        { value: '60-80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1-5', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.estepona.description'),
    },
    {
      key: 'lumen',
      folder: '04-lumen',
      title: t('portfolio.projects.lumen.title'),
      loc: t('portfolio.projects.lumen.location'),
      tipo: t('portfolio.projects.lumen.type'),
      cliente: t('portfolio.projects.lumen.client'),
      tier: t('portfolio.tier.essential'),
      servicios: [
        t('portfolio.projects.lumen.services.0'),
        t('portfolio.projects.lumen.services.1'),
        t('portfolio.projects.lumen.services.2'),
      ],
      rol: t('portfolio.projects.lumen.role'),
      resultados: [
        { value: '60-80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.lumen.description'),
    },
    {
      key: 'mirador',
      folder: '05-mirador',
      title: t('portfolio.projects.mirador.title'),
      loc: t('portfolio.projects.mirador.location'),
      tipo: t('portfolio.projects.mirador.type'),
      cliente: t('portfolio.projects.mirador.client'),
      tier: t('portfolio.tier.commercial'),
      servicios: [
        t('portfolio.projects.mirador.services.0'),
        t('portfolio.projects.mirador.services.1'),
        t('portfolio.projects.mirador.services.2'),
      ],
      rol: t('portfolio.projects.mirador.role'),
      resultados: [
        { value: '60-80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1-5', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.mirador.description'),
    },
    {
      key: 'atelier',
      folder: '06-atelier',
      title: t('portfolio.projects.atelier.title'),
      loc: t('portfolio.projects.atelier.location'),
      tipo: t('portfolio.projects.atelier.type'),
      cliente: t('portfolio.projects.atelier.client'),
      tier: t('portfolio.tier.essential'),
      servicios: [
        t('portfolio.projects.atelier.services.0'),
        t('portfolio.projects.atelier.services.1'),
        t('portfolio.projects.atelier.services.2'),
      ],
      rol: t('portfolio.projects.atelier.role'),
      resultados: [
        { value: '60-80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.atelier.description'),
    },
    {
      key: 'altea',
      folder: '07-altea',
      title: t('portfolio.projects.altea.title'),
      loc: t('portfolio.projects.altea.location'),
      tipo: t('portfolio.projects.altea.type'),
      cliente: t('portfolio.projects.altea.client'),
      tier: t('portfolio.tier.commercial'),
      servicios: [
        t('portfolio.projects.altea.services.0'),
        t('portfolio.projects.altea.services.1'),
        t('portfolio.projects.altea.services.2'),
        t('portfolio.projects.altea.services.3'),
      ],
      rol: t('portfolio.projects.altea.role'),
      resultados: [
        { value: '60-80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1-5', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.altea.description'),
    },
    {
      key: 'palms',
      folder: '08-palms',
      title: t('portfolio.projects.palms.title'),
      loc: t('portfolio.projects.palms.location'),
      tipo: t('portfolio.projects.palms.type'),
      cliente: t('portfolio.projects.palms.client'),
      tier: t('portfolio.tier.premium'),
      servicios: [
        t('portfolio.projects.palms.services.0'),
        t('portfolio.projects.palms.services.1'),
        t('portfolio.projects.palms.services.2'),
        t('portfolio.projects.palms.services.3'),
        t('portfolio.projects.palms.services.4'),
      ],
      rol: t('portfolio.projects.palms.role'),
      resultados: [
        { value: '60-80%', label: t('portfolio.results.0.label') },
        { value: '120-160+', label: t('portfolio.results.1.label') },
        { value: '18-24', label: t('portfolio.results.2.label') },
        { value: '1-5', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.palms.description'),
    },
    {
      key: 'nuevo',
      folder: '09-nuevo-proyecto',
      title: t('portfolio.projects.nuevo.title'),
      loc: t('portfolio.projects.nuevo.location'),
      tipo: t('portfolio.projects.nuevo.type'),
      cliente: t('portfolio.projects.nuevo.client'),
      tier: t('portfolio.tier.essential'),
      servicios: [
        t('portfolio.projects.nuevo.services.0'),
        t('portfolio.projects.nuevo.services.1'),
        t('portfolio.projects.nuevo.services.2'),
      ],
      rol: t('portfolio.projects.nuevo.role'),
      resultados: [
        { value: '—', label: t('portfolio.results.0.label') },
        { value: '—', label: t('portfolio.results.1.label') },
        { value: '—', label: t('portfolio.results.2.label') },
        { value: '—', label: t('portfolio.results.3.label') },
      ],
      desc: t('portfolio.projects.nuevo.description'),
    },
  ];

  const folderOrder = (file) => {
    const name = file.split('/').pop() || '';
    const match = name.match(/^(\d+)/);
    return match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
  };

  const galleryForFolder = (folder) => (
    LR_IMAGES.all
      .filter((img) => img.f.startsWith(`${folder}/`))
      .sort((a, b) => {
        const byNum = folderOrder(a.f) - folderOrder(b.f);
        return byNum !== 0 ? byNum : a.f.localeCompare(b.f);
      })
      .map((img) => img.f)
  );

  const projects = projectDefs
    .map((project) => ({ ...project, gallery: galleryForFolder(project.folder) }))
    .filter((project) => project.gallery.length > 0);

  const layout = [
    { col: '1 / 7', row: '1 / 3', h: 480, idx: 0 },
    { col: '7 / 13', row: '1 / 2', h: 230, idx: 1 },
    { col: '7 / 10', row: '2 / 3', h: 230, idx: 2 },
    { col: '10 / 13', row: '2 / 3', h: 230, idx: 3 },
    { col: '1 / 5', row: '3 / 4', h: 280, idx: 4 },
    { col: '5 / 9', row: '3 / 4', h: 280, idx: 5 },
    { col: '9 / 13', row: '3 / 4', h: 280, idx: 6 },
    ...(projects.length >= 9
      ? [
        { col: '1 / 9', row: '4 / 5', h: 360, idx: 7 },
        { col: '9 / 13', row: '4 / 5', h: 360, idx: 8 },
      ]
      : projects.length >= 8
        ? [{ col: '1 / 13', row: '4 / 5', h: 360, idx: 7 }]
        : []),
  ];

  const wallRef = React.useRef(null);
  const counterRef = window.useCounter(200, { prefix: '+', duration: 2.4 });
  const [openIdx, setOpenIdx] = React.useState(null);
  const [slideIdx, setSlideIdx] = React.useState(0);
  const [imgRatio, setImgRatio] = React.useState(null);
  const [infoExpanded, setInfoExpanded] = React.useState(false);

  React.useEffect(() => {
    // No scroll animations — hover-only effects are handled inline.
  }, []);

  // ESC closes, arrows navigate
  React.useEffect(() => {
    if (openIdx === null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setOpenIdx(null);
      if (e.key === 'ArrowRight') {
        const g = projects[openIdx].gallery;
        setSlideIdx((i) => (i + 1) % g.length);
      }
      if (e.key === 'ArrowLeft') {
        const g = projects[openIdx].gallery;
        setSlideIdx((i) => (i - 1 + g.length) % g.length);
      }
    };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [openIdx]);

  const openProject = (projectIdx) => {
    setOpenIdx(projectIdx);
    setSlideIdx(0);
    setInfoExpanded(false);
  };

  const current = openIdx !== null ? projects[openIdx] : null;
  const currentImgFile = current ? current.gallery[slideIdx] : null;
  const currentImg = currentImgFile ? LR_IMAGES.pick(currentImgFile) : null;

  return (
    <section ref={wallRef} id="portfolio" data-screen-label="04 Portfolio" className="pf-section" style={{
      background: 'var(--lr-cal-blanca)',
      padding: '40px 56px 140px',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="pf-header" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 56, paddingBottom: 24, borderBottom: '1px solid var(--lr-tierra-profunda)',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
              letterSpacing: '0.32em', textTransform: 'uppercase',
              color: 'var(--lr-terracota)', marginBottom: 14,
            }}>{t('portfolio.header.label')}</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 'clamp(32px, 3.6vw, 52px)', lineHeight: 1,
              letterSpacing: '-0.022em',
              color: 'var(--lr-tierra-profunda)', margin: 0,
            }}>
              {t('portfolio.header.title').replace(t('portfolio.header.subtitle'), '')}
              <em style={{
                fontFamily: 'var(--font-italic)', fontStyle: 'italic',
                color: 'var(--lr-terracota)',
              }}>{t('portfolio.header.subtitle')}</em>
            </h2>
          </div>
          <div style={{
            fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 10,
            letterSpacing: '0.32em', textTransform: 'uppercase',
            color: 'var(--lr-tierra-500)', textAlign: 'right',
            whiteSpace: 'pre-line',
            maxWidth: 360,
          }}>
            <span ref={counterRef}>+0</span>{t('portfolio.header.stats').replace(/^\+0/, '')}
            <div style={{
              marginTop: 14,
              fontFamily: 'var(--font-body)', fontWeight: 400, fontSize: 12,
              letterSpacing: 0, textTransform: 'none', lineHeight: 1.45,
              color: 'var(--lr-tierra-500)',
            }}>
              {t('portfolio.header.note')}
            </div>
          </div>
        </div>

        <div className="pf-grid-wall" style={{
          display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)',
          gap: 12, gridAutoRows: 'auto',
          background: 'transparent',
        }}>
          {layout.map((cell, i) => {
            const p = projects[cell.idx];
            const firstImg = LR_IMAGES.pick(p.gallery[0]);
            return (
              <a key={i} className="pf-card" href="#" onClick={(e) => { e.preventDefault(); openProject(cell.idx); }} style={{
                gridColumn: cell.col, gridRow: cell.row,
                height: cell.h,
                position: 'relative', overflow: 'hidden',
                borderRadius: 2, borderBottom: 'none',
                background: '#000', display: 'block', cursor: 'pointer',
                outline: 'none',
              }}
              onMouseEnter={(e) => {
                const zoom = e.currentTarget.querySelector('.bg-zoom');
                if (zoom) zoom.style.transform = 'scale(1.04)';
                const ov = e.currentTarget.querySelector('.ov');
                if (ov) ov.style.opacity = '1';
              }}
              onMouseLeave={(e) => {
                const zoom = e.currentTarget.querySelector('.bg-zoom');
                if (zoom) zoom.style.transform = 'scale(1)';
                const ov = e.currentTarget.querySelector('.ov');
                if (ov) ov.style.opacity = '0';
              }}>
                <div className="bg-zoom" style={{
                  position: 'absolute', inset: 0,
                  transition: 'transform 800ms var(--ease-standard)',
                  willChange: 'transform',
                }}>
                  <div className="bg" style={{
                    position: 'absolute', inset: '-1px',
                    backgroundImage: `url('${firstImg.src}')`,
                    backgroundSize: 'cover', backgroundPosition: 'center',
                  }} />
                </div>
                <div className="ov" style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(74,46,32,0.0) 40%, rgba(74,46,32,0.85) 100%)',
                  opacity: 0, transition: 'opacity 280ms',
                }} />
                <div style={{
                  position: 'absolute', bottom: 18, left: 18, right: 18,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                  fontFamily: 'var(--font-ui)', fontWeight: 600, fontSize: 11,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--lr-cal-blanca)',
                }}>
                  <h3 style={{
                    margin: 0, maxWidth: '70%', lineHeight: 1.3,
                    fontFamily: 'inherit', fontWeight: 'inherit', fontSize: 'inherit',
                    letterSpacing: 'inherit', textTransform: 'inherit', color: 'inherit',
                  }}>{p.title}</h3>
                  <span style={{ opacity: 0.8, fontSize: 9 }}>{p.loc}</span>
                </div>
              </a>
            );
          })}
        </div>
      </div>

      {/* Modal lightbox */}
      {current && (
        <div role="dialog" aria-modal="true" aria-label={current.title}
          onClick={() => setOpenIdx(null)}
          style={{
            position: 'fixed', inset: 0, zIndex: 100,
            background: 'rgba(27,20,16,0.92)',
            backdropFilter: 'blur(6px)',
            WebkitBackdropFilter: 'blur(6px)',
            display: 'flex', alignItems: 'stretch', justifyContent: 'center',
            animation: 'fadein 280ms var(--ease-standard)',
          }}>
          {/* Floating close button — fuera del modal animado para no saltar */}
          <button onClick={(e) => { e.stopPropagation(); setOpenIdx(null); }} aria-label={t('portfolio.modal.close')}
            className="pf-modal-close"
            style={{
              position: 'fixed', top: 52, right: 'max(52px, calc((100vw - 1800px) / 2 + 8px))', zIndex: 110,
              background: 'var(--lr-tierra-profunda)',
              border: '1px solid var(--lr-tierra-profunda)',
              width: 48, height: 48, fontSize: 24, lineHeight: 1, cursor: 'pointer',
              color: 'var(--lr-cal-blanca)',
              fontFamily: 'var(--font-ui)', fontWeight: 300,
              boxShadow: '0 6px 20px rgba(27,20,16,0.35)',
              transition: 'background 200ms var(--ease-standard), transform 200ms var(--ease-standard)',
            }}>×</button>

          <div onClick={(e) => e.stopPropagation()} className="pf-modal pf-modal-outer"
            style={{
              width: '100%', maxWidth: 1800,
              background: 'var(--lr-cal-blanca)',
              margin: '32px',
              overflow: 'hidden',
              maxHeight: 'calc(100vh - 64px)',
              overflowY: 'auto',
              animation: 'modalin 420ms var(--ease-standard)',
              position: 'relative',
              scrollBehavior: 'smooth',
            }}>

            {/* Editorial body: sticky info col + scrolling gallery col */}
            <div className="pf-modal-grid" style={{
              display: 'grid',
              gridTemplateColumns: '380px 1fr',
              alignItems: 'start',
            }}>
              {/* Sticky info column */}
              <aside className="pf-modal-aside" style={{
                position: 'sticky', top: 0,
                alignSelf: 'start',
                padding: '64px 48px 56px',
                borderRight: '1px solid var(--border-subtle)',
                background: 'var(--eidora-lino)',
                height: 'calc(100vh - 64px)',
                maxHeight: 'calc(100vh - 64px)',
                overflowY: 'auto',
                display: 'flex', flexDirection: 'column',
                gap: 32,
              }}>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 10,
                    letterSpacing: '0.32em', textTransform: 'uppercase',
                    color: 'var(--lr-terracota)',
                    marginBottom: 20,
                  }}>{t('portfolio.modal.info.label')} · {String(openIdx + 1).padStart(2, '0')}</div>

                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontWeight: 400,
                    fontSize: 40, lineHeight: 1.04, letterSpacing: '-0.018em',
                    color: 'var(--lr-tierra-profunda)',
                    margin: '0 0 8px',
                  }}>{current.title}</h3>
                  <div style={{
                    fontFamily: 'var(--font-italic)', fontStyle: 'italic', fontSize: 17,
                    color: 'var(--lr-terracota)', marginBottom: 28,
                  }}>{current.loc}</div>
                </div>

                <button
                  type="button"
                  className="pf-mobile-info-toggle"
                  onClick={() => setInfoExpanded((v) => !v)}
                  aria-expanded={infoExpanded}
                  style={{
                    display: 'none',
                    width: '100%',
                    background: 'var(--lr-cal-blanca)',
                    color: 'var(--lr-tierra-profunda)',
                    border: '1px solid var(--border-subtle)',
                    padding: '14px 16px',
                    fontFamily: 'var(--font-ui)',
                    fontWeight: 700,
                    fontSize: 10,
                    letterSpacing: '0.22em',
                    textTransform: 'uppercase',
                    textAlign: 'left',
                  }}
                >
                  {infoExpanded ? t('portfolio.modal.toggle.visible') : t('portfolio.modal.toggle.hidden')}
                  <span aria-hidden style={{ float: 'right' }}>{infoExpanded ? '−' : '+'}</span>
                </button>

                <div className={`pf-project-info${infoExpanded ? ' is-open' : ''}`} style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 32,
                }}>
                  <p style={{
                    fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.7,
                    color: 'var(--lr-tierra-500)', margin: 0,
                  }}>{current.desc}</p>
                  {current.rol && (
                    <div>
                      <div style={{
                        fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 9,
                        letterSpacing: '0.32em', textTransform: 'uppercase',
                        color: 'var(--lr-tierra-500)', marginBottom: 12,
                        paddingTop: 18,
                        borderTop: '1px solid var(--border-subtle)',
                      }}>{t('portfolio.modal.info.role')}</div>
                      <p style={{
                        fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.6,
                        color: 'var(--lr-tierra-profunda)', margin: 0,
                      }}>{current.rol}</p>
                    </div>
                  )}

                  <div style={{ marginTop: 'auto' }}>
                    <div style={{
                      fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 9,
                      letterSpacing: '0.32em', textTransform: 'uppercase',
                      color: 'var(--lr-tierra-500)', marginBottom: 12,
                      paddingTop: 18,
                      borderTop: '1px solid var(--border-subtle)',
                    }}>{t('portfolio.modal.info.services')}</div>
                    <ul style={{
                      listStyle: 'none', padding: 0, margin: '0 0 18px',
                      display: 'flex', flexWrap: 'wrap', gap: 6,
                    }}>
                      {current.servicios.map((s, k) => (
                        <li key={k} style={{
                          fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 10.5,
                          letterSpacing: '0.06em',
                          padding: '6px 10px',
                          border: '1px solid var(--border-subtle)',
                          background: 'var(--lr-cal-blanca)',
                          color: 'var(--lr-tierra-profunda)',
                        }}>{s}</li>
                      ))}
                    </ul>
                    <div style={{
                      fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 9,
                      letterSpacing: '0.32em', textTransform: 'uppercase',
                      color: 'var(--lr-tierra-500)',
                      paddingTop: 14,
                      borderTop: '1px solid var(--border-subtle)',
                    }}>
                      {String(current.gallery.length).padStart(2, '0')} imágenes · {current.tipo}
                    </div>
                  </div>
                </div>
              </aside>

              {/* Scrolling editorial gallery column */}
              <div style={{
                display: 'flex', flexDirection: 'column',
                background: 'var(--lr-cal-blanca)',
              }}>
                {current.gallery.map((file, gi) => {
                  const img = LR_IMAGES.pick(file);
                  const filename = file.split('/').pop();
                  const nameMatch = filename.match(/^\d+\.(.*)\.[^.]+$/);
                  const caption = nameMatch ? nameMatch[1] : filename;
                  return (
                    <figure key={gi} className="pf-modal-figure" data-first={gi === 0 ? 'true' : 'false'} style={{
                      margin: 0,
                      padding: gi === 0 ? '64px 64px 0' : '0 64px',
                      paddingBottom: 28,
                    }}>
                      <div style={{
                        position: 'relative',
                        background: 'var(--eidora-lino)',
                        overflow: 'hidden',
                      }}>
                        <img src={img.src} alt={`${current.title} — ${caption}`}
                          loading={gi === 0 ? 'eager' : 'lazy'}
                          style={{
                            display: 'block',
                            width: '100%',
                            height: 'auto',
                            objectFit: 'cover',
                          }} />
                      </div>
                      <figcaption className="pf-figcap" style={{
                        marginTop: 14,
                        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                        gap: 24,
                        fontFamily: 'var(--font-ui)', fontWeight: 600, fontSize: 10,
                        letterSpacing: '0.28em', textTransform: 'uppercase',
                        color: 'var(--lr-tierra-500)',
                        paddingBottom: 14,
                        borderBottom: gi < current.gallery.length - 1 ? 'none' : '1px solid var(--border-subtle)',
                      }}>
                        <span>
                          <span style={{ color: 'var(--lr-terracota)' }}>{String(gi + 1).padStart(2, '0')}</span>
                          <span style={{ margin: '0 10px', opacity: 0.4 }}>/</span>
                          <span>{String(current.gallery.length).padStart(2, '0')}</span>
                          <span style={{ margin: '0 14px', opacity: 0.4 }}>·</span>
                          <span style={{ color: 'var(--lr-tierra-profunda)' }}>{caption}</span>
                        </span>
                        <span style={{ opacity: 0.6 }}>{current.loc}</span>
                      </figcaption>
                    </figure>
                  );
                })}

                {/* Closing block */}
                <div className="pf-modal-closing" style={{
                  padding: '40px 64px 64px',
                  background: 'var(--lr-tierra-profunda)',
                  color: 'var(--lr-cal-blanca)',
                  marginTop: 24,
                }}>
                  <div style={{
                    fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 10,
                    letterSpacing: '0.32em', textTransform: 'uppercase',
                    color: 'var(--lr-terracota)', marginBottom: 16,
                  }}>{t('portfolio.modal.closing.label')}</div>
                  <p style={{
                    fontFamily: 'var(--font-display)', fontWeight: 400,
                    fontSize: 28, lineHeight: 1.2, letterSpacing: '-0.012em',
                    margin: 0, maxWidth: 540,
                  }}>
                    {t('portfolio.modal.closing.text')}
                    {' '}<em style={{
                      fontFamily: 'var(--font-italic)', fontStyle: 'italic',
                      color: 'var(--lr-arena)',
                    }}>{t('portfolio.modal.closing.cta')}</em>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <style>{`
        @keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
        @keyframes modalin {
          from { opacity: 0; transform: translateY(20px) scale(0.985) }
          to { opacity: 1; transform: translateY(0) scale(1) }
        }

        .pf-modal-close:hover {
          background: var(--lr-terracota) !important;
          border-color: var(--lr-terracota) !important;
          transform: scale(1.04);
        }
        .pf-modal-close:focus-visible {
          outline: 2px solid var(--lr-terracota);
          outline-offset: 3px;
        }

        @media (max-width: 768px) {
          .pf-section { padding: 32px 24px 80px !important; }
          .pf-grid-wall { grid-template-columns: repeat(2, 1fr) !important; }
          .pf-card { grid-column: auto !important; grid-row: auto !important; height: 240px !important; }
          .pf-card .ov { opacity: 1 !important; }
          .pf-card h3 { max-width: 100% !important; }
          .pf-card h3 + span { display: none !important; }
          .pf-modal-grid { grid-template-columns: 1fr !important; }
          .pf-modal-outer {
            margin: 0 !important;
            max-height: 100vh !important;
          }
          .pf-modal-aside {
            position: static !important;
            height: auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            padding: 40px 32px 28px !important;
            gap: 22px !important;
          }
          .pf-mobile-info-toggle {
            display: block !important;
          }
          .pf-project-info {
            max-height: 0 !important;
            overflow: hidden !important;
            opacity: 0 !important;
            gap: 24px !important;
            transition: max-height 320ms var(--ease-standard), opacity 240ms var(--ease-standard);
          }
          .pf-project-info.is-open {
            max-height: 760px !important;
            opacity: 1 !important;
          }
          .pf-modal-figure {
            padding-left: 0 !important;
            padding-right: 0 !important;
          }
          .pf-modal-figure[data-first="true"] {
            padding-top: 24px !important;
          }
          .pf-figcap {
            padding-left: 24px !important;
            padding-right: 24px !important;
          }
        }

        @media (max-width: 480px) {
          .pf-section { padding: 24px 16px 60px !important; }
          .pf-grid-wall { grid-template-columns: 1fr !important; }
          .pf-card { height: 280px !important; }
          .pf-header { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
          .pf-header > div:last-child { text-align: left !important; }
          .pf-modal-outer { margin: 0 !important; max-height: 100vh !important; }
          .pf-modal-aside { padding: 32px 24px !important; }
          .pf-modal-aside h3 { font-size: 32px !important; }
          .pf-modal-figure { padding-left: 0 !important; padding-right: 0 !important; }
          .pf-modal-figure:first-child { padding-top: 16px !important; }
          .pf-modal-closing { padding: 28px 24px 40px !important; }
          .pf-figcap {
            padding-left: 16px !important;
            padding-right: 16px !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
            letter-spacing: 0.16em !important;
          }
        }
      `}</style>
    </section>
  );
}

window.PortfolioWall = PortfolioWall;