function Objectives(){
  const items = [
    ['I', 'Frontier zones & offshore', 'Prospection across Algeria’s 1.67 M km² mining domain — underexplored North, West Sahara platform, and 4 active offshore studies.'],
    ['II', 'Deep horizons & traps', 'Stratigraphic and mixed traps in Berkine, Gassi Touil, Rhourde Nouss and Illizi — Siegenian, Silurian and Ordovician deep reservoirs.'],
    ['III', 'Existing discoveries', 'Appraisal & development across Oued Mya, Ahnet-Timimoun, Berkine and Illizi — 8.74 Gbbls oil and 118 Tcf gas (P2+P3) on the table.'],
    ['IV', 'Enhanced oil recovery', 'In 30+ mature fields. A 10–15% recovery-rate uplift unlocks an additional 7.2 Gbbls of recoverable reserves.'],
    ['V', 'Shale & tight plays', 'Silurian and Frasnian source rocks. 891 Tcf unrisked recoverable — productivity confirmed at 6–9 Bcf per well.'],
    ['VI', 'G&G studies', 'Ten regional studies underway across 8 Saharan basins, the Atlas, Hodna, Melrhir trough and the offshore.'],
  ];
  return (
    <section id="objectives" style={{background:'var(--paper)'}}>
      <div className="shell">
        <div className="sec-head">
          <div className="num">02 / Opportunity areas</div>
          <h2 className="title">Six fronts,<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>one acceleration agenda.</em>
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', borderTop:'1px solid var(--ink)'}}
             className="obj-grid">
          {items.map(([num, title, copy], i)=>{
            const col = i % 3;
            const row = Math.floor(i / 3);
            return (
              <div key={num} style={{
                padding:'40px 32px 40px 0',
                borderRight: col < 2 ? '1px solid var(--rule)' : 'none',
                paddingLeft: col === 0 ? 0 : 32,
                borderBottom: row === 0 ? '1px solid var(--rule)' : 'none',
                position:'relative',
              }}>
                <div style={{display:'flex', alignItems:'baseline', gap:14, marginBottom:20}}>
                  <span className="title" style={{
                    fontSize:48, fontWeight:300, color:'var(--ember)',
                    fontStyle:'italic', lineHeight:1,
                  }}>{num}</span>
                  <span className="kicker">OBJECTIVE</span>
                </div>
                <h3 className="title" style={{fontSize:24, marginBottom:12}}>{title}</h3>
                <p style={{fontSize:14.5, color:'var(--ink-3)', lineHeight:1.55}}>{copy}</p>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width:1000px){
          .obj-grid{grid-template-columns:1fr !important}
          .obj-grid > div{
            border-right:none !important;
            border-bottom:1px solid var(--rule) !important;
            padding-left:0 !important;
            padding-right:0 !important;
          }
        }
      `}</style>
    </section>
  );
}

window.Objectives = Objectives;