function Identity(){
  const tenets = [
    ['National identity', 'The colour palette — green, white, red — reflects the Algerian flag and reinforces national ownership and pride.'],
    ['Geographic symbolism', 'The mountain motif references the Aurès Mountains — strength, depth, and resilience.'],
    ['Industry relevance', 'An oil drop sits inside the letter “A”, marking hydrocarbons and unconventional energy at the centre of the mark.'],
    ['Depth & flow', 'Layered lines and curves evoke subsurface geology, reservoirs, and the path of energy through them.'],
  ];
  return (
    <section id="identity">
      <div className="shell">
        <div className="sec-head">
          <div className="num">05 / Identity</div>
          <h2 className="title">An identity rooted in<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>land, flag, and craft.</em>
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}} className="id-grid">
          <div style={{
            background:'var(--ink)', padding:'56px 40px',
            display:'flex', alignItems:'center', justifyContent:'center', minHeight:420,
            border:'1px solid var(--ink)',
          }}>
            <img src="assets/auras-logo.png" alt="AURAS logo"
              style={{width:'100%', maxWidth:480}}/>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:0}}>
            {tenets.map(([t,c],i)=>(
              <div key={t} style={{
                padding:'28px 0',
                borderTop:'1px solid var(--rule)',
                borderBottom: i===3 ? '1px solid var(--rule)' : 'none',
                display:'grid', gridTemplateColumns:'40px 1fr', gap:24, alignItems:'baseline',
              }}>
                <span className="title" style={{fontSize:20, fontWeight:300, color:'var(--ember)', fontStyle:'italic'}}>
                  {String(i+1).padStart(2,'0')}
                </span>
                <div>
                  <h3 className="title" style={{fontSize:20, marginBottom:6}}>{t}</h3>
                  <p style={{fontSize:14.5, color:'var(--ink-3)', lineHeight:1.55}}>{c}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width:1000px){.id-grid{grid-template-columns:1fr !important;gap:32px !important}}`}</style>
    </section>
  );
}
window.Identity = Identity;