// About + Experience timeline
function CineAbout() {
  const isMobile = useIsMobile();
  const px = isMobile ? '24px' : '56px';

  const exp = [
    { date: 'Oct 2024, Present', company: 'Dataverso', role: 'Programmer',
      bullets: [
        'Built a machine-learning system that evaluates mine bench (berm) stability and rockfall risk, cutting geologists’ manual analysis time by roughly 50% while keeping their expert review in the loop.',
        'Engineered the platform’s full multiplayer system, supporting up to 20 concurrent users and validated across teams in 7 countries (Chile, Canada, USA, Peru, Colombia, Mexico, Australia) collaborating on the same 3D tools in real time.',
        'Developed a C# module that detects rock-mass discontinuities on a bench and clusters them into families by similar orientation to support structural decision-making.',
        'Designed end-to-end import/export and save/load pipelines integrating .csv, .obj, .fbx, .dxf and CAD files into and out of Unity.',
        'Created a desktop launcher that adds an extra security layer to the Unity application and validates user licenses in real time.',
        'Connected a field sensor streaming live borehole drilling data into a Unity module, and built an in-engine database reader for bulk loading, evaluation and filtering.',
      ] },
    { date: 'Apr 2023, Oct 2024', company: 'Minverso', role: 'Lead Programmer',
      award: 'Best Development Award · Expomin & Perumin 2023',
      bullets: [
        'Led a multidisciplinary team of 10 (programmers, 3D modelers and animators) across simulation and digital-twin projects.',
        'Developed FLSmidth, an industrial digital twin that won the Best Development Award at Perumin and Expomin 2023 for innovation in 3D simulation of mining operations.',
        'Built a 3D mine-rescue simulator for the University of Utah, used by around 45 people per session and 200+ concurrent users total: rescuing trapped miners, simulating underground explosions, in a shared multi-user space for students and professors.',
        'Built a 3D simulator for Universidad Santo Tomás (Law program) with API integrations that adapt the experience to each user’s role, unlocking role-specific actions such as initiating a trial.',
        'Refactored scene transitions and player/object interactions across the simulation suite, delivering a more immersive experience and reducing load times by 40%.',
      ] },
    { date: 'Dec 2022, Apr 2023', company: 'Freelance', role: 'Unity Developer',
      bullets: [
        'Optimized Unity projects across code and textures, improving performance and load times.',
        'Implemented targeted gameplay features for clients, including an NPC patrol system and a save-game system.',
        'Integrated external API data into Unity for a client application.',
      ] },
    { date: 'Aug, Dec 2022', company: 'Sudaka Games', role: 'Game Programmer',
      bullets: [
        'Optimized existing levels and built new ones, writing new scripts for more accurate collision detection and a better game feel.',
        'Improved patrol and chase AI behavior for NPCs, and refined the player UI for smoother navigation between menus and interactions.',
        'Reworked the save system to prevent data loss and make it simpler to understand and maintain.',
      ] },
  ];

  return (
    <div id="experience" style={{ padding: isMobile ? '80px 0 60px' : '140px 0 120px' }}>
      <CineSectionHead
        chapter="01 · Profile"
        title={<>Who I am,<br/><span style={{color: cine.accent}}>what I ship.</span></>}
        meta={<>4+ YEARS<br/>4 COMPANIES<br/>200+ USERS</>}
      />

      {/* About copy */}
      <div style={{
        padding: `0 ${px}`, marginBottom: isMobile ? 60 : 120,
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '280px 1fr',
        gap: isMobile ? 24 : 80,
      }}>
        <div>
          <div style={{
            fontFamily: cine.mono, fontSize: 11, letterSpacing: 2,
            color: cine.dim, textTransform: 'uppercase', marginBottom: 16,
          }}>About</div>
          <div style={{
            width: 64, height: 1, background: cine.accent, marginBottom: 24,
          }}/>
        </div>
        <div style={{
          fontFamily: cine.display,
          fontSize: isMobile ? 22 : 30,
          lineHeight: 1.35,
          color: cine.ink, letterSpacing: -0.5, maxWidth: 880, fontWeight: 400,
        }}>
          Programmer with 4+ years in C#, C++ and Python, specialized in 3D
          simulation, digital twins and VR/AR/XR on Unity and Unreal Engine.
          Award-winning industrial mining simulations, real-time multiplayer
          platforms for distributed teams, and ML-driven analysis tools for
          decision-making. Currently expanding into NVIDIA Omniverse, OpenUSD
          and <em style={{color: cine.accent, fontStyle: 'italic'}}>Panda3D.</em>
        </div>
      </div>

      {/* Experience timeline */}
      <div style={{ padding: `0 ${px}` }}>
        <div style={{
          fontFamily: cine.mono, fontSize: 11, letterSpacing: 3,
          color: cine.accent, textTransform: 'uppercase', marginBottom: 32,
        }}>Experience log</div>

        {exp.map((e, i) => (
          <div key={e.company} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '220px 1fr',
            gap: isMobile ? 16 : 56,
            padding: isMobile ? '32px 0' : '44px 0',
            borderTop: `1px solid ${cine.line}`,
            borderBottom: i === exp.length - 1 ? `1px solid ${cine.line}` : 'none',
          }}>
            <div>
              <div style={{
                fontFamily: cine.mono, fontSize: 11, letterSpacing: 1.5,
                color: cine.dim, textTransform: 'uppercase', marginBottom: 12,
              }}>{e.date}</div>
              <div style={{
                fontFamily: cine.display, fontSize: isMobile ? 22 : 28, fontWeight: 500,
                color: cine.ink, letterSpacing: -0.5, lineHeight: 1.1,
                marginBottom: 6,
              }}>{e.company}</div>
              <div style={{
                fontFamily: cine.body, fontSize: 14, color: cine.ink2,
              }}>{e.role}</div>
              {e.award && (
                <div style={{
                  marginTop: 16, padding: '8px 12px',
                  background: cine.accentSoft, color: cine.accent,
                  fontFamily: cine.mono, fontSize: 10, letterSpacing: 1,
                  textTransform: 'uppercase', display: 'inline-block',
                }}>★ {e.award}</div>
              )}
            </div>
            <ul style={{
              margin: 0, padding: 0, listStyle: 'none',
              fontFamily: cine.body, fontSize: isMobile ? 14 : 15.5, lineHeight: 1.65,
              color: cine.ink2,
            }}>
              {e.bullets.map((b, k) => (
                <li key={k} style={{
                  paddingLeft: 22, position: 'relative', marginBottom: 14,
                }}>
                  <span style={{
                    position: 'absolute', left: 0, top: 10,
                    width: 8, height: 1, background: cine.accent,
                  }}/>
                  {b}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}
window.CineAbout = CineAbout;