const DS = window.RailLearningJourneysDesignSystem_1461ec;
const {Button, Badge, Card, Tag, QuoteBlock, Input, Select, Textarea, Checkbox} = DS;
const NAV = [['home','Home'],['tour','The New Zealand Tour'],['how-it-works','How It Works'],['cpd','CPD'],['about','About'],['faq','FAQs']];

function Container({width = 'var(--content-max)', style, children}){
return <div style={{maxWidth: width, margin: '0 auto', padding: '0 var(--space-8)', ...style}}>{children}</div>;
}

function Eyebrow({children, tone = 'var(--accent-rust)', style}){
return <div style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: tone, ...style}}>{children}</div>;
}

function Section({id, eyebrow, title, intro, tone, width, children, style}){
const bg = tone === 'sunken' ? 'var(--surface-sunken)' : tone === 'inverse' ? 'var(--surface-inverse)' : tone === 'raised' ? 'var(--surface-raised)' : 'transparent';
const inv = tone === 'inverse';
return <section id={id} style={{background: bg, padding: 'var(--space-24) 0', borderTop: tone === 'raised' ? '1px solid var(--border-subtle)' : 'none', ...style}}>
<Container width={width}>
{eyebrow && <Eyebrow tone={inv ? 'var(--ochre-500)' : 'var(--accent-rust)'}>{eyebrow}</Eyebrow>}
{title && <h2 style={{font: 'var(--text-display-md)', color: inv ? 'var(--text-on-inverse)' : 'var(--text-primary)', maxWidth: '20ch', marginTop: eyebrow ? 'var(--space-4)' : 0}}>{title}</h2>}
{intro && <p style={{font: 'var(--text-body-lg)', color: inv ? 'var(--text-on-inverse-secondary)' : 'var(--text-secondary)', maxWidth: '62ch', marginTop: 'var(--space-5)', textWrap: 'pretty'}}>{intro}</p>}
{children && <div style={{marginTop: (title || intro || eyebrow) ? 'var(--space-12)' : 0}}>{children}</div>}
</Container>
</section>;
}

function Prose({children, inverse}){
return <div style={{display: 'grid', gap: 'var(--space-4)', maxWidth: '68ch', font: 'var(--text-body-lg)', color: inverse ? 'var(--text-on-inverse-secondary)' : 'var(--text-secondary)', textWrap: 'pretty'}}>{children}</div>;
}

function Bullets({items, columns = 1, marker = 'var(--accent-rust)', inverse}){
return <ul style={{listStyle: 'none', margin: 0, padding: 0, display: 'grid', gridTemplateColumns: `repeat(${columns}, minmax(0,1fr))`, gap: 'var(--space-3) var(--space-8)'}}>
{items.map((t, i) => <li key={i} style={{display: 'grid', gridTemplateColumns: '14px 1fr', gap: 'var(--space-3)', font: 'var(--text-body)', color: inverse ? 'var(--text-on-inverse-secondary)' : 'var(--text-secondary)', alignItems: 'baseline'}}>
<span aria-hidden="true" style={{color: marker, font: 'var(--text-caption)'}}>—</span><span>{t}</span></li>)}
</ul>;
}

function FactTable({rows, inverse}){
return <dl style={{margin: 0, display: 'grid', gap: 0}}>
{rows.map(([k, v], i) => <div key={i} style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)', padding: 'var(--space-3) 0', borderTop: `1px solid ${inverse ? 'var(--border-on-inverse)' : 'var(--border-subtle)'}`}}>
<dt style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: inverse ? 'var(--rail-blue-400)' : 'var(--text-tertiary)'}}>{k}</dt>
<dd style={{margin: 0, font: 'var(--text-body-sm)', color: inverse ? 'var(--text-on-inverse)' : 'var(--text-primary)'}}>{v}</dd>
</div>)}
</dl>;
}

function Disclaimer({children}){
return <p style={{font: 'var(--text-body-sm)', color: 'var(--text-tertiary)', maxWidth: '78ch', margin: 0, paddingLeft: 'var(--space-4)', borderLeft: '1px solid var(--border-default)'}}>{children}</p>;
}

