// Work + Stack

function WorkCardLogo({ slug }) {
  // Tenta carregar /images/logos/{slug}.png. Se falhar (404), some.
  const [errored, setErrored] = React.useState(false);
  if (!slug || errored) return null;
  return (
    <img
      className="work-logo"
      src={`/images/logos/${slug}.png`}
      alt=""
      loading="lazy"
      onError={() => setErrored(true)}
    />
  );
}

function WorkCard({ it, idx, lang }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(1200px) rotateX(${-y * 6}deg) rotateY(${x * 8}deg) translateZ(0)`;
    el.style.setProperty('--mx', `${(x + 0.5) * 100}%`);
    el.style.setProperty('--my', `${(y + 0.5) * 100}%`);
  };
  const onLeave = () => {
    const el = ref.current; if (!el) return;
    el.style.transform = '';
  };

  const patterns = [
    'art-stripes', 'art-grid', 'art-rings', 'art-mesh'
  ];
  const artClass = patterns[idx % patterns.length];

  const isLive = it.status === 'live';
  const isClickable = !!it.website;
  const statusLabel = isLive
    ? (lang === 'pt' ? 'NO AR' : 'LIVE')
    : (lang === 'pt' ? 'EM CONSTRUÇÃO' : 'IN PROGRESS');
  const visitLabel = lang === 'pt' ? 'Visitar site' : 'Visit site';

  // Card content (idêntico para link ou div)
  const inner = (
    <>
      <div className={`work-art ${artClass}`} aria-hidden="true" />
      <div className="work-card-inner">
        <div className="work-card-top">
          <WorkCardLogo slug={it.slug} />
          <span className={`work-status work-status-${it.status} mono`}>
            <span className="status-dot" aria-hidden="true" />
            {statusLabel}
          </span>
        </div>
        <div className="work-card-bottom">
          <div className="work-meta mono">
            <span>{it.tag}</span>
            <span>{it.year}</span>
          </div>
          <h3 className="work-title serif">{it.t}</h3>
          <div className="work-card-foot">
            <div className="work-stat mono">{it.stat}</div>
            {isClickable && (
              <span className="work-visit mono" aria-hidden="true">
                {visitLabel} <span className="arrow">↗</span>
              </span>
            )}
          </div>
        </div>
      </div>
    </>
  );

  const className = `work-card work-card-${it.status}${isClickable ? ' work-card-clickable' : ''}`;

  if (isClickable) {
    return (
      <a
        ref={ref}
        href={it.website}
        target="_blank"
        rel="noopener noreferrer"
        className={className}
        onMouseMove={onMove}
        onMouseLeave={onLeave}
        aria-label={`${it.t} — ${visitLabel}`}
        data-cursor
      >
        {inner}
      </a>
    );
  }

  return (
    <div
      ref={ref}
      className={className}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      data-cursor
    >
      {inner}
    </div>
  );
}

function Work({ t, lang }) {
  return (
    <section id="work" className="work">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.work.eyebrow}</span>
          <h2 className="section-title serif">{t.work.title}</h2>
          <p className="section-sub">{t.work.sub}</p>
        </div>
        <div className="work-grid reveal-stagger">
          {t.work.items.map((it, i) => (
            <WorkCard key={i} it={it} idx={i} lang={lang} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Stack({ t }) {
  return (
    <section id="stack" className="stack">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t.stack.eyebrow}</span>
          <h2 className="section-title serif">{t.stack.title}</h2>
          <p className="section-sub">{t.stack.sub}</p>
        </div>
        <div className="stack-grid reveal-stagger">
          {t.stack.groups.map((g, i) => (
            <div key={i} className="stack-col">
              <div className="stack-label mono">{g.g}</div>
              <ul className="stack-list">
                {g.items.map((x, j) => (
                  <li key={j} className="stack-item">
                    <span className="stack-bullet">◆</span>
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Work = Work;
window.Stack = Stack;