// ============ Shared page-head boilerplate ============
// Usage:
//   <PageShell active="sobre" defaultPalette="sober">
//     <PageHead crumb="Início / Sobre" title={...} lede="...">
//     ... content ...
//   </PageShell>

const { useState: usePS, useEffect: useEPS } = React;

function PageShell({ active, defaultPalette = "fire", children }) {
  const [palette, paletteId, setPaletteId] = usePalette(defaultPalette);
  return (
    <div className="obpc-page" style={{ background: palette.bg, color: palette.fg, "--accent": palette.accent, "--bg": palette.bg }}>
      <GlobalNav active={active} palette={palette} paletteId={paletteId} setPaletteId={setPaletteId}/>
      {typeof children === "function" ? children(palette) : children}
      <FloatingWA palette={palette}/>
      <GlobalFooter palette={palette}/>
    </div>
  );
}

function PageHead({ crumb, num, kicker, title, lede, bg, palette }) {
  return (
    <section className="obpc-phead" style={{ borderBottomColor: `${palette.fg}15` }}>
      {bg && <div className="obpc-phead-bg">{bg}</div>}
      <div className="obpc-phead-inner">
        <div className="obpc-phead-crumb" style={{ color: palette.muted }}>
          <a href="/">Início</a>
          <span>/</span>
          <span style={{ color: palette.accent }}>{crumb}</span>
          {num && <><span style={{ marginLeft: "auto" }}>{num}</span></>}
        </div>
        {kicker && (
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: palette.accent, marginBottom: 20 }}>
            {kicker}
          </div>
        )}
        {/* title aceita HTML estático para tags <em>/<span>/<br/> — nunca passar input de usuário */}
        <h1 className="obpc-phead-title" dangerouslySetInnerHTML={{ __html: typeof title === "string" ? title.replace(/<script[\s\S]*?<\/script>/gi, "") : "" }}/>
        {lede && <p className="obpc-phead-lede" style={{ color: palette.muted }}>{lede}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { PageShell, PageHead });