function DayCard({d, open, onToggle}){
return <div style={{borderBottom: '1px solid var(--border-subtle)'}}>
<button aria-expanded={open} onClick={onToggle} style={{width: '100%', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: 'var(--space-5) 0', display: 'grid', gridTemplateColumns: '92px 1fr 1fr auto', gap: 'var(--space-6)', alignItems: 'baseline'}}>
<span style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: 'var(--accent-rust)'}}>Day {d.day}</span>
<span style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)'}}>{d.location}</span>
<span style={{font: 'var(--text-body-sm)', color: 'var(--text-secondary)'}}>{d.theme}</span>
<span style={{display: 'flex', gap: 'var(--space-3)', alignItems: 'center', justifySelf: 'end'}}>
<span style={{font: 'var(--text-caption)', color: 'var(--text-tertiary)'}}>{d.cpd} CPD hrs{d.km ? ` · ${d.km} km` : ''}</span>
<span aria-hidden="true" style={{color: 'var(--accent-rust)', font: 'var(--text-body)'}}>{open ? '–' : '+'}</span>
</span>
</button>
{open && <div style={{paddingBottom: 'var(--space-6)', paddingLeft: 116}}>
<Bullets items={d.activities} columns={2} />
</div>}
</div>;
}

function TourPage(){
const D = window.RLJ, T = D.tour;
const [open, setOpen] = React.useState(1);
const [allOpen, setAllOpen] = React.useState(false);
return <div>
<PageHero label={T.label} title={T.title} strap={T.strap} summary={T.summary} facts={T.facts} />

<Section eyebrow="The study" title="Two corridors, two outcomes">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<Prose>{D.narrative.map((p, i) => <p key={i} style={{margin: 0}}>{p}</p>)}</Prose>
<div style={{position: 'relative', aspectRatio: '3/4', border: '1px solid var(--border-subtle)'}}><img src="images/tour-narrative.webp" alt="A former railway tunnel on the Otago Central Rail Trail near Hyde" loading="lazy" decoding="async" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}} /></div>
</div>
</Section>

<Section tone="sunken" eyebrow="Learning themes" title="Six themes carried across the nine days">
<div className="g-3" style={{display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-10) var(--space-8)'}}>
{D.themes.map(([t, d]) => <div key={t}>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)'}}>{t}</h3>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 'var(--space-3)', textWrap: 'pretty'}}>{d}</p>
</div>)}
</div>
</Section>

<Section id="itinerary" eyebrow="Itinerary" title="Nine days, Christchurch to Dunedin" intro="Each day lists its location, professional theme, structured CPD hours and the activities delivered. The itinerary is indicative and subject to confirmation.">
<div style={{display: 'flex', justifyContent: 'flex-end', marginBottom: 'var(--space-4)'}}>
<Button variant="ghost" size="sm" onClick={() => {setAllOpen(!allOpen); setOpen(null);}}>{allOpen ? 'Collapse all days' : 'Expand all days'}</Button>
</div>
<div style={{borderTop: '1px solid var(--border-subtle)'}}>
{D.itinerary.map(d => <DayCard key={d.day} d={d} open={allOpen || open === d.day} onToggle={() => {setAllOpen(false); setOpen(open === d.day ? null : d.day);}} />)}
</div>
<div style={{marginTop: 'var(--space-8)'}}><Disclaimer>{D.disclaimers.itinerary}</Disclaimer></div>
</Section>

<Section tone="raised" eyebrow="Inclusions" title="What is included — and what is not">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<div>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)', marginBottom: 'var(--space-5)'}}>Included</h3>
<Bullets items={D.inclusions} marker="var(--accent-moss)" />
</div>
<div>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)', marginBottom: 'var(--space-5)'}}>Not included</h3>
<Bullets items={D.exclusions} marker="var(--text-tertiary)" />
</div>
</div>
</Section>

<IndulgenceSection tone="sunken" variant="full" />

<Section eyebrow="Indicative pricing" title="Prices remain indicative until dates are confirmed">
<div className="g-3" style={{display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-6)'}}>
{D.prices.map(([label, amount, unit, note]) => <div key={label} style={{background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-sm)', padding: 'var(--space-8)'}}>
<Eyebrow>{label}</Eyebrow>
<div style={{font: 'var(--text-display-md)', color: 'var(--text-primary)', marginTop: 'var(--space-3)'}}>{amount}</div>
<div style={{font: 'var(--text-body-sm)', color: 'var(--text-tertiary)'}}>{unit}</div>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 'var(--space-4)', marginBottom: 0}}>{note}</p>
</div>)}
</div>
<div style={{marginTop: 'var(--space-10)'}} className="g-2">
<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<Bullets items={D.priceNotes} />
<Disclaimer>{D.disclaimers.price} {D.disclaimers.tax}</Disclaimer>
</div>
</div>
</Section>

<Section tone="inverse" eyebrow="Physical activity" title="Two supported e-bike field days">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<div>
<Prose inverse>
<p style={{margin: 0}}>Two days of the program are delivered on a carefully selected section of the former Otago Central Railway, covering approximately 48 km in total on a compacted gravel formation.</p>
<p style={{margin: 0}}>Riding is used as a study method: it is the only practical way to examine the tunnels, viaducts, cuttings and drainage of the corridor at close range. It is not a fitness challenge, and the pace is set by observation stops.</p>
</Prose>
<div style={{marginTop: 'var(--space-8)'}}><FactTable inverse rows={[['Distance', 'Approximately 48 km over two days'], ['Surface', 'Compacted gravel former rail formation'], ['Gradients', 'Former railway grades — consistently gentle'], ['E-bikes', 'Included for all participants']]} /></div>
</div>
<div style={{background: 'var(--surface-inverse-raised)', border: '1px solid var(--border-on-inverse)', padding: 'var(--space-10)'}}>
<Eyebrow tone="var(--ochre-500)">Support provided</Eyebrow>
<div style={{marginTop: 'var(--space-5)'}}><Bullets items={D.fitnessSupport} marker="var(--ochre-500)" inverse /></div>
<p style={{font: 'var(--text-body-sm)', color: 'var(--rail-blue-400)', marginTop: 'var(--space-6)', marginBottom: 0}}>{D.disclaimers.travel}</p>
</div>
</div>
</Section>

<CTABand heading="Be first to receive confirmed dates and pricing" copy="Register your interest to receive the final package, detailed learning program and priority notice when bookings open for Railways Against the Landscape." />
</div>;
}
window.TourPage = TourPage;
