---
// CP-SPEC-LOC-001 local_hero
import HeroWrapper from './HeroWrapper.astro';
import Heading from './Heading.astro';
import Paragraph from './Paragraph.astro';
import Button from './Button.astro';

interface Props {
  headline: string;
  subheadline: string;
  primaryCta: { label: string; href: string };
  heroImage?: string;
}
const { headline, subheadline, primaryCta, heroImage } = Astro.props;
---
<HeroWrapper image={heroImage} height="default">
  <div class="local-hero">
    <Heading level={1} variant="display">{headline}</Heading>
    <Paragraph variant="lead">{subheadline}</Paragraph>
    <div class="local-hero__cta">
      <Button href={primaryCta.href} variant="primary" size="lg">
        {primaryCta.label}
      </Button>
    </div>
  </div>
</HeroWrapper>

<style>
  .local-hero {
    max-width: 720px;
  }
  .local-hero__cta {
    margin-top: 1.5rem;
  }
</style>