// Projects.jsx — Felipe Fin Fanfa

function Projects() {
  const { lang } = React.useContext(window.LangContext);
  const t = window.ffT[lang].projects;

  return (
    <section id="projects" style={{
      background: 'rgba(1,4,10,0.76)', padding: '120px 24px',
      position: 'relative', overflow: 'hidden', zIndex: 1,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className="ff-reveal" style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11.5, fontWeight: 500,
          color: '#1C60DA', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 28,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ width: 24, height: 1, background: '#1C60DA' }} />
          {t.section}
        </div>

        <h2 data-build="words" data-stagger="60" style={{
          fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 'clamp(32px, 4.6vw, 56px)',
          color: '#CED4F2', letterSpacing: '-0.035em', lineHeight: 1.05,
          margin: '0 0 56px', maxWidth: 720, textWrap: 'balance',
        }}>
          {t.heading}
        </h2>

        <FeaturedProject t={t} />
        <div style={{ height: 24 }} />

        <div data-build="stagger" data-stagger="120" data-dist="40" style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16,
        }}>
          {t.secondary.map((p, i) => (
            <SecondaryProject key={i} tag={p.tag} title={p.title} desc={p.desc} metrics={p.metrics} stack={p.stack} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedProject({ t }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      data-build="fade"
      data-y="40"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: 'relative',
        background: 'linear-gradient(180deg, #0B1122 0%, #070C18 100%)',
        border: `1px solid ${hovered ? 'rgba(28,96,218,0.4)' : 'rgba(206,212,242,0.1)'}`,
        borderRadius: 20, overflow: 'hidden',
        transition: 'all 360ms cubic-bezier(0.4,0,0.2,1)',
        transform: hovered ? 'translateY(-2px)' : 'none',
        boxShadow: hovered
          ? '0 24px 64px rgba(1,4,10,0.7), 0 0 0 1px rgba(28,96,218,0.2), 0 0 60px rgba(28,96,218,0.18)'
          : '0 12px 36px rgba(1,4,10,0.5), inset 0 1px 0 rgba(206,212,242,0.06)',
      }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)', alignItems: 'stretch' }} className="ff-feat-grid">
        <div style={{ padding: 'clamp(28px, 4vw, 48px)' }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 22 }}>
            <span style={{
              fontFamily: 'Geist Mono, monospace', fontSize: 10.5, fontWeight: 600,
              color: '#1C60DA', background: 'rgba(28,96,218,0.12)',
              border: '1px solid rgba(28,96,218,0.3)',
              padding: '4px 10px', borderRadius: 999, letterSpacing: '0.06em', textTransform: 'uppercase',
            }}>{t.featuredBadge}</span>
            <span style={{
              fontFamily: 'Geist Mono, monospace', fontSize: 10.5, fontWeight: 500,
              color: '#A5ACCD', background: 'rgba(206,212,242,0.05)',
              border: '1px solid rgba(206,212,242,0.1)',
              padding: '4px 10px', borderRadius: 999, letterSpacing: '0.06em', textTransform: 'uppercase',
            }}>{t.featuredTag}</span>
          </div>

          <h3 style={{
            fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 'clamp(26px, 3vw, 36px)',
            color: '#CED4F2', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 18px',
          }}>
            {t.featuredTitle}
          </h3>
          <p style={{
            fontFamily: 'Geist, sans-serif', fontSize: 16, color: '#A5ACCD', lineHeight: 1.65, margin: '0 0 28px',
          }}>
            {t.featuredDesc}
          </p>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 16, padding: '20px 0',
            borderTop: '1px solid rgba(206,212,242,0.08)',
            borderBottom: '1px solid rgba(206,212,242,0.08)',
            marginBottom: 28,
          }}>
            {[['30', t.statsLabels[0]], ['150', t.statsLabels[1]], ['600', t.statsLabels[2]]].map(([v, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 26, color: '#CED4F2', letterSpacing: '-0.03em' }}>{v}</div>
                <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10.5, color: '#455084', marginTop: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{l}</div>
              </div>
            ))}
          </div>

          <a href="https://github.com/felipefinfanfa" target="_blank" rel="noreferrer" style={{
            fontFamily: 'Geist, sans-serif', fontSize: 14, fontWeight: 600,
            color: '#CED4F2', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'gap 200ms',
          }}
          onMouseEnter={e => e.currentTarget.style.gap = '12px'}
          onMouseLeave={e => e.currentTarget.style.gap = '8px'}
          >
            {t.viewGithub}
            <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M7 17L17 7M7 7h10v10"/></svg>
          </a>
        </div>

        <div style={{
          position: 'relative', minHeight: 360,
          background: 'radial-gradient(ellipse at top right, rgba(28,96,218,0.18) 0%, transparent 60%), linear-gradient(135deg, #0E163B 0%, #01040A 100%)',
          borderLeft: '1px solid rgba(206,212,242,0.06)', overflow: 'hidden',
        }}>
          <ExposureViz exposureTitle={t.exposureTitle} exposureN={t.exposureN} />
        </div>
      </div>
    </div>
  );
}

