/** Título de seção: rótulo curto + título + frase de apoio, alinhado à esquerda. */
export default function SectionHead({ id, eyebrow, title, lede, children }) {
	return (
		<div className="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
			<div className="max-w-2xl">
				{eyebrow && <p className="eyebrow">{eyebrow}</p>}
				<h2 id={id} className={`section-title ${eyebrow ? "mt-3" : ""}`}>
					{title}
				</h2>
				{lede && <p className="mt-3 text-base leading-relaxed text-muted">{lede}</p>}
			</div>
			{children && <div className="shrink-0">{children}</div>}
		</div>
	);
}