function Accordion({items, idPrefix}){
const [open, setOpen] = React.useState(null);
return <div style={{borderTop: '1px solid var(--border-subtle)'}}>
{items.map(([q, a], i) => {
const isOpen = open === i;
return <div key={i} style={{borderBottom: '1px solid var(--border-subtle)'}}>
<button aria-expanded={isOpen} aria-controls={`${idPrefix}-${i}`} onClick={() => setOpen(isOpen ? null : i)}
style={{width: '100%', display: 'flex', gap: 'var(--space-4)', alignItems: 'baseline', justifyContent: 'space-between', background: 'none', border: 'none', textAlign: 'left', padding: 'var(--space-5) 0', cursor: 'pointer', font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)'}}>
{q}<span aria-hidden="true" style={{color: 'var(--accent-rust)', font: 'var(--text-body)', flexShrink: 0}}>{isOpen ? '–' : '+'}</span>
</button>
<div id={`${idPrefix}-${i}`} hidden={!isOpen} style={{paddingBottom: 'var(--space-5)', font: 'var(--text-body)', color: 'var(--text-secondary)', maxWidth: '70ch', textWrap: 'pretty'}}>{a}</div>
</div>;
})}
</div>;
}

function CTABand({heading, copy, primary = 'Register interest', note}){
return <section style={{background: 'var(--surface-inverse)', backgroundImage: 'var(--contour-lines)', backgroundBlendMode: 'soft-light', padding: 'var(--space-20) 0'}}>
<Container>
<div className="g-cta" style={{display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-16)', alignItems: 'end'}}>
<div>
<h2 style={{font: 'var(--text-display-md)', color: 'var(--text-on-inverse)', maxWidth: '22ch'}}>{heading}</h2>
<p style={{font: 'var(--text-body-lg)', color: 'var(--text-on-inverse-secondary)', maxWidth: '54ch', marginTop: 'var(--space-5)'}}>{copy}</p>
</div>
<div style={{display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', alignItems: 'flex-start'}}>
<Button variant="rust" size="lg" onClick={() => go('register')}>{primary}</Button>
{note && <span style={{font: 'var(--text-body-sm)', color: 'var(--rail-blue-400)'}}>{note}</span>}
</div>
</div>
</Container>
</section>;
}

function go(page){ window.location.hash = '#/' + page; }

function Header({page}){
const [open, setOpen] = React.useState(false);
return <header style={{position: 'sticky', top: 0, zIndex: 20, background: 'rgba(246,241,231,.94)', backdropFilter: 'blur(6px)', borderBottom: '1px solid var(--border-subtle)'}}>
<Container style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-8)', padding: 'var(--space-4) var(--space-8)'}}>
<a href="#/home" style={{textDecoration: 'none', display: 'grid', gap: 2}}>
<span style={{font: '700 1.125rem/1.1 var(--font-display)', color: 'var(--rail-blue-900)', letterSpacing: '-0.01em'}}>Rail Learning Journeys</span>
<span style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: 'var(--text-tertiary)'}}>Railway study tours</span>
</a>
<nav className="rlj-nav" style={{display: 'flex', gap: 'var(--space-6)', alignItems: 'center'}}>
{NAV.map(([p, label]) => <a key={p} href={'#/' + p} style={{textDecoration: 'none', font: 'var(--text-label)', color: page === p ? 'var(--text-primary)' : 'var(--text-secondary)', paddingBottom: 2, borderBottom: `2px solid ${page === p ? 'var(--accent-rust)' : 'transparent'}`}}>{label}</a>)}
<Button size="sm" variant="rust" onClick={() => go('register')}>Register Interest</Button>
</nav>
<button className="rlj-burger" aria-label="Menu" onClick={() => setOpen(!open)} style={{display: 'none', background: 'none', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', padding: '6px 10px', font: 'var(--text-label)', cursor: 'pointer', color: 'var(--text-primary)'}}>Menu</button>
</Container>
{open && <Container style={{paddingBottom: 'var(--space-4)'}}>
<div style={{display: 'grid', gap: 'var(--space-3)', borderTop: '1px solid var(--border-subtle)', paddingTop: 'var(--space-4)'}}>
{[...NAV, ['register', 'Register Interest']].map(([p, label]) => <a key={p} href={'#/' + p} onClick={() => setOpen(false)} style={{font: 'var(--text-body)', color: 'var(--text-primary)', textDecoration: 'none'}}>{label}</a>)}
</div>
</Container>}
</header>;
}

function Footer(){
const s = window.RLJ.site;
const col = (title, links) => <div key={title} style={{display: 'grid', gap: 'var(--space-3)', alignContent: 'start'}}>
<div style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: 'var(--ochre-500)'}}>{title}</div>
{links.map(([label, href]) => <a key={label} href={href} style={{font: 'var(--text-body-sm)', color: 'var(--text-on-inverse-secondary)', textDecoration: 'none'}}>{label}</a>)}
</div>;
return <footer style={{background: 'var(--surface-inverse)', borderTop: '1px solid var(--border-on-inverse)', padding: 'var(--space-16) 0 var(--space-8)'}}>
<Container>
<div className="g-foot" style={{display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 'var(--space-12)'}}>
<div>
<div style={{font: '700 1.125rem/1.1 var(--font-display)', color: 'var(--text-on-inverse)'}}>{s.name}</div>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-on-inverse-secondary)', maxWidth: '38ch', marginTop: 'var(--space-3)'}}>{s.purpose}</p>
<div style={{font: 'var(--text-body-sm)', color: 'var(--text-on-inverse)', marginTop: 'var(--space-5)'}}>{s.email}</div>
<div style={{font: 'var(--text-body-sm)', color: 'var(--text-on-inverse-secondary)'}}>{s.base}</div>
</div>
{col('Journeys', [['The New Zealand Tour', '#/tour'], ['Future programs', '#/tour'], ['Register Interest', '#/register']])}
{col('Professional', [['How It Works', '#/how-it-works'], ['CPD', '#/cpd'], ['FAQs', '#/faq'], ['About', '#/about']])}
{col('Follow', [['LinkedIn', '#/home'], ['YouTube', '#/home'], ['Newsletter', '#/register']])}
</div>
<div style={{borderTop: '1px solid var(--border-on-inverse)', marginTop: 'var(--space-12)', paddingTop: 'var(--space-6)', display: 'grid', gap: 'var(--space-4)'}}>
<p style={{font: 'var(--text-body-sm)', color: 'var(--rail-blue-400)', maxWidth: '92ch', margin: 0}}>{window.RLJ.disclaimers.price} {window.RLJ.disclaimers.cpd}</p>
<div style={{display: 'flex', gap: 'var(--space-6)', flexWrap: 'wrap', font: 'var(--text-body-sm)', color: 'var(--rail-blue-400)'}}>
<span>© 2026 {s.name}</span><a href="#/privacy" style={{color: 'var(--rail-blue-400)', textDecoration: 'none'}}>Privacy Policy</a><a href="#/terms" style={{color: 'var(--rail-blue-400)', textDecoration: 'none'}}>Terms</a><a href="/image-credits.html" style={{color: 'var(--rail-blue-400)', textDecoration: 'none'}}>Image credits</a>
</div>
</div>
</Container>
</footer>;
}