function ExposureViz({ exposureTitle, exposureN }) {
  const occupations = [
    { name: 'Accounting Technician', score: 0.60 },
    { name: 'Admin Supervisor',       score: 0.50 },
    { name: 'Administrator',          score: 0.475 },
    { name: 'Bank Clerk',             score: 0.475 },
    { name: 'Financial Analyst',      score: 0.475 },
    { name: 'Logistics Analyst',      score: 0.45 },
    { name: 'Economist',              score: 0.45 },
    { name: 'Real Estate Agent',      score: 0.425 },
    { name: 'Nurse',                  score: 0.35 },
    { name: 'Plumber',                score: 0.275 },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, padding: 28, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10.5, color: '#455084', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          {exposureTitle}
        </div>
        <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10.5, color: '#455084' }}>
          {exposureN}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
        {occupations.map((o, i) => (
          <ExposureBar key={o.name} name={o.name} score={o.score} delay={i * 70} />
        ))}
      </div>
    </div>
  );
}

function ExposureBar({ name, score, delay }) {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setTimeout(() => setVisible(true), delay); io.disconnect(); }
    }, { threshold: 0.3 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [delay]);

  return (
    <div ref={ref} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 36px', alignItems: 'center', gap: 12 }}>
      <span style={{ fontFamily: 'Geist, sans-serif', fontSize: 11, color: '#A5ACCD', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</span>
      <div style={{ height: 8, background: 'rgba(206,212,242,0.05)', borderRadius: 4, overflow: 'hidden' }}>
        <div style={{
          height: '100%', width: visible ? `${score * 100}%` : '0%',
          background: `linear-gradient(90deg, #1C60DA 0%, ${score > 0.6 ? '#6FA3FF' : '#1C60DA'} 100%)`,
          transition: 'width 1100ms cubic-bezier(0.22,0.61,0.36,1)',
          boxShadow: '0 0 12px rgba(28,96,218,0.4)',
        }} />
      </div>
      <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10.5, color: '#707AA9', textAlign: 'right' }}>
        {score.toFixed(2)}
      </span>
    </div>
  );
}

function SecondaryProject({ tag, title, desc, metrics, stack }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: hovered ? '#0B1122' : '#070C18',
        border: `1px solid ${hovered ? 'rgba(206,212,242,0.18)' : 'rgba(206,212,242,0.07)'}`,
        borderRadius: 14, padding: 24,
        transition: 'all 280ms cubic-bezier(0.4,0,0.2,1)',
        transform: hovered ? 'translateY(-2px)' : 'none',
        boxShadow: hovered ? '0 12px 36px rgba(1,4,10,0.6)' : '0 2px 12px rgba(1,4,10,0.3)',
        display: 'flex', flexDirection: 'column',
      }}>
      <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10.5, fontWeight: 500, color: '#1C60DA', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>{tag}</div>
      <h4 style={{ fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 19, color: '#CED4F2', letterSpacing: '-0.02em', margin: '0 0 10px' }}>{title}</h4>
      <p style={{ fontFamily: 'Geist, sans-serif', fontSize: 14, color: '#707AA9', lineHeight: 1.6, margin: '0 0 20px' }}>{desc}</p>

      <div style={{ display: 'flex', gap: 20, marginBottom: 18, marginTop: 'auto' }}>
        {metrics.map(([v, l]) => (
          <div key={l}>
            <div style={{ fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 18, color: '#CED4F2', letterSpacing: '-0.02em' }}>{v}</div>
            <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10, color: '#455084', marginTop: 2, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{l}</div>
          </div>
        ))}
      </div>

      <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 11, color: '#455084', paddingTop: 14, borderTop: '1px solid rgba(206,212,242,0.06)' }}>{stack}</div>
    </div>
  );
}

Object.assign(window, { Projects });