/* Professor's Transport shared page-level helpers */

// PageHero compact hero for inner pages. Crumb + eyebrow + headline + lede + optional sub-image
function PageHero({ crumb, eyebrow, title, lede, accent, meta }) {
 return (
 <section className="phero">
 <div className="container phero__inner">
 <nav className="phero__crumb">
 <a href="index.html">Home</a>
 <span className="sep">/</span>
 {crumb}
 </nav>
 <div className="phero__body">
 <div className="phero__copy">
 {eyebrow && (
 <div className="hero__eyebrow" style={{marginBottom: 28}}>
 <span className="rule"></span>
 <span className="eyebrow"><span className="dot"></span>{eyebrow}</span>
 </div>
 )}
 <h1 className="h-section phero__h" style={{fontSize: "clamp(40px, 5vw, 76px)", lineHeight: 0.98}}>
 {renderHeadline(title)}
 </h1>
 {lede && <p className="phero__lede">{lede}</p>}
 </div>
 {(accent || meta) && (
 <aside className="phero__side">
 {accent && <div className="phero__accent">{accent}</div>}
 {meta && (
 <dl className="phero__meta">
 {meta.map(([k,v], i) => (
 <React.Fragment key={i}>
 <dt>{k}</dt>
 <dd>{v}</dd>
 </React.Fragment>
 ))}
 </dl>
 )}
 </aside>
 )}
 </div>
 </div>
 </section>
 );
}

// SectionHead reusable section header (matches sec-head pattern)
function SectionHead({ num, title, lede }) {
 return (
 <div className="sec-head">
 <div>
 <div className="sec-head__num">{num}</div>
 <h2 className="h-section">{renderHeadline(title)}</h2>
 </div>
 {lede && <p className="sec-head__lead">{lede}</p>}
 </div>
 );
}

// CTABanner bottom-of-page CTA strip used on every inner page
function CTABanner({ title, lede, primary, secondary }) {
 return (
 <section className="cta-banner">
 <div className="container cta-banner__inner">
 <div>
 <h2 className="h-section" style={{color:"var(--surface)"}}>
 {renderHeadline(title)}
 </h2>
 {lede && <p>{lede}</p>}
 </div>
 <div className="cta-banner__btns">
 {primary && (primary.onClick ?
 <button type="button" className="btn btn--accent" onClick={primary.onClick}>{primary.label} <Icon.arrow /></button> :
 <a href={primary.href} className="btn btn--accent">{primary.label} <Icon.arrow /></a>)}
 {secondary && <a href={secondary.href} className="btn btn--inverse">{secondary.label}</a>}
 </div>
 </div>
 </section>
 );
}

// PageShell wraps page content with UtilityBar + Nav + Footer + Tweaks
function PageShell({ current, children }) {
 const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
 React.useEffect(() => { window.applyTokens(t); }, [t]);

 return (
 <>
 <UtilityBar />
 <Nav current={current} />
 {children}
 <Footer />

 <TweaksPanel title="Tweaks">
 <TweakSection label="Palette">
 <TweakSelect label="Base palette" value={t.palette}
 onChange={v => setTweak("palette", v)}
 options={[
 { value: "navy-amber", label: "Navy + amber" },
 { value: "graphite", label: "Graphite" },
 { value: "forest", label: "Forest" },
 { value: "ink-paper", label: "Ink on paper" },
 ]} />
 <TweakColor label="Accent" value={t.accent}
 onChange={v => setTweak("accent", v)}
 options={["#dba24a", "#c25a3a", "#3a7be0", "#b8d845"]} />
 </TweakSection>
 <TweakSection label="Typography">
 <TweakRadio label="Font" value={t.fontPairing}
 onChange={v => setTweak("fontPairing", v)}
 options={[
 { value: "geist-serif", label: "Geist" },
 { value: "manrope-mono", label: "Manrope" },
 { value: "saans-only", label: "Grotesk" },
 ]} />
 <TweakRadio label="Density" value={t.density}
 onChange={v => setTweak("density", v)}
 options={[
 { value: "compact", label: "Compact" },
 { value: "comfortable", label: "Default" },
 { value: "spacious", label: "Spacious" },
 ]} />
 </TweakSection>
 </TweaksPanel>
 </>
 );
}

Object.assign(window, { PageHero, SectionHead, CTABanner, PageShell });