function PageHero({label, title, strap, summary, facts}){
return <section style={{borderBottom: '1px solid var(--border-subtle)', padding: 'var(--space-20) 0 var(--space-16)'}}>
<Container>
<Eyebrow>{label}</Eyebrow>
<h1 style={{font: 'var(--text-display-lg)', color: 'var(--text-primary)', maxWidth: '24ch', marginTop: 'var(--space-4)'}}>{title}</h1>
{strap && <p style={{font: 'var(--text-body-lg)', color: 'var(--text-secondary)', maxWidth: '62ch', marginTop: 'var(--space-5)', textWrap: 'pretty'}}>{strap}</p>}
{summary && <p style={{font: 'var(--text-body)', color: 'var(--text-tertiary)', maxWidth: '68ch', marginTop: 'var(--space-4)'}}>{summary}</p>}
{facts && <div style={{marginTop: 'var(--space-10)', maxWidth: 620}}><FactTable rows={facts} /></div>}
</Container>
</section>;
}

function IndulgenceSection({tone = 'sunken', variant = 'full'}){
const I = window.RLJ.indulgence;
const inv = tone === 'inverse';
return <Section tone={tone} eyebrow={I.eyebrow} title={I.title} intro={I.intro}>
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<div>
<Prose inverse={inv}>{I.paras.map((p, i) => <p key={i} style={{margin: 0}}>{p}</p>)}</Prose>
{variant === 'full' && <div style={{marginTop: 'var(--space-8)'}}><Disclaimer>{I.note}</Disclaimer></div>}
</div>
<div style={{display: 'grid', gap: 'var(--space-5)'}}>
{I.items.map(([t, d]) => <div key={t} style={{borderTop: `1px solid ${inv ? 'var(--border-on-inverse)' : 'var(--border-subtle)'}`, paddingTop: 'var(--space-4)'}}>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: inv ? 'var(--text-on-inverse)' : 'var(--text-primary)', margin: 0}}>{t}</h3>
<p style={{font: 'var(--text-body-sm)', color: inv ? 'var(--text-on-inverse-secondary)' : 'var(--text-secondary)', marginTop: 'var(--space-2)', marginBottom: 0, textWrap: 'pretty'}}>{d}</p>
</div>)}
</div>
</div>
{variant === 'full' && <div className="g-3" style={{display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-4)', marginTop: 'var(--space-12)'}}>
{[
['images/indulgence-dining.webp', 'A warmly lit New Zealand restaurant prepared for an evening meal'],
['images/indulgence-vineyard.webp', 'Rippon Vineyard overlooking Lake Wānaka in Central Otago'],
['images/indulgence-hotel.webp', 'The historic Cardrona Hotel in autumn colours']
].map(([src, alt]) =>
<div key={src} style={{position: 'relative', aspectRatio: '4/3', border: '1px solid var(--border-subtle)'}}><img src={src} alt={alt} loading="lazy" decoding="async" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}} /></div>)}
</div>}
</Section>;
}

Object.assign(window, {IndulgenceSection, DS, Button, Badge, Card, Tag, QuoteBlock, Input, Select, Textarea, Checkbox, Container, Eyebrow, Section, Prose, Bullets, FactTable, Disclaimer, Accordion, CTABand, Header, Footer, PageHero, go, NAV});