/* ============================================================
   SECTIONS 2 — Sobre mí, Proyectos (grid filtrable), Lightbox
   ============================================================ */

/* ---------- Sobre mí ---------- */
function About({ refMap }) {
  return (
    <section id="sobre" ref={(el) => { if (refMap) refMap.current['sobre'] = el; }} style={{ background: 'var(--color-surface)', padding: 'clamp(64px, 9vh, 112px) 0', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
      <div className="about-grid" style={{ maxWidth: 1240, margin: '0 auto', padding: '0 clamp(20px, 4vw, 44px)', display: 'grid', gridTemplateColumns: '0.82fr 1.18fr', gap: 'clamp(36px, 6vw, 80px)', alignItems: 'center' }}>
        <Reveal>
          <div style={{ position: 'relative', maxWidth: 380, margin: '0 auto' }}>
            <div style={{ position: 'absolute', left: -16, top: -16, right: 28, bottom: 28, background: 'var(--color-accent)', borderRadius: 'var(--radius-xl)' }} />
            <div style={{ position: 'absolute', left: 20, top: 20, right: -16, bottom: -16, border: '1px solid var(--color-border-strong)', borderRadius: 'var(--radius-xl)' }} />
            <img src="assets/img/yan-2026.jpg" alt="Yan Trotta" style={{ position: 'relative', width: '100%', aspectRatio: '4 / 5', objectFit: 'cover', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', display: 'block' }} />
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <SectionLabel variant="rule">Sobre mí</SectionLabel>
            <p style={{ margin: 0, fontWeight: 'var(--weight-light)', fontSize: 'clamp(19px, 2.2vw, 26px)', lineHeight: 1.4, letterSpacing: 'var(--tracking-tight)', color: 'var(--color-heading)', textWrap: 'pretty' }}>
              «Llevo el proyecto del concepto a la entrega: diseño, presupuesto, materiales y obra, con la misma exigencia en cada fase.»
            </p>
            {ABOUT.map((p, i) => (
              <p key={i} style={{ margin: 0, fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--color-text-muted)' }}>{p}</p>
            ))}
            <div className="about-skills" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 8 }}>
              <div>
                <SectionLabel style={{ marginBottom: 14 }}>Habilidades clave</SectionLabel>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{SKILLS.map((s) => <Badge key={s} variant="soft">{s}</Badge>)}</div>
              </div>
              <div>
                <SectionLabel style={{ marginBottom: 14 }}>Herramientas</SectionLabel>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{TOOLS.map((s) => <Badge key={s} variant="outline">{s}</Badge>)}</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Proyectos ---------- */
function Projects({ refMap, onOpen }) {
  const [filter, setFilter] = React.useState('Todos');
  const shown = PROJECTS.filter((p) => filter === 'Todos' || p.cat === filter);
  return (
    <section id="proyectos" ref={(el) => { if (refMap) refMap.current['proyectos'] = el; }} style={{ background: 'var(--color-bg)', padding: 'clamp(64px, 9vh, 112px) 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 clamp(20px, 4vw, 44px)' }}>
        <Reveal>
          <SectionHead eyebrow="Selección de trabajos" title="Proyectos representativos"
            kicker="Escenografía y eventos, vivienda residencial, reformas, arquitectura comercial, home staging y diseño. Abre cada proyecto para recorrer su galería." />
        </Reveal>
        <Reveal delay={80}>
          <div className="filters" style={{ display: 'flex', flexWrap: 'wrap', gap: 10, margin: '28px 0 32px' }}>
            {FILTERS.map((f) => <FilterChip key={f} label={f} active={filter === f} onClick={() => setFilter(f)} count={f === 'Todos' ? PROJECTS.length : PROJECTS.filter((p) => p.cat === f).length} />)}
          </div>
        </Reveal>
        <div className="proj-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoRows: '1fr', gap: 22 }}>
          {shown.map((p, i) => (
            <div key={p.title} style={{ gridColumn: p.span === 2 ? 'span 2' : 'span 1' }}>
              <PortfolioTile p={p} i={i} onOpen={onOpen} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FilterChip({ label, active, onClick, count }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-semibold)',
        fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', cursor: 'pointer',
        padding: '9px 16px', borderRadius: 'var(--radius-sm)',
        color: active ? 'var(--color-on-primary)' : (h ? 'var(--color-heading)' : 'var(--color-text-muted)'),
        background: active ? 'var(--color-primary)' : (h ? 'var(--color-surface-2)' : 'transparent'),
        border: `1px solid ${active ? 'var(--color-primary)' : 'var(--color-border-strong)'}`,
        transition: 'all var(--dur-fast) var(--ease-out)' }}>
      {label}
      <span style={{ fontSize: 10, opacity: 0.7 }}>{count}</span>
    </button>
  );
}

function PortfolioTile({ p, i, onOpen }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={(i % 3) * 80} style={{ height: '100%' }}>
      <a href="#" onClick={(e) => { e.preventDefault(); onOpen(p); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: 'block', position: 'relative', height: '100%', minHeight: 280, textDecoration: 'none', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
          border: '1px solid var(--color-border)', boxShadow: h ? 'var(--shadow-md)' : 'var(--shadow-xs)',
          transform: h ? 'translateY(-3px)' : 'none', transition: 'box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)' }}>
        <img src={p.image} alt={p.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block', transform: h ? 'scale(1.05)' : 'scale(1)', transition: 'transform var(--dur-slow) var(--ease-out)' }} />
        <div style={{ position: 'absolute', inset: 0, background: h
          ? 'linear-gradient(180deg, rgba(10,21,29,0.10) 0%, rgba(10,21,29,0.30) 45%, rgba(10,21,29,0.86) 100%)'
          : 'linear-gradient(180deg, rgba(10,21,29,0) 30%, rgba(10,21,29,0.20) 62%, rgba(10,21,29,0.78) 100%)', transition: 'background var(--dur-base)' }} />
        <span style={{ position: 'absolute', top: 14, left: 14, fontSize: 9, fontWeight: 600, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--white)', background: 'rgba(10,21,29,0.55)', backdropFilter: 'blur(4px)', padding: '5px 10px', borderRadius: 'var(--radius-sm)' }}>{p.cat}</span>
        <span style={{ position: 'absolute', top: 14, right: 14, width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radius-full)', background: 'var(--color-accent)', color: 'var(--color-on-accent)', opacity: h ? 1 : 0, transform: h ? 'scale(1)' : 'scale(0.7)', transition: 'all var(--dur-base) var(--ease-out)' }}>
          <Icon name="plus" size={17} stroke={2.4} />
        </span>
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '18px 18px 20px' }}>
          <h3 style={{ margin: 0, fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-lg)', letterSpacing: 'var(--tracking-tight)', color: 'var(--white)', lineHeight: 'var(--leading-snug)', textWrap: 'balance' }}>{p.title}</h3>
          <p style={{ margin: '7px 0 0', fontSize: 'var(--text-xs)', color: 'rgba(255,255,255,0.78)', letterSpacing: 'var(--tracking-wide)' }}>{p.place}</p>
        </div>
        {p.images && p.images.length > 1 ? (
          <span style={{ position: 'absolute', bottom: 16, right: 14, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 10, fontWeight: 600, letterSpacing: 'var(--tracking-wide)', color: 'var(--white)', background: 'rgba(10,21,29,0.55)', backdropFilter: 'blur(4px)', padding: '5px 9px', borderRadius: 'var(--radius-sm)' }}>
            <Icon name="images" size={12} stroke={2} />{p.images.length}
          </span>
        ) : null}
      </a>
    </Reveal>
  );
}

/* ---------- Lightbox (con galería) ---------- */
function Lightbox({ project, onClose }) {
  const gallery = project ? (project.images && project.images.length ? project.images : [project.image]) : [];
  const [idx, setIdx] = React.useState(0);
  const multi = gallery.length > 1;
  React.useEffect(() => { setIdx(0); }, [project]);
  React.useEffect(() => {
    if (!project) return;
    const fn = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowRight' && multi) setIdx((i) => (i + 1) % gallery.length);
      else if (e.key === 'ArrowLeft' && multi) setIdx((i) => (i - 1 + gallery.length) % gallery.length);
    };
    window.addEventListener('keydown', fn);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', fn); document.body.style.overflow = ''; };
  }, [project, multi, gallery.length]);
  if (!project) return null;
  const go = (d) => setIdx((i) => (i + d + gallery.length) % gallery.length);
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 120, background: 'rgba(10,21,29,0.84)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'clamp(16px, 4vw, 48px)', animation: 'fadeIn 200ms var(--ease-out)' }}>
      <div onClick={(e) => e.stopPropagation()} className="lb-card" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.3fr) minmax(300px, 0.86fr)', gridTemplateRows: 'minmax(0, 1fr)', background: 'var(--color-surface)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', maxWidth: 1040, width: '100%', maxHeight: '90vh', boxShadow: 'var(--shadow-lg)' }}>
        <div className="lb-img" style={{ position: 'relative', minWidth: 0, minHeight: 340, background: 'var(--navy-900)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${gallery[idx]})`, backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(28px) brightness(0.5)', transform: 'scale(1.1)' }} />
            <img key={idx} src={gallery[idx]} alt={project.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', display: 'block', animation: 'fadeIn 280ms var(--ease-out)' }} />
            <span style={{ position: 'absolute', bottom: 14, left: 14, background: 'rgba(10,21,29,0.78)', color: '#fff', fontSize: 10, fontWeight: 600, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', padding: '6px 12px', borderRadius: 'var(--radius-sm)' }}>{project.cat}</span>
            {multi ? (
              <React.Fragment>
                <button onClick={() => go(-1)} aria-label="Anterior" style={lbArrow('left')}><Icon name="chevron-left" size={22} stroke={2.4} /></button>
                <button onClick={() => go(1)} aria-label="Siguiente" style={lbArrow('right')}><Icon name="chevron-right" size={22} stroke={2.4} /></button>
                <span style={{ position: 'absolute', bottom: 14, right: 14, background: 'rgba(10,21,29,0.78)', color: '#fff', fontSize: 11, fontWeight: 600, letterSpacing: 'var(--tracking-wide)', padding: '5px 11px', borderRadius: 'var(--radius-full)' }}>{idx + 1} / {gallery.length}</span>
              </React.Fragment>
            ) : null}
          </div>
          {multi ? (
            <div className="lb-thumbs" style={{ display: 'flex', gap: 8, padding: 10, background: 'var(--navy-800)', overflowX: 'auto', minWidth: 0 }}>
              {gallery.map((src, i) => (
                <button key={i} onClick={() => setIdx(i)} style={{ flex: '0 0 auto', width: 60, height: 46, padding: 0, border: `2px solid ${i === idx ? 'var(--color-accent)' : 'transparent'}`, borderRadius: 'var(--radius-sm)', overflow: 'hidden', cursor: 'pointer', background: 'none', opacity: i === idx ? 1 : 0.6, transition: 'opacity var(--dur-fast), border-color var(--dur-fast)' }}>
                  <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </button>
              ))}
            </div>
          ) : null}
        </div>
        <div className="lb-body" style={{ position: 'relative', padding: 'clamp(26px, 4vw, 44px)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 16, overflowY: 'auto', minHeight: 0 }}>
          <button onClick={onClose} aria-label="Cerrar" style={{ position: 'absolute', top: 18, right: 18, width: 40, height: 40, borderRadius: 'var(--radius-full)', border: '1px solid var(--color-border)', background: 'var(--color-surface)', color: 'var(--color-heading)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="x" size={18} stroke={2.2} />
          </button>
          <SectionLabel variant="eyebrow">{project.place}</SectionLabel>
          <h3 style={{ margin: 0, fontWeight: 'var(--weight-bold)', fontSize: 'clamp(24px, 3vw, var(--text-2xl))', letterSpacing: 'var(--tracking-tight)', color: 'var(--color-heading)', lineHeight: 1.1, textWrap: 'balance' }}>{project.title}</h3>
          <span style={{ width: 48, height: 3, background: 'var(--color-accent)' }} />
          <p style={{ margin: 0, fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--color-text)' }}>{project.blurb}</p>
          {multi ? <p style={{ margin: 0, fontSize: 'var(--text-xs)', color: 'var(--color-text-subtle)', letterSpacing: 'var(--tracking-wide)' }}>Usa las flechas o las miniaturas para recorrer {gallery.length} imágenes.</p> : null}
        </div>
      </div>
    </div>
  );
}

function lbArrow(side) {
  return { position: 'absolute', top: '50%', [side]: 14, transform: 'translateY(-50%)', width: 46, height: 46, borderRadius: 'var(--radius-full)', border: 'none', background: 'var(--white)', color: 'var(--color-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 16px rgba(10,21,29,0.35)', zIndex: 3 };
}

Object.assign(window, { About, Projects, Lightbox });
