// Shared page-level building blocks used by section landings.

function PageHero({ eyebrow, title, body, image, kicker, accent = 'teal', ledger, primaryCta, secondaryCta, navigate }) {
 // Navy-blue page hero, consistent with the homepage and the navy used
 // across the whole site. Mulberry top rule + CTA accent.
 const overlay = 'linear-gradient(105deg, rgba(30,58,110,0.93) 0%, rgba(30,58,110,0.80) 50%, rgba(30,58,110,0.55) 100%)';
 return (
 <section style={{ background: '#1E3A6E', color: '#fff', position: 'relative', overflow: 'hidden' }}>
 {image && (
 <img src={image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, opacity: 0.6 }} />
 )}
 <div style={{ position: 'absolute', inset: 0, background: image ? overlay : 'transparent', zIndex: 1 }} />
 {!image && <NetworkMotif opacity={0.16} stroke="#fff" dense />}
 <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#8E3B5E', zIndex: 2 }} />
 <div className="container" style={{ position: 'relative', zIndex: 2, padding: '72px 32px 72px' }}>
 {eyebrow && <div className="eyebrow" style={{ color: '#D8C2CD', marginBottom: 18 }}>{eyebrow}</div>}
 <h1 className="hero-h1-mobile-lg" style={{
 fontSize: 'clamp(34px, 4.2vw, 56px)', fontWeight: 800, lineHeight: 1.07,
 letterSpacing: '-0.02em', color: '#fff', margin: 0, maxWidth: 920, textWrap: 'pretty',
 }}>{title}</h1>
 {body && (
 <p className="hero-sub-mobile" style={{ fontSize: 20, lineHeight: 1.55, marginTop: 24, maxWidth: 720, color: 'rgba(255,255,255,0.92)' }}>{body}</p>
 )}
 {kicker && (
 <div style={{ marginTop: 22, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.25)', fontSize: 14, color: 'rgba(255,255,255,0.8)', maxWidth: 720 }}>
 {kicker}
 </div>
 )}
 {(primaryCta || secondaryCta) && (
 <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
 {primaryCta && <Button size="lg" variant="mulberry" onClick={primaryCta.onClick || (() => navigate(primaryCta.to))}>{primaryCta.label}</Button>}
 {secondaryCta && <Button size="lg" variant="outlineLight" onClick={secondaryCta.onClick || (() => navigate(secondaryCta.to))}>{secondaryCta.label}</Button>}
 </div>
 )}
 {ledger && (
 <div className="ledger-mono" style={{ marginTop: 36, paddingTop: 18, borderTop: '1px dashed rgba(255,255,255,0.35)', display: 'flex', gap: 32, flexWrap: 'wrap', fontSize: 12, color: 'rgba(255,255,255,0.75)', letterSpacing: '0.08em' }}>
 {ledger.map((l, i) => (
 <span key={i}>{l}</span>
 ))}
 </div>
 )}
 </div>
 </section>
 );
}

function Breadcrumbs({ items, navigate }) {
 return (
 <nav style={{ background: '#fff', borderBottom: '1px solid #F7F4F0' }}>
 <div className="container" style={{ padding: '14px 32px', display: 'flex', gap: 8, fontSize: 13, color: '#6B6659', flexWrap: 'wrap' }}>
 <a href="/" onClick={(e)=>{e.preventDefault();navigate('home');}} style={{ color: '#6B6659', textDecoration: 'none' }}>Home</a>
 {items.map((it, i) => (
 <React.Fragment key={i}>
 <span style={{ opacity: 0.5 }}>/</span>
 {it.to ? (
 <a href={hrefFor(it.to)} onClick={(e)=>{e.preventDefault();navigate(it.to);}} style={{ color: '#6B6659', textDecoration: 'none' }}>{it.label}</a>
 ) : (
 <span style={{ color: '#0D1B2A', fontWeight: 600 }}>{it.label}</span>
 )}
 </React.Fragment>
 ))}
 </div>
 </nav>
 );
}

