// Contact, Privacy, Terms and the not-found page. Copy lives in data.js.

function PolicyBody({doc}){
return <Section>
<div style={{maxWidth: '76ch'}}>
<p style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: 'var(--text-tertiary)', margin: 0}}>Last updated {doc.updated}</p>
<div style={{marginTop: 'var(--space-6)'}}><Prose><p style={{margin: 0}}>{doc.intro}</p></Prose></div>
<div style={{marginTop: 'var(--space-12)', display: 'grid', gap: 'var(--space-10)'}}>
{doc.sections.map(([heading, paras]) => <section key={heading}>
<h2 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)', margin: 0, paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)'}}>{heading}</h2>
<div style={{marginTop: 'var(--space-4)', display: 'grid', gap: 'var(--space-4)'}}>
{/* A paragraph may be a function when its wording depends on live config,
    so that it cannot drift from what the site actually does. */}
{paras.map((p, i) => <p key={i} style={{font: 'var(--text-body)', color: 'var(--text-secondary)', margin: 0, textWrap: 'pretty'}}>{typeof p === 'function' ? p() : p}</p>)}
</div>
</section>)}
</div>
</div>
</Section>;
}

function ContactPage(){
const C = window.RLJ.contact;
return <div>
<PageHero label="Contact" title="Talk to the people running the tour" strap={C.intro} />
<Section>
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<div>
<Eyebrow>Details</Eyebrow>
<div style={{marginTop: 'var(--space-5)'}}><FactTable rows={C.rows} /></div>
<p style={{marginTop: 'var(--space-8)', marginBottom: 0}}>
<a href={'mailto:' + window.RLJ.site.email} style={{font: 'var(--text-label)', color: 'var(--text-link)'}}>Email {window.RLJ.site.email} →</a>
</p>
<div style={{marginTop: 'var(--space-8)'}}><Disclaimer>{C.note}</Disclaimer></div>
</div>
<div style={{background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', padding: 'var(--space-10)'}}>
<Eyebrow>What to get in touch about</Eyebrow>
<div style={{marginTop: 'var(--space-6)', display: 'grid', gap: 'var(--space-6)'}}>
{C.topics.map(([t, d]) => <div key={t} style={{borderTop: '1px solid var(--border-subtle)', paddingTop: 'var(--space-4)'}}>
<h3 style={{font: 'var(--text-title)', fontFamily: 'var(--font-display)', color: 'var(--text-primary)', margin: 0}}>{t}</h3>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 'var(--space-2)', marginBottom: 0, textWrap: 'pretty'}}>{d}</p>
</div>)}
</div>
</div>
</div>
</Section>
<CTABand heading="Interested in one of the journeys?" copy="Registering interest tells us which journey you have in mind and how to reach you when confirmed dates, final pricing and the detailed learning program are ready." note="It is not a booking and creates no payment obligation." />
</div>;
}

function PrivacyPage(){
return <div>
<PageHero label="Privacy" title="Privacy Policy" strap="What this website collects, why, and what happens to it." />
<PolicyBody doc={window.RLJ.privacy} />
</div>;
}

function TermsPage(){
return <div>
<PageHero label="Terms" title="Website and Registration Terms" strap="These cover the use of this site and the registration of interest. Booking terms are issued separately." />
<PolicyBody doc={window.RLJ.terms} />
</div>;
}

function NotFoundPage(){
return <div>
<PageHero label="Not found" title="That page does not exist" strap="The link may be out of date, or the address may have been mistyped." />
<Section>
<Eyebrow>Try one of these</Eyebrow>
<div style={{marginTop: 'var(--space-6)', display: 'grid', gap: 'var(--space-3)', maxWidth: '46ch'}}>
{/* Path hrefs, not fragments. This page is reached at a bad path such as
    /missing, where a '#/tour' link would only produce '/missing#/tour' — the
    page would render, but reloading or sharing that URL still 404s. A real
    path leaves the bad one behind. */}
{[...tours().map(t => [`${t.title} — ${t.shortName}`, t.slug]), ['How a journey works', 'how-it-works'], ['How CPD is documented', 'cpd'], ['About Rail Learning Journeys', 'about'], ['Frequently asked questions', 'faq'], ['Contact us', 'contact']].map(([label, page]) =>
<a key={page} href={'/' + page} style={{font: 'var(--text-body)', color: 'var(--text-link)', textDecoration: 'none', borderTop: '1px solid var(--border-subtle)', paddingTop: 'var(--space-3)'}}>{label} →</a>)}
</div>
<div style={{marginTop: 'var(--space-10)'}}><Button onClick={() => {window.location.href = '/';}}>Back to the home page</Button></div>
</Section>
</div>;
}

Object.assign(window, {ContactPage, PrivacyPage, TermsPage, NotFoundPage});