// About.jsx — Felipe Fin Fanfa
function About() {
  const { lang } = React.useContext(window.LangContext);
  const t = window.ffT[lang].about;

  return (
    <section id="about" style={{
      background: 'rgba(1,4,10,0.76)', padding: '140px 24px 120px',
      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>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)', gap: 'clamp(48px, 6vw, 100px)', alignItems: 'start' }} className="ff-about-grid">
          <div>
            <h2 style={{
              fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 'clamp(32px, 4.6vw, 56px)',
              color: '#CED4F2', letterSpacing: '-0.035em', lineHeight: 1.05, margin: '0 0 36px',
              textWrap: 'balance',
            }}>
              <span data-build="words" data-stagger="60" style={{ display: 'block' }}>{t.h2a}</span>
              <span data-build="words" data-stagger="60" data-delay="200" style={{ display: 'block', color: '#707AA9' }}>{t.h2b}</span>
            </h2>
            <div data-build="stagger" data-stagger="120" data-dist="20" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <p style={{ fontFamily: 'Geist, sans-serif', fontSize: 17, color: '#A5ACCD', lineHeight: 1.7, margin: 0 }}>{t.p1}</p>
              <p style={{ fontFamily: 'Geist, sans-serif', fontSize: 17, color: '#A5ACCD', lineHeight: 1.7, margin: 0 }}>{t.p2}</p>
              <p style={{ fontFamily: 'Geist, sans-serif', fontSize: 17, color: '#707AA9', lineHeight: 1.7, margin: 0 }}>{t.p3}</p>
            </div>
          </div>

          <div data-build="slide-right" style={{
            background: 'linear-gradient(180deg, #070C18 0%, #04080F 100%)',
            border: '1px solid rgba(206,212,242,0.08)',
            borderRadius: 16, padding: 28,
            boxShadow: 'inset 0 1px 0 rgba(206,212,242,0.06)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -60, right: -60, width: 200, height: 200,
              background: 'radial-gradient(circle, rgba(28,96,218,0.18) 0%, transparent 70%)',
              pointerEvents: 'none',
            }} />

            <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 11, color: '#455084', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 22 }}>
              {t.glance}
            </div>

            <Row label={t.labels.basedIn}   value={t.values.basedIn} />
            <Row label={t.labels.role}       value={t.values.role} />
            <Row label={t.labels.education}  value={t.values.education} />
            <Row label={t.labels.focus}      value={t.values.focus} />
            <Row label={t.labels.languages}  value={t.values.languages} />
            <Row label={t.labels.status}     value={<><span style={{ width: 7, height: 7, borderRadius: '50%', background: '#22C55E', display: 'inline-block', marginRight: 8, boxShadow: '0 0 8px rgba(34,197,94,0.6)' }}/>{t.values.status}</>} last />
          </div>
        </div>
      </div>
    </section>
  );
}

function Row({ label, value, last }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
      padding: '14px 0',
      borderBottom: last ? 'none' : '1px solid rgba(206,212,242,0.06)',
    }}>
      <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 12, color: '#455084', letterSpacing: '0.04em' }}>{label}</span>
      <span style={{ fontFamily: 'Geist, sans-serif', fontSize: 13.5, color: '#CED4F2', fontWeight: 500, textAlign: 'right', display: 'inline-flex', alignItems: 'center' }}>{value}</span>
    </div>
  );
}

Object.assign(window, { About });