function HomePage(){
const D = window.RLJ;
return <div>
<section style={{position: 'relative', minHeight: 640, display: 'flex', alignItems: 'flex-end', borderBottom: '1px solid var(--border-subtle)'}}>
<div style={{position: 'absolute', inset: 0}}><img src="images/home-hero.webp" alt="The TranzAlpine crossing a bridge near Arthur’s Pass in New Zealand’s Southern Alps" loading="eager" fetchPriority="high" decoding="async" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}} /></div>
<div style={{position: 'absolute', inset: 0, background: 'linear-gradient(0deg,rgba(21,44,63,.88) 0%,rgba(21,44,63,.55) 45%,rgba(21,44,63,.18) 100%)', pointerEvents: 'none'}}></div>
<Container style={{position: 'relative', padding: 'var(--space-24) var(--space-8) var(--space-16)', pointerEvents: 'none'}}>
<Eyebrow tone="var(--ochre-500)">Rail-based professional learning</Eyebrow>
<h1 style={{font: 'var(--text-display-xl)', color: '#fff', maxWidth: '20ch', marginTop: 'var(--space-5)'}}>Experience the railway. Understand the system.</h1>
<p style={{font: 'var(--text-body-lg)', color: 'rgba(251,248,241,.88)', maxWidth: '58ch', marginTop: 'var(--space-6)', textWrap: 'pretty'}}>Rail Learning Journeys creates immersive study tours for rail and infrastructure professionals. Travel significant railway systems, learn from local experts and examine the engineering behind them by day — then finish each evening with the region’s best food, wine and hospitality.</p>
<div style={{display: 'flex', gap: 'var(--space-4)', marginTop: 'var(--space-8)', pointerEvents: 'auto', flexWrap: 'wrap'}}>
<Button variant="rust" size="lg" onClick={() => go('tour')}>Explore the New Zealand tour</Button>
<Button variant="secondary" size="lg" onClick={() => go('cpd')} style={{borderColor: 'rgba(251,248,241,.55)', color: '#fff'}}>How CPD is documented</Button>
</div>
<div className="g-4" style={{display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-16)', borderTop: '1px solid rgba(251,248,241,.26)', paddingTop: 'var(--space-6)'}}>
{['Small professional groups of 12–18', 'Structured, documented CPD program', 'Technical and historical interpretation', 'Fine regional dining and leisure alongside'].map(t => <div key={t} style={{font: 'var(--text-body-sm)', color: 'rgba(251,248,241,.8)'}}>{t}</div>)}
</div>
</Container>
</section>

<Section eyebrow="The proposition" title="Professional development beyond the conference room">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<Prose>
<p style={{margin: 0}}>Railways are shaped by their landscapes, economies, communities and operating environments. Understanding them takes more than reading standards or sitting through presentations.</p>
<p style={{margin: 0}}>Each Rail Learning Journey combines significant railway travel with technical briefings, infrastructure observation, local expertise, facilitated discussion and historical context.</p>
<p style={{margin: 0}}>Participants receive a structured learning program, an itemised activity record and a certificate documenting verified CPD participation.</p>
</Prose>
<div style={{position: 'relative', aspectRatio: '4/3', border: '1px solid var(--border-subtle)'}}><img src="images/home-proposition.webp" alt="Poolburn Viaduct on the Otago Central Rail Trail" loading="lazy" decoding="async" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}} /></div>
</div>
</Section>