// Grid of subsection cards, used by all section landings
function SubsectionGrid({ eyebrow, title, body, items, navigate, accent = 'teal', columns = 3 }) {
 return (
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 {(eyebrow || title) && (
 <div style={{ marginBottom: 48, maxWidth: 760 }}>
 {eyebrow && <div className="eyebrow" style={{ color: accent === 'coral' ? '#8E3B5E' : '#0D1B2A' }}>{eyebrow}</div>}
 {title && <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 16px', lineHeight: 1.15, letterSpacing: '-0.01em' }}>{title}</h2>}
 <hr className={accent === 'coral' ? 'rule-coral' : 'rule-teal'} />
 {body && <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: '#6B6659', margin: '22px 0 0', maxWidth: 620 }}>{body}</p>}
 </div>
 )}
 <div style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 20 }} className="stack-mobile-2">
 {items.map((it, i) => (
 <a key={i} href={hrefFor(it.to || 'support')} onClick={(e)=>{e.preventDefault();navigate(it.to || 'support');}}
 className="card-hover"
 style={{
 background: '#fff', border: '1px solid #D5CFBF', borderRadius: 0,
 padding: '26px 26px 28px', textDecoration: 'none', color: '#0D1B2A',
 display: 'flex', flexDirection: 'column', gap: 12,
 }}>
 {it.icon && (
 <div style={{ width: 44, height: 44, borderRadius: 0, background: it.coral ? '#E8E3DA' : '#E8E3DA', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
 <i data-lucide={it.icon} style={{ width: 22, height: 22, color: it.coral ? '#8E3B5E' : '#0D1B2A' }} />
 </div>
 )}
 {it.tag && <span className={`chip ${it.coral ? 'chip-coral' : ''}`}>{it.tag}</span>}
 <h3 style={{ fontSize: 20, fontWeight: 700, color: '#0D1B2A', margin: 0, lineHeight: 1.3 }}>{it.title}</h3>
 <p style={{ fontSize: 15, lineHeight: 1.6, color: '#6B6659', margin: 0 }}>{it.body}</p>
 <div style={{ marginTop: 'auto', paddingTop: 4, fontSize: 14, fontWeight: 700, color: it.coral ? '#8E3B5E' : '#0D1B2A' }}>{it.cta || 'Learn more'} <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></div>
 </a>
 ))}
 </div>
 </div>
 </section>
 );
}

// CTA block (consistent across pages)
// v2.0: the section is always navy (mulberry is never a background fill).
// The single mulberry per view is the primary CTA button.
function CTABlock({ eyebrow, title, body, ctaLabel, onCta, secondaryLabel, onSecondary, tone = 'teal' }) {
 return (
 <section style={{ background: '#1E3A6E', color: '#fff', padding: '72px 0', position: 'relative', overflow: 'hidden' }}>
 <NetworkMotif opacity={0.14} stroke="#E8E3DA" />
 <div className="container" style={{ position: 'relative' }}>
 <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }} className="stack-mobile">
 <div>
 {eyebrow && <div className="eyebrow" style={{ color: '#E8E3DA' }}>{eyebrow}</div>}
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#fff', margin: '12px 0 14px', lineHeight: 1.15, letterSpacing: '-0.01em' }}>{title}</h2>
 {body && <p style={{ fontSize: 17, lineHeight: 1.6, margin: 0, color: 'rgba(255,255,255,0.92)', maxWidth: 600 }}>{body}</p>}
 </div>
 <div style={{ justifySelf: 'end', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
 {secondaryLabel && <Button size="lg" variant="outlineLight" onClick={onSecondary}>{secondaryLabel}</Button>}
 <Button size="lg" variant="mulberry" onClick={onCta}>{ctaLabel} <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></Button>
 </div>
 </div>
 </div>
 </section>
 );
}

Object.assign(window, { PageHero, Breadcrumbs, SubsectionGrid, CTABlock });