function Agenda(){
  const [day, setDay] = React.useState(1);
  const [open, setOpen] = React.useState(null);

  const days = {
    1: {
      label: 'DAY 01',
      date: 'Wednesday · Mar 17',
      theme: 'Strategic, Legal & Commercial Framework',
      subtitle: 'Creating the conditions to accelerate unconventional development in Algeria',
      sessions: [
        { time:'08:30', dur:'60', kind:'arrival', title:'Registration & welcome coffee', tag:'OPEN' },
        { time:'09:30', dur:'60', kind:'keynote', title:'ALNAFT & ministerial opening session',
          desc:'National vision for unconventional resources development. Ministry of Energy keynote, ALNAFT strategic outlook, and an international IOC executive perspective.', tag:'KEYNOTE' },
        { time:'10:30', dur:'45', kind:'panel', title:'Executive panel · From resources to reserves',
          desc:'Unlocking Algeria’s unconventional potential. Resource base vs. commercial reality, barriers to acceleration, and the role of partnerships.', tag:'EXECUTIVE' },
        { time:'11:15', dur:'15', kind:'break', title:'Coffee break', tag:'BREAK' },
        { time:'11:30', dur:'90', kind:'panel', title:'Session 01 · ALNAFT strategy & licensing framework',
          desc:'Designing an attractive and competitive upstream framework. Licensing strategy for unconventional blocks, contractual models, data access and subsurface risk sharing — with lessons from the US, Argentina, and the Middle East.', tag:'STRATEGY' },
        { time:'13:00', dur:'60', kind:'break', title:'Networking lunch', tag:'BREAK' },
        { time:'14:00', dur:'90', kind:'panel', title:'Session 02 · Legal & regulatory framework',
          desc:'Enabling speed, certainty, and investment protection. Regulatory clarity under Hydrocarbons Law 19-13 (2019), environmental and water regulation, permitting timelines, and the local content / efficiency balance.', tag:'LEGAL' },
        { time:'15:30', dur:'15', kind:'break', title:'Coffee break', tag:'BREAK' },
        { time:'15:45', dur:'90', kind:'panel', title:'Session 03 · Commercial & investment models',
          desc:'Making unconventional projects profitable. Cost structures of unconventional wells, fiscal incentives, risk-sharing mechanisms, and attracting IOCs and private capital.', tag:'COMMERCIAL' },
        { time:'17:15', dur:'45', kind:'roundtable', title:'High-level roundtable · invitation only',
          desc:'“What should change in the next 12 to 24 months?” Closed-door dialogue between Ministry, ALNAFT, Sonatrach, selected IOCs, and selected service companies.', tag:'CLOSED' },
        { time:'18:30', dur:'90', kind:'social', title:'Gala dinner · Day 01', tag:'SOCIAL' },
      ],
    },
    2: {
      label: 'DAY 02',
      date: 'Thursday · Mar 18',
      theme: 'Technology, Well Delivery & Efficiency',
      subtitle: 'Driving execution excellence in unconventional resources development',
      sessions: [
        { time:'09:00', dur:'30', kind:'arrival', title:'Recap & Day 02 opening remarks',
          desc:'Key takeaways from Day 01 and the transition from strategy to execution.', tag:'OPEN' },
        { time:'09:30', dur:'90', kind:'panel', title:'Session 04 · Drilling & completion technologies',
          desc:'Well design optimisation for unconventional reservoirs. Horizontal drilling and multi-stage fracturing, well spacing and pad development, completion design, and benchmarking against US shale plays.', tag:'TECH' },
        { time:'11:00', dur:'15', kind:'break', title:'Coffee break', tag:'BREAK' },
        { time:'11:15', dur:'90', kind:'panel', title:'Session 05 · Well services & operational efficiency',
          desc:'Reducing cost per well and cycle time. Integrated well services models, logistics and supply chain optimisation, rig performance, and lessons from high-efficiency basins.', tag:'TECH' },
        { time:'12:45', dur:'60', kind:'break', title:'Networking lunch', tag:'BREAK' },
        { time:'13:45', dur:'90', kind:'panel', title:'Session 06 · Digitalisation & data-driven operations',
          desc:'Smart and digital solutions for unconventional well delivery. Real-time drilling optimisation, AI/ML use cases, digital twins and predictive analytics, and data integration across subsurface and operations.', tag:'TECH' },
        { time:'15:15', dur:'15', kind:'break', title:'Coffee break', tag:'BREAK' },
        { time:'15:30', dur:'75', kind:'panel', title:'Session 07 · Integrated development approach',
          desc:'From single wells to scalable field development. Factory drilling concepts, pad drilling optimisation, infrastructure planning, and scaling unconventional programmes.', tag:'TECH' },
        { time:'16:45', dur:'45', kind:'keynote', title:'Closing panel · From pilot to full-scale',
          desc:'How to accelerate execution. Key commitments and industry recommendations from operators, regulators and the service ecosystem.', tag:'KEYNOTE' },
        { time:'17:30', dur:'0', kind:'keynote', title:'Closing remarks & end of summit', tag:'CLOSE' },
        { time:'18:30', dur:'90', kind:'social', title:'Gala dinner · Day 02', tag:'SOCIAL' },
      ],
    },
  };

  const data = days[day];

  return (
    <section id="agenda" style={{background:'var(--ink)', color:'var(--bone)', borderTop:'none'}}>
      <div className="shell">
        <div className="sec-head" style={{borderTop:'none'}}>
          <div className="num" style={{color:'rgba(248,244,236,.55)', borderTop:'1px solid var(--bone)'}}>03 / Agenda</div>
          <h2 className="title">Two days,<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>seven sessions.</em>
          </h2>
        </div>

        {/* Day toggle */}
        <div style={{display:'flex', gap:0, marginBottom:48, borderTop:'1px solid rgba(248,244,236,.18)', borderBottom:'1px solid rgba(248,244,236,.18)'}}>
          {[1,2].map(d=>{
            const active = d === day;
            return (
              <button key={d} onClick={()=>{setDay(d); setOpen(null);}}
                style={{
                  flex:1, padding:'24px 28px', textAlign:'left', cursor:'pointer',
                  background: active ? 'var(--ember)' : 'transparent',
                  color: active ? 'var(--bone)' : 'rgba(248,244,236,.65)',
                  borderLeft: d===2 ? '1px solid rgba(248,244,236,.18)' : 'none',
                  transition:'all .2s ease',
                  display:'flex', justifyContent:'space-between', alignItems:'center', gap:24,
                }}>
                <div>
                  <div className="kicker" style={{color: active ? 'rgba(248,244,236,.7)' : 'rgba(248,244,236,.45)', marginBottom:6}}>
                    {days[d].label} · {days[d].date}
                  </div>
                  <div className="title" style={{fontSize:24, fontWeight:300}}>
                    {days[d].theme}
                  </div>
                  <div style={{fontSize:13, marginTop:6, color: active ? 'rgba(248,244,236,.75)' : 'rgba(248,244,236,.45)', maxWidth:480, lineHeight:1.4, fontStyle:'italic'}}>
                    {days[d].subtitle}
                  </div>
                </div>
                <span className="kicker" style={{color: active ? 'var(--bone)' : 'rgba(248,244,236,.5)'}}>
                  {active ? '● ACTIVE' : '○ VIEW'}
                </span>
              </button>
            );
          })}
        </div>

        {/* Sessions list */}
        <div>
          {data.sessions.map((s, i)=>(
            <Session key={`${day}-${i}`} s={s} idx={i}
                     isOpen={open===i}
                     onToggle={()=> setOpen(open===i ? null : i)}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function Session({s, idx, isOpen, onToggle}){
  const isQuiet = s.kind === 'break' || s.kind === 'arrival' || s.kind === 'social';
  const accent = {
    keynote:'var(--ember)', panel:'var(--bone)', talk:'var(--bone)',
    roundtable:'var(--ember)', tech:'var(--bone)', case:'var(--bone)',
    break:'rgba(248,244,236,.35)', arrival:'rgba(248,244,236,.35)',
    social:'rgba(248,244,236,.55)',
  }[s.kind] || 'var(--bone)';

  const expandable = !!s.desc;

  return (
    <div style={{
      borderTop:'1px solid rgba(248,244,236,.14)',
      transition:'background .2s ease',
    }}
    onMouseEnter={e=>{ if(!isQuiet) e.currentTarget.style.background='rgba(194,99,42,.06)'; }}
    onMouseLeave={e=>{ e.currentTarget.style.background='transparent'; }}>
      <button onClick={expandable ? onToggle : undefined}
        style={{
          width:'100%', display:'grid',
          gridTemplateColumns:'120px 90px 1fr 110px 40px',
          gap:24, padding:'22px 0', alignItems:'center', textAlign:'left',
          cursor: expandable ? 'pointer' : 'default',
          opacity: isQuiet ? .55 : 1,
        }}
        className="session-row"
      >
        <div style={{fontFamily:'var(--mono)', fontSize:14, fontVariantNumeric:'tabular-nums', color:accent}}>
          {s.time}
        </div>
        <div className="kicker" style={{color:'rgba(248,244,236,.5)'}}>
          {s.dur}′
        </div>
        <div className="title" style={{fontSize:22, fontWeight:300, color:'var(--bone)'}}>
          {s.title}
        </div>
        <div className="kicker" style={{color:accent, textAlign:'right'}}>
          {s.tag}
        </div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:14, color:'rgba(248,244,236,.5)',
          textAlign:'right', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
          transition:'transform .2s ease',
          visibility: expandable ? 'visible' : 'hidden',
        }}>+</div>
      </button>
      {expandable && (
        <div style={{
          maxHeight: isOpen ? '200px' : '0',
          opacity: isOpen ? 1 : 0,
          overflow:'hidden',
          transition:'max-height .3s ease, opacity .3s ease, padding .3s ease',
          padding: isOpen ? '0 0 28px 144px' : '0 0 0 144px',
        }}>
          <p style={{fontSize:15.5, color:'rgba(248,244,236,.72)', lineHeight:1.55, maxWidth:720}}>
            {s.desc}
          </p>
        </div>
      )}
      <style>{`
        @media (max-width:900px){
          .session-row{
            grid-template-columns:80px 1fr 80px !important;
          }
          .session-row > div:nth-child(2),
          .session-row > div:nth-child(5){display:none}
        }
      `}</style>
    </div>
  );
}

window.Agenda = Agenda;