// GetContent — universeel hero-systeem voor álle subpagina's.
// Eén bron voor hoogte, spacing, max-width, typografie, button-styling, responsive
// gedrag en visuele hiërarchie. Altijd donkerblauw met warm-witte tekst en coral
// accent, gecentreerd. Elke pagina levert alleen inhoud aan via props.
//
// props: {
//   eyebrow?, title, lead?,
//   primary?:{label,to}, secondary?:{label,to},
//   compact?  -> kortere hero (voor formulier-/utility-pagina's),
//   children? -> optionele inhoud onder de kop (bijv. een formulierkaart), links
//                uitgelijnd in een smalle kolom op de donkere hero,
//   onNav
// }
function PageHero({ eyebrow, title, lead, primary, secondary, compact, children, onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const go = (to) => { if (to && onNav) onNav(to); };

  return (
    <section className={'gc-pagehero gc-dark-pattern' + (compact ? ' is-compact' : '')}>
      <div className="gc-pagehero-inner">
        {eyebrow && (
          <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 18 }}>{eyebrow}</span>
        )}
        <h1 className="gc-pagehero-title">{title}</h1>
        {lead && <p className="gc-pagehero-lead">{lead}</p>}
        {(primary || secondary) && (
          <div className="gc-pagehero-cta">
            {primary && (
              <Button variant="primary" size="lg" className="gc-cta-glow"
                onClick={() => go(primary.to)} iconRight={<i data-lucide="arrow-right"></i>}>
                {primary.label}
              </Button>
            )}
            {secondary && (
              <Button variant="ghost" size="lg" onClick={() => go(secondary.to)}>
                {secondary.label}
              </Button>
            )}
          </div>
        )}
        {children && <div className="gc-pagehero-body">{children}</div>}
      </div>
    </section>
  );
}
window.PageHero = PageHero;