// Experience.jsx — Felipe Fin Fanfa

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

  return (
    <section id="experience" style={{
      background: 'rgba(4,8,15,0.76)', padding: '120px 24px',
      position: 'relative', overflow: 'hidden', zIndex: 1,
      borderTop: '1px solid rgba(206,212,242,0.05)',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
        width: 800, height: 400,
        background: 'radial-gradient(ellipse 60% 60% at 50% 0%, rgba(28,96,218,0.08) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <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="55" style={{
          fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 'clamp(32px, 4.6vw, 56px)',
          color: '#CED4F2', letterSpacing: '-0.035em', lineHeight: 1.05,
          margin: '0 0 72px', maxWidth: 720, textWrap: 'balance',
        }}>
          {t.heading}
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {t.jobs.map((job, i) => (
            <ExperienceItem key={i} job={job} index={i} last={i === t.jobs.length - 1} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ExperienceItem({ job, index, last }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      data-build="fade"
      data-y="40"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="ff-exp-item"
      style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(160px, 200px) minmax(0, 1fr)',
        gap: 'clamp(24px, 4vw, 64px)',
        padding: '36px 0',
        borderTop: '1px solid rgba(206,212,242,0.07)',
        borderBottom: last ? '1px solid rgba(206,212,242,0.07)' : 'none',
        transition: 'background 280ms',
        background: hovered ? 'linear-gradient(180deg, rgba(28,96,218,0.02) 0%, transparent 100%)' : 'transparent',
      }}>
      <div>
        <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 11.5, color: hovered ? '#A5ACCD' : '#455084', letterSpacing: '0.04em', transition: 'color 240ms' }}>
          {job.dates}
        </div>
        <div style={{ marginTop: 10, fontFamily: 'Geist Mono, monospace', fontSize: 11, color: '#455084' }}>
          {job.type}
        </div>
      </div>

      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap', marginBottom: 18 }}>
          <h3 style={{
            fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 22,
            color: '#CED4F2', letterSpacing: '-0.02em', margin: 0,
          }}>{job.role}</h3>
          <span style={{ color: '#1C60DA', fontFamily: 'Geist, sans-serif', fontSize: 16, fontWeight: 500 }}>·</span>
          <span style={{ fontFamily: 'Geist, sans-serif', fontWeight: 500, fontSize: 17, color: '#A5ACCD' }}>{job.company}</span>
        </div>

        <ul style={{ margin: '0 0 22px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {job.bullets.map((b, i) => (
            <li key={i} style={{
              fontFamily: 'Geist, sans-serif', fontSize: 15, color: '#A5ACCD', lineHeight: 1.65,
              paddingLeft: 18, position: 'relative',
            }}>
              <span style={{
                position: 'absolute', left: 0, top: '0.7em',
                width: 6, height: 1, background: 'rgba(28,96,218,0.7)',
              }} />
              {b}
            </li>
          ))}
        </ul>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {job.stack.map(t => (
            <span key={t} style={{
              fontFamily: 'Geist Mono, monospace', fontSize: 11, fontWeight: 500,
              color: '#A5ACCD',
              background: 'rgba(206,212,242,0.04)',
              border: '1px solid rgba(206,212,242,0.08)',
              padding: '4px 10px', borderRadius: 6,
            }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Experience });