import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PreviewButton, isDarkBackground, str } from './parts.js';
export function HeroBannerSection({ section }) {
    const c = section.content;
    const dark = isDarkBackground(section.settings);
    const eyebrow = str(c, 'eyebrow');
    const heading = str(c, 'heading');
    const body = str(c, 'body');
    return (_jsxs("div", { className: "mx-auto max-w-3xl px-6 text-center", children: [eyebrow && (_jsx("p", { className: `mb-3 text-sm font-medium tracking-wide uppercase ${dark ? 'text-brand-foreground/80' : 'text-brand'}`, children: eyebrow })), _jsx("h1", { className: "text-3xl leading-tight font-semibold tracking-tight sm:text-5xl", children: heading || 'Your headline goes here' }), body && (_jsx("p", { className: `mx-auto mt-5 max-w-2xl text-base sm:text-lg ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`, children: body })), _jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: [_jsx(PreviewButton, { label: str(c, 'primaryButtonLabel'), href: str(c, 'primaryButtonUrl'), tone: dark ? 'onDark' : 'primary' }), _jsx(PreviewButton, { label: str(c, 'secondaryButtonLabel'), href: str(c, 'secondaryButtonUrl'), tone: "ghost" })] })] }));
}
//# sourceMappingURL=HeroBannerSection.js.map