<Section tone="sunken" eyebrow="The first journey" title={D.tour.title}>
<div className="g-2" style={{background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-md)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0}}>
<div style={{position: 'relative', minHeight: 440}}>
<img src="images/home-tour-card.webp" alt="The Otago Central Rail Trail near Middlemarch" loading="lazy" decoding="async" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}} />
<div style={{position: 'absolute', top: 'var(--space-5)', left: 'var(--space-5)', pointerEvents: 'none'}}><Badge tone="gold">{D.tour.status}</Badge></div>
</div>
<div style={{padding: 'var(--space-12)'}}>
<h3 style={{font: 'var(--text-headline)', color: 'var(--text-primary)'}}>{D.tour.subtitle}</h3>
<p style={{font: 'var(--text-body)', color: 'var(--text-secondary)', marginTop: 'var(--space-4)', textWrap: 'pretty'}}>{D.tour.cardSummary}</p>
<div style={{marginTop: 'var(--space-6)'}}><Bullets items={D.tour.keyFacts} /></div>
<div style={{display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap'}}>
<Button onClick={() => go('tour')}>View the full itinerary</Button>
<Button variant="secondary" onClick={() => go('register')}>Register interest</Button>
</div>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-tertiary)', marginTop: 'var(--space-6)', marginBottom: 0}}>Dates and prices are indicative until confirmed.</p>
</div>
</div>
</Section>

<Section eyebrow="Learning outcomes" title="What participants will learn">
<div className="g-3" style={{display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-10) var(--space-8)'}}>
{D.themes.map(([t, d], i) => <div key={t} style={{borderTop: '2px solid var(--accent-rust)', paddingTop: 'var(--space-4)'}}>
<div style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', color: 'var(--text-tertiary)'}}>{String(i + 1).padStart(2, '0')}</div>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)', marginTop: 'var(--space-2)'}}>{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 tone="inverse" eyebrow="How a journey works" title="Prepare. Experience. Discuss. Record.">
<div className="g-4" style={{display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 'var(--space-8)'}}>
{D.steps.map(([t, d], i) => <div key={t} style={{borderTop: '1px solid var(--border-on-inverse)', paddingTop: 'var(--space-4)'}}>
<div style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', color: 'var(--ochre-500)'}}>Step {i + 1}</div>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-on-inverse)', marginTop: 'var(--space-2)'}}>{t}</h3>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-on-inverse-secondary)', marginTop: 'var(--space-3)'}}>{d}</p>
</div>)}
</div>
<p style={{marginTop: 'var(--space-10)', marginBottom: 0}}><a href="#/how-it-works" style={{font: 'var(--text-label)', color: 'var(--ochre-500)'}}>See how a tour is developed and booked →</a></p>
</Section>

<Section>
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<div>
<Eyebrow>Why join</Eyebrow>
<h2 style={{font: 'var(--text-display-md)', color: 'var(--text-primary)', maxWidth: '22ch', marginTop: 'var(--space-4)'}}>Designed by rail professionals for rail professionals</h2>
<div style={{marginTop: 'var(--space-6)'}}><Prose>
<p style={{margin: 0}}>These are not escorted holidays with a technical presentation added to the itinerary.</p>
<p style={{margin: 0}}>The learning program is built around the railway itself — its engineering, operation, history, landscape and relationship with the communities it serves.</p>
<p style={{margin: 0}}>Groups stay deliberately small to support meaningful discussion, practical site observation and access to local specialists.</p>
</Prose></div>
</div>
<div style={{background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', padding: 'var(--space-10)'}}>
<Eyebrow>Who it is for</Eyebrow>
<div style={{marginTop: 'var(--space-6)'}}><Bullets items={D.audience} /></div>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-tertiary)', marginTop: 'var(--space-6)', marginBottom: 0}}>Participants do not need to be engineers, but the program is designed as a professional study tour rather than general-interest travel.</p>
</div>
</div>
</Section>

<IndulgenceSection tone="inverse" variant="brief" />

<Section tone="sunken" eyebrow="CPD credibility" title="Conservative, documented, defensible">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<div>
<div style={{display: 'flex', alignItems: 'baseline', gap: 'var(--space-4)'}}>
<span style={{font: '600 4rem/1 var(--font-display)', color: 'var(--accent-rust)'}}>35</span>
<span style={{font: 'var(--text-body)', color: 'var(--text-secondary)'}}>approximate structured CPD hours across nine days</span>
</div>
<div style={{marginTop: 'var(--space-8)'}}><FactTable rows={D.cpdAllocation.map(([k, v]) => [k, v + ' hours'])} /></div>
</div>
<div>
<Eyebrow>What you receive</Eyebrow>
<div style={{marginTop: 'var(--space-5)'}}><Bullets items={D.cpdReceive} columns={2} /></div>
<div style={{marginTop: 'var(--space-8)', display: 'grid', gap: 'var(--space-4)'}}>
<Disclaimer>{D.disclaimers.cpd}</Disclaimer>
<Disclaimer>{D.disclaimers.tax}</Disclaimer>
</div>
</div>
</div>
</Section>

<CTABand heading="Register your interest in the 2027 journey" copy="Registration is not a booking and creates no payment obligation. It ensures you receive confirmed dates, final pricing, the detailed learning program and priority notice when bookings open." note="Expressions of interest close once the group is full." />
</div>;
}
window.HomePage = HomePage;
