// portfolio.jsx — featured work with Y2K depth visuals
const { useRef: __pr, useState: __ps, useEffect: __pe } = React;

function Portfolio({ t }) {
  return (
    <section id="work" style={{
      borderTop: '1.5px solid var(--ink)',
      paddingTop: 120, paddingBottom: 120,
      background: 'var(--paper)', position: 'relative'
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <div className="kicker reveal" style={{ marginBottom: 28 }}>
              <span className="dot"></span>{t.work_eye}
            </div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(56px, 8vw, 128px)' }}>
              <div>{t.work_title_1}</div>
              <div className="irid-text" style={{ fontWeight: 800, fontVariationSettings: '"wdth" 75' }}>
                {t.work_title_2}
              </div>
            </h2>
          </div>
          <p className="reveal" style={{ fontSize: 20, color: 'var(--ink)', maxWidth: 400, alignSelf: 'end' }}>
            {t.work_sub}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
          {t.works.map((w, i) => (
            <WorkCard key={w.id} work={w} index={i} ctaLabel={t.work_view} />
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkCard({ work, index, ctaLabel }) {
  const [hover, setHover] = __ps(false);

  return (
    <a href={`#case-${work.id}`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       className="reveal clickable" data-hover
       style={{
         display: 'block', textDecoration: 'none', color: 'var(--ink)',
         marginTop: index % 2 ? 80 : 0,
       }}>
      <div style={{
        position: 'relative', borderRadius: 24, overflow: 'hidden',
        aspectRatio: '4/3', marginBottom: 24,
        border: '1.5px solid var(--ink)',
        background: `var(--${work.bgColor})`,
        boxShadow: hover ? '12px 12px 0 var(--ink)' : '6px 6px 0 var(--ink)',
        transform: hover ? 'translate(-6px, -6px)' : 'translate(0,0)',
        transition: 'transform 0.5s var(--ease-snap), box-shadow 0.5s'
      }}>
        <WorkVisual kind={work.kind} hover={hover} bgColor={work.bgColor} />

        {/* Overlay */}
        <div style={{
          position: 'absolute', inset: 0, padding: 28, pointerEvents: 'none',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className="chip filled" style={{
              background: 'var(--ink)', color: `var(--${work.bgColor})`,
              border: 'none'
            }}>{work.year}</span>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em',
              color: 'var(--ink)', fontWeight: 700
            }}>
              0{index + 1} · 0{4}
            </span>
          </div>
          <div className="kicker" style={{ color: 'var(--ink)', fontWeight: 700, fontSize: 11, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="sparkles" size={14} color="var(--magenta)" /> {work.metric}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'start' }}>
        <div>
          <div className="kicker" style={{ marginBottom: 8 }}>{work.client}</div>
          <h3 className="display" style={{
            fontSize: 'clamp(22px, 2.3vw, 32px)',
            lineHeight: 1.05, marginBottom: 14, fontWeight: 600
          }}>
            {work.title}
          </h3>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {work.services.map(s => <span key={s} className="chip">{s}</span>)}
          </div>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 13, fontWeight: 600,
          color: hover ? 'var(--magenta)' : 'var(--ink)',
          transition: 'color 0.3s', whiteSpace: 'nowrap', marginTop: 6
        }}>
          {ctaLabel}
          <span style={{ transform: hover ? 'translateX(6px) rotate(-45deg)' : 'translateX(0)', transition: 'transform 0.4s var(--ease-snap)' }}>↗</span>
        </span>
      </div>
    </a>
  );
}

function WorkVisual({ kind, hover, bgColor }) {
  if (kind === 'dashboard') {
    return (
      <div style={{ position: 'absolute', inset: 0 }}>
        <div style={{
          position: 'absolute', inset: '18% 8% 10% 8%',
          background: 'var(--paper)', borderRadius: 10,
          border: '1.5px solid var(--ink)',
          boxShadow: '6px 6px 0 var(--ink)',
          padding: 14,
          transform: hover ? 'translateY(-6px) rotate(-1deg)' : 'rotate(-2deg)',
          transition: 'transform 0.5s var(--ease-snap)'
        }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{
                flex: 1, padding: 10, background: i === 1 ? 'var(--ink)' : 'transparent',
                color: i === 1 ? 'var(--bg)' : 'var(--ink)',
                border: '1.5px solid var(--ink)', borderRadius: 8
              }}>
                <div style={{ fontSize: 8, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', marginBottom: 6 }}>
                  {['EN RUTA', 'ENTREGADO', 'PENDIENTE'][i]}
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-display)' }}>
                  {['247', '1,842', '38'][i]}
                </div>
              </div>
            ))}
          </div>
          <div style={{
            height: 70, background: `var(--${bgColor})`, borderRadius: 6,
            border: '1.5px solid var(--ink)', position: 'relative', overflow: 'hidden'
          }}>
            <svg viewBox="0 0 200 70" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <path d="M0,50 Q40,10 80,30 T160,20 L200,10" stroke="var(--ink)" strokeWidth="2" fill="none" />
              <path d="M0,50 Q40,10 80,30 T160,20 L200,10 L200,70 L0,70Z" fill="var(--ink)" opacity="0.15" />
            </svg>
          </div>
        </div>
      </div>
    );
  }
  if (kind === 'app') {
    return (
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
          width: 180, height: 360, borderRadius: 32,
          background: 'var(--ink)', border: '5px solid var(--ink)',
          padding: 8, position: 'relative',
          boxShadow: '8px 8px 0 var(--ink)',
          transform: hover ? 'rotate(-4deg) translateY(-6px)' : 'rotate(0)',
          transition: 'transform 0.5s var(--ease-snap)'
        }}>
          <div style={{
            background: 'var(--paper)', borderRadius: 24, height: '100%',
            padding: 16, display: 'flex', flexDirection: 'column'
          }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8, color: 'var(--ink)', marginBottom: 20 }}>9:41</div>
            <div className="display" style={{ fontSize: 26, lineHeight: 0.95, fontStyle: 'italic', marginBottom: 14 }}>
              Casas en<br/>el bosque.
            </div>
            <div style={{
              flex: 1, background: `var(--${bgColor})`, borderRadius: 12,
              border: '1.5px solid var(--ink)'
            }} />
            <div style={{
              marginTop: 12, padding: 10, background: 'var(--ink)',
              color: 'var(--bg)', borderRadius: 8, fontSize: 11,
              textAlign: 'center', fontWeight: 600
            }}>Reservar</div>
          </div>
        </div>
      </div>
    );
  }
  if (kind === 'brand') {
    return (
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        alignItems: 'center', justifyContent: 'center'
      }}>
        <div className="display" style={{
          fontSize: 'clamp(80px, 13vw, 180px)', lineHeight: 0.82,
          textAlign: 'center', color: 'var(--ink)',
          fontStyle: 'italic',
          transform: hover ? 'scale(1.08) rotate(-2deg)' : 'scale(1)',
          transition: 'transform 0.6s var(--ease-snap)'
        }}>
          Bonté
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.45em',
            fontStyle: 'normal', fontWeight: 600, color: 'var(--ink)', marginTop: 8
          }}>CAFÉ™</div>
        </div>
      </div>
    );
  }
  if (kind === 'shop') {
    return (
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
          width: 240, height: 240, position: 'relative',
          transform: hover ? 'rotate(30deg)' : 'rotate(0deg)',
          transition: 'transform 1.2s var(--ease-snap)'
        }}>
          {/* Ring */}
          <div style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            background: 'var(--chrome-warm)',
            border: '1.5px solid var(--ink)',
            boxShadow: 'inset 0 -20px 40px rgba(0,0,0,0.4), inset 0 20px 40px rgba(255,255,255,0.5), 8px 8px 0 var(--ink)',
          }} />
          <div style={{
            position: 'absolute', inset: '20%', borderRadius: '50%',
            background: `var(--${bgColor})`,
            border: '1.5px solid var(--ink)',
          }} />
          {/* Gem */}
          <div style={{
            position: 'absolute', top: '35%', left: '40%', width: 40, height: 40,
            background: 'var(--iridescent)', backgroundSize: '200% 200%',
            animation: 'iridShift 4s linear infinite',
            border: '1.5px solid var(--ink)',
            transform: 'rotate(45deg)',
            boxShadow: 'inset 0 0 20px rgba(255,255,255,0.5)'
          }} />
        </div>
      </div>
    );
  }
  return null;
}

Object.assign(window, { Portfolio, WorkCard, WorkVisual });