const {useState, useEffect} = React;
const {createRoot} = ReactDOM;
const ArrowUpRight=({size=16})=><span style={{fontSize:size,lineHeight:1}}>↗</span>;
const ArrowRight=({size=16})=><span style={{fontSize:size,lineHeight:1}}>→</span>;
const ChevronDown=({size=16})=><span style={{fontSize:size,lineHeight:1}}>⌄</span>;
const Menu=()=> <span style={{fontSize:22}}>☰</span>;
const X=()=> <span style={{fontSize:22}}>×</span>;
const CalendarDays=({size=15})=><span style={{fontSize:size}}>◫</span>;
const MapPin=({size=15})=><span style={{fontSize:size}}>⌖</span>;
const Mail=({size=15})=><span style={{fontSize:size}}>✉</span>;
const Instagram=({size=15})=><span style={{fontSize:size}}>◎</span>;

const committees=[
 ['DISEC','Disarmament & International Security','Building safer futures through cooperation.'],['UNSC','United Nations Security Council','Crisis diplomacy for a changing world.'],['UNHRC','Human Rights Council','Protecting dignity, justice and freedom.'],['JCC-1','Joint Crisis Committee I','History in motion. Your decisions shape it.'],['JCC-2','Joint Crisis Committee II','The other side of a rapidly evolving crisis.'],['HCC','Historical Crisis Committee','Rewrite defining moments of history.'],['Lok Sabha','Indian Parliament','Policy, persuasion and public purpose.'],['Armageddon','Armageddon','A high-stakes crisis built for bold decisions.'],['OIC','Organisation of Islamic Cooperation','Dialogue across the Islamic world.'],['UN Women','UN Women','Advancing equality through action.'],['COPUOS','Committee on Outer Space','The politics and possibilities of the final frontier.'],['US Senate','United States Senate','A legislative arena for sharp debate.'],['UNODC','Drugs & Crime','International solutions to transnational crime.'],['ECOFIN','Economic & Financial Affairs','The global economy under the microscope.'],['SC-UNC','UN Charter Committee','The law, limits and future of the United Nations.'],['FIFA','FIFA Council','Football, power and the global game.'],['WHO','World Health Organization','Global health in an interconnected age.'],['IP','International Press','Tell the stories that move the conference.']
];
const schedule=[
 [{time:'08:00',item:'Registration & Welcome',kind:'arrival'},{time:'09:00',item:'Opening Ceremony',kind:'ceremony'},{time:'11:00',item:'Committee Session I',kind:'committee'},{time:'13:30',item:'Lunch',kind:'meal'},{time:'14:30',item:'Committee Session II',kind:'committee'},{time:'17:00',item:'Networking Hour',kind:'social'}],
 [{time:'09:00',item:'Committee Session III',kind:'committee'},{time:'13:00',item:'Lunch',kind:'meal'},{time:'14:00',item:'Committee Session IV',kind:'committee'},{time:'18:30',item:'Social Night',kind:'social'}],
 [{time:'09:00',item:'Committee Session V',kind:'committee'},{time:'13:00',item:'Lunch',kind:'meal'},{time:'14:00',item:'Closing Ceremony',kind:'ceremony'}]
];
const faqs=[['Who can participate?','Oak JMUN welcomes delegates in grades 9–12, from Oakridge and schools across India. First-time delegates are very welcome.'],['How do I register?','Use the registration link when it opens. Your confirmation email will include payment and consent-form instructions.'],['What should I bring?','Business-formal attire, writing materials, a device for research, position papers and your enthusiasm.'],['Are there awards?','Every committee recognises exceptional delegates with Best Delegate, Outstanding Delegate and Honourable Mention awards.'],['Is this suitable for beginners?','Absolutely. Background guides, training and an encouraging Executive Board will help you find your voice.']];
function App(){const [day,setDay]=useState(0),[open,setOpen]=useState(0),[menu,setMenu]=useState(false),[seconds,setSeconds]=useState(0); useEffect(()=>{const target=new Date('2026-07-24T08:00:00+05:30');const tick=()=>setSeconds(Math.max(0,Math.floor((target-new Date())/1000)));tick();const x=setInterval(tick,1000);return()=>clearInterval(x)},[]);const d=Math.floor(seconds/86400),h=Math.floor(seconds%86400/3600),m=Math.floor(seconds%3600/60),s=seconds%60;
return <><header><a className="brand" href="#top"><span>OAK</span><i>JMUN</i></a><nav className={menu?'open':''}><a href="#about">About</a><a href="#committees">Committees</a><a href="#schedule">Schedule</a><a href="#experience">Experience</a><a href="#faq">FAQ</a></nav><a className="register small" href="#register">Register <ArrowUpRight size={16}/></a><button className="menu" onClick={()=>setMenu(!menu)}>{menu?<X/>:<Menu/>}</button></header>
<main id="top"><section className="hero"><div className="hero-kicker">OAKRIDGE INTERNATIONAL SCHOOL · HYDERABAD</div><div className="orbit orbit-a"></div><div className="orbit orbit-b"></div><p className="chapter">CHAPTER <em>XVII</em> / 2026</p><div className="empty-art">IMAGE / HERO ARTWORK</div><h1>CREATE,<br/>DEBATE,<br/><span>INNOVATE.</span></h1><div className="hero-bottom"><p>24–26 JULY 2026 · HYDERABAD, INDIA<br/><br/>A conference for curious minds, sharp voices, and meaningful action.</p><a className="register" href="#register">Register now <ArrowRight size={17}/></a></div><div className="scroll">DISCOVER THE CONFERENCE <span>↓</span></div></section>
<section className="marquee"><div>CREATE · DEBATE · INNOVATE · CREATE · DEBATE · INNOVATE · CREATE · DEBATE · INNOVATE ·</div></section>
<section className="intro" id="about"><p className="eyebrow">01 / THE CONFERENCE</p><h2>A room full of<br/><em>possibility.</em></h2><div className="intro-copy"><p>Oak JMUN is where ambitious young people come together to ask better questions, challenge familiar answers, and turn dialogue into action.</p><p>Whether you are taking the floor for the first time or bringing years of experience, this is your seat at the table.</p><a href="#committees">Explore the conference <ArrowUpRight size={17}/></a></div><div className="stats"><div><b>700+</b><span>delegates</span></div><div><b>09</b><span>committees</span></div><div><b>03</b><span>days</span></div><div><b>01</b><span>shared purpose</span></div></div></section>
<section className="theme"><p className="eyebrow">CHAPTER XVII / CONFERENCE THEME</p><div className="theme-word">RECLAIMING<br/>DIALOGUE,<br/><em>RESURRECTING<br/>RESOLVE.</em></div><p className="theme-copy">In a world fractured by power and indifference, the right questions, the right choices and the courage to stand for what is just can still restore the world.</p></section>
<section className="countdown"><p>THE NEXT CONVERSATION STARTS IN</p><div>{[[d,'DAYS'],[h,'HOURS'],[m,'MINS'],[s,'SECS']].map(([n,l])=><span key={l}><b>{String(n).padStart(2,'0')}</b><small>{l}</small></span>)}</div><p><CalendarDays size={15}/> 24–26 JULY 2026 &nbsp; <MapPin size={15}/> HYDERABAD, INDIA</p></section>
<section className="committees" id="committees"><p className="eyebrow">02 / FIND YOUR FORUM</p><div className="section-title"><h2>THE <em>COMMITTEES</em></h2><p>Move over a committee name to find where your voice belongs.</p></div><div className="committee-list">{committees.map(([code,name,desc],i)=><a href="#register" className="committee" key={code}><span>{String(i+1).padStart(2,'0')}</span><b>{code}</b><div><strong>{name}</strong><p>{desc}</p></div><ArrowUpRight/></a>)}</div></section>
<section className="schedule" id="schedule"><p className="eyebrow">03 / THREE DAYS, ONE STORY</p><h2>CONFERENCE <em>SCHEDULE</em></h2><div className="tabs">{['DAY ONE / 24 JUL','DAY TWO / 25 JUL','DAY THREE / 26 JUL'].map((x,i)=><button onClick={()=>setDay(i)} className={day===i?'active':''} key={x}>{x}</button>)}</div><div className="timeline">{schedule[day].map((x,i)=><div className={'event '+x.kind} key={x.item}><span>{x.time}</span><i></i><b>{x.item}</b><small>{String(i+1).padStart(2,'0')}</small></div>)}</div></section>
<section className="experience" id="experience"><p className="eyebrow">04 / BEYOND THE DAIS</p><h2>MORE THAN<br/><em>A DEBATE.</em></h2><div className="experience-grid"><article><span>DAY 01 · EVENING</span><h3>Networking<br/>Hour</h3><p>Meet student-led initiatives, organisations and changemakers doing meaningful work in the world around us.</p><a href="#register">Discover more <ArrowRight size={16}/></a></article><article><span>DAY 02 · NIGHT</span><h3>Social<br/>Night</h3><p>A night for music, food and the friendships made somewhere between a speech and a shared idea.</p><a href="#register">Discover more <ArrowRight size={16}/></a></article><article><span>COMMUNITY · OUTREACH</span><h3>Every voice<br/>has a place.</h3><p>Our outreach programme makes room at the table for young people whose perspectives deserve to be heard.</p><a href="#register">Discover more <ArrowRight size={16}/></a></article></div></section>
<section className="faq" id="faq"><p className="eyebrow">05 / GOOD TO KNOW</p><h2>QUESTIONS,<br/><em>ANSWERED.</em></h2><div>{faqs.map(([q,a],i)=><button key={q} className={open===i?'faq-open':''} onClick={()=>setOpen(open===i?-1:i)}><span>0{i+1}</span><strong>{q}</strong><ChevronDown/><p>{a}</p></button>)}</div></section>
<section className="register-area" id="register"><p>OAK JMUN · CHAPTER XVII</p><h2>THE TABLE IS<br/><em>WAITING.</em></h2><p>Bring your questions. Bring your courage. We will make room for your voice.</p><a className="register light" href="mailto:mun@oakridge.in">Register interest <ArrowUpRight/></a></section></main><footer><a className="brand" href="#top"><span>OAK</span><i>JMUN</i></a><p>Oakridge Model United Nations brings passionate delegates together for a conference shaped by curiosity, clarity and courage.</p><div><a href="mailto:mun@oakridge.in"><Mail size={15}/> mun@oakridge.in</a><a href="https://www.instagram.com/oakmun/"><Instagram size={15}/> @oakmun</a></div><small>© 2026 OAKRIDGE INTERNATIONAL SCHOOL · HYDERABAD, INDIA</small></footer></>}
createRoot(document.getElementById('root')).render(<App/>);