function CPDPage(){
const D = window.RLJ;
const total = D.cpdAllocation.reduce((a, [, v]) => a + v, 0);
return <div>
<PageHero label="Continuing professional development" title="CPD you can actually substantiate" strap="Every Rail Learning Journey is built around documented learning objectives, structured activities and an itemised record of what you attended." />
<Section>
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<Prose>{D.cpdIntro.map((p, i) => <p key={i} style={{margin: 0}}>{p}</p>)}</Prose>
<div style={{background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', padding: 'var(--space-8)'}}>
<Eyebrow>Indicative allocation</Eyebrow>
<div style={{marginTop: 'var(--space-5)'}}>
{D.cpdAllocation.map(([k, v]) => <div key={k} style={{marginBottom: 'var(--space-4)'}}>
<div style={{display: 'flex', justifyContent: 'space-between', font: 'var(--text-body-sm)', color: 'var(--text-primary)'}}><span>{k}</span><span style={{font: 'var(--text-caption)', color: 'var(--text-tertiary)'}}>{v} hrs</span></div>
<div style={{height: 6, background: 'var(--surface-sunken)', marginTop: 6}}><div style={{width: (v / total * 100) + '%', height: '100%', background: 'var(--accent-rust)'}}></div></div>
</div>)}
<div style={{borderTop: '1px solid var(--border-subtle)', paddingTop: 'var(--space-4)', display: 'flex', justifyContent: 'space-between', font: 'var(--text-label)', color: 'var(--text-primary)'}}><span>Total structured hours</span><span>≈ {total}</span></div>
</div>
</div>
</div>
</Section>
<Section tone="sunken" eyebrow="Documentation" title="What every participant receives">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<Bullets items={D.cpdReceive} />
<div style={{display: 'grid', gap: 'var(--space-5)'}}>
<Disclaimer>{D.disclaimers.cpd}</Disclaimer>
<Disclaimer>Engineers Australia does not generally pre-approve individual study tours. The program is designed with reference to its CPD framework, but participants remain responsible for recording and substantiating their own CPD.</Disclaimer>
<Disclaimer>{D.disclaimers.tax}</Disclaimer>
</div>
</div>
</Section>
<Section eyebrow="Counting rules" title="How hours are counted">
<div className="g-3" style={{display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-8)'}}>
{[['Counted', ['Technical briefings and presentations', 'Guided corridor observation with commentary', 'Site and infrastructure visits', 'Structured field exercises', 'Facilitated workshops and discussion']], ['Not counted', ['Ordinary transfers and unstructured travel', 'Meals without a professional program', 'Rest periods and free time', 'Private extensions and companion activities']], ['Your responsibility', ['Attending the activities you claim', 'Recording hours in your own CPD system', 'Confirming relevance with your institution or employer', 'Retaining the documentation we issue']]].map(([t, items], i) => <div key={t} style={{borderTop: `2px solid ${i === 0 ? 'var(--accent-moss)' : i === 1 ? 'var(--border-default)' : 'var(--accent-rust)'}`, paddingTop: 'var(--space-4)'}}>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)', marginBottom: 'var(--space-4)'}}>{t}</h3>
<Bullets items={items} marker={i === 0 ? 'var(--accent-moss)' : i === 1 ? 'var(--text-tertiary)' : 'var(--accent-rust)'} />
</div>)}
</div>
</Section>
<CTABand heading="Take the program to your employer" copy="The itinerary, learning objectives and CPD documentation are written to support employer approval and professional-development records. Register to receive the full pack." primary="Register interest" />
</div>;
}

function HowItWorksPage(){
const D = window.RLJ, H = D.howItWorks;
const block = (eyebrow, title, paras) => <div key={title}>
<Eyebrow>{eyebrow}</Eyebrow>
<h3 style={{font: 'var(--text-headline)', color: 'var(--text-primary)', marginTop: 'var(--space-3)', maxWidth: '24ch'}}>{title}</h3>
<div style={{marginTop: 'var(--space-4)'}}><Prose>{paras.map((p, i) => <p key={i} style={{margin: 0}}>{p}</p>)}</Prose></div>
</div>;
return <div>
<PageHero label="How it works" title="From learning objective to CPD certificate" strap="How tours are developed, how groups are kept small, how bookings proceed and how private travel is kept separate from the professional program." />
<Section>
<div style={{display: 'grid', gap: 'var(--space-16)'}}>
{block('Development', 'Study-tour development', H.development)}
{block('Group size', 'Small groups, by design', H.groupSize)}
</div>
</Section>
<Section tone="inverse" eyebrow="Booking process" title="Nine stages, no early commitment">
<ol style={{listStyle: 'none', margin: 0, padding: 0, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-6)'}} className="g-3">
{D.bookingStages.map((s, i) => <li key={i} 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)'}}>{String(i + 1).padStart(2, '0')}</div>
<div style={{font: 'var(--text-body)', color: 'var(--text-on-inverse)', marginTop: 'var(--space-2)'}}>{s}</div>
</li>)}
</ol>
<p style={{font: 'var(--text-body-sm)', color: 'var(--rail-blue-400)', marginTop: 'var(--space-10)', maxWidth: '80ch'}}>No non-refundable commitment is requested until the operating threshold and supplier terms are clear. Booking terms, payment stages and cancellation conditions will be published before bookings open, consistent with Australian Consumer Law.</p>
</Section>
<Section tone="sunken">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
{block('Travel arrangements', 'What we coordinate', H.travel)}
{block('Private extensions', 'Personal travel stays separate', H.extensions)}
</div>
</Section>
<CTABand heading="Questions before you register?" copy="The FAQs cover CPD evidence, tax treatment, cycling requirements, accessibility, pricing and booking terms in detail." primary="Register interest" note="Or email info@raillearningjourneys.com.au" />
</div>;
}

function AboutPage(){
const D = window.RLJ, A = D.about;
const founders = [
{
name: 'Daniel Buntine',
role: 'Co-founder & Technical Program Director',
bio: [
'Daniel is a Chartered Professional Engineer and railway leader with 18 years of experience across track engineering, construction, asset management, digital engineering and major-project delivery.',
'He has worked in owner, operator, consultant and project-delivery roles, including leading the integration and operational readiness of Hope Island station. Daniel develops the learning program, technical content and CPD evidence for each journey.'
]
},
{
name: 'Ronald Victor',
role: 'Co-founder & Chief Epicurean Officer',
bio: [
'Ronald is an experienced railway program leader with a background delivering complex infrastructure through demanding operational, stakeholder and project interfaces.',
'He brings strategic judgement, calm negotiation and a strong commitment to integrity and team development. As Chief Epicurean Officer, Ronald also makes sure the journey beyond the technical program is worth taking — shaping the food, wine, accommodation and shared experiences that turn a study tour into a memorable trip.'
]
}
];
return <div>
<PageHero label="About" title={A.heading} />
<Section>
<div style={{maxWidth: '76ch'}}><Prose>{A.copy.map((p, i) => <p key={i} style={{margin: 0}}>{p}</p>)}</Prose></div>
</Section>
<Section tone="sunken" eyebrow="The founders" title="Rail expertise, project leadership and a good dinner">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'stretch'}}>
{founders.map((founder, index) => <article key={founder.name} style={{background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-sm)', padding: 'var(--space-8)', display: 'flex', flexDirection: 'column'}}>
<div style={{font: 'var(--text-caption)', color: 'var(--accent-rust)', letterSpacing: 'var(--letter-caption)'}}>{String(index + 1).padStart(2, '0')}</div>
<Eyebrow>{founder.role}</Eyebrow>
<h3 style={{font: 'var(--text-headline)', color: 'var(--text-primary)', marginTop: 'var(--space-2)'}}>{founder.name}</h3>
<div style={{marginTop: 'var(--space-4)'}}>{founder.bio.map((p, i) => <p key={i} style={{font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: i ? 'var(--space-4)' : 0, marginBottom: 0}}>{p}</p>)}</div>
</article>)}
</div>
</Section>
<Section eyebrow="Business principles" title="Eight commitments">
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5) var(--space-16)'}}>
{D.principles.map((p, i) => <div key={p} style={{display: 'grid', gridTemplateColumns: '36px 1fr', gap: 'var(--space-4)', alignItems: 'baseline', borderTop: '1px solid var(--border-subtle)', paddingTop: 'var(--space-4)'}}>
<span style={{font: 'var(--text-caption)', color: 'var(--accent-rust)'}}>{String(i + 1).padStart(2, '0')}</span>
<span style={{font: 'var(--text-body-lg)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)'}}>{p}</span>
</div>)}
</div>
</Section>
<Section tone="sunken" eyebrow="Future programs" title="Where the journeys go next" intro="Concepts under development. Nothing below is scheduled, priced or open for booking.">
<div style={{borderTop: '1px solid var(--border-subtle)'}}>
{D.futureTours.map(([place, title, status]) => <div key={place} style={{display: 'grid', gridTemplateColumns: '220px 1fr auto', gap: 'var(--space-6)', alignItems: 'center', padding: 'var(--space-5) 0', borderBottom: '1px solid var(--border-subtle)'}}>
<span style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)'}}>{place}</span>
<span style={{font: 'var(--text-body)', color: 'var(--text-secondary)'}}>{title}</span>
<Badge tone="neutral">{status}</Badge>
</div>)}
</div>
</Section>
<CTABand heading="Join the list for future programs" copy="Register your interest to hear about the New Zealand journey first, and about future programs as they are developed." />
</div>;
}

function FAQPage(){
const D = window.RLJ;
return <div>
<PageHero label="FAQs" title="Questions, answered plainly" strap="If your question is not covered here, email info@raillearningjourneys.com.au." />
<Section>
<div style={{display: 'grid', gap: 'var(--space-16)'}}>
{D.faqs.map(g => <div key={g.group}>
<Eyebrow>{g.group}</Eyebrow>
<div style={{marginTop: 'var(--space-5)'}}><Accordion items={g.items} idPrefix={'faq-' + g.group.replace(/\W+/g, '')} /></div>
</div>)}
</div>
</Section>
<CTABand heading="Ready to hear more?" copy="Register your interest to receive confirmed dates, final pricing and the detailed learning program." />
</div>;
}
Object.assign(window, {CPDPage, HowItWorksPage, AboutPage, FAQPage});
