function DatesSection(){
const sep=["Sep-24-2026","Sep-25-2026","Sep-26-2026","Sep-27-2026"];
const oct=["Oct-22-2026","Oct-23-2026","Oct-24-2026","Oct-25-2026"];
const Col=({heading,dates,divider})=>(<div style={{flex:1,borderLeft:divider?'1px solid var(--pp-black)':'none'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:26,color:'var(--color-accent)',textAlign:'center',padding:'14px 16px',borderBottom:'1px solid var(--pp-black)'}}>{heading}</div>
{dates.map((d,i)=>(<div key={i} style={{textAlign:'center',padding:'12px 16px',fontFamily:'var(--font-body)',fontSize:16,color:'var(--pp-black)',fontWeight:600}}>{d}</div>))}
</div>);
return(<section style={{background:'var(--color-bg-section)',padding:'48px 0'}}>
<div className="pp-container">
<h3 style={{fontFamily:'var(--font-display)',fontSize:'var(--text-h3)',fontWeight:700,color:'var(--color-text-heading)',margin:'0 0 24px'}}>Course Dates to Keep in Mind</h3>
<div className="pp-dates-row" style={{display:'flex',border:'1px solid var(--pp-black)',borderRadius:'var(--radius-md)',overflow:'hidden'}}>
<Col heading="September Date" dates={sep} />
<Col heading="October Date" dates={oct} divider />
</div>
</div>
</section>);
}
window.DatesSection=DatesSection;