import { Container, Section } from '@/components/layout/LayoutPrimitives';
import { CTA } from '@/components/marketing/CTA';
import { ResponsiveImage } from '@/components/media/MediaFrame';
import type { HomepageContent } from '@/content/homepage-model';
import styles from './FinalCtaSection.module.css';

interface FinalCtaSectionProps {
  content: HomepageContent['final'];
}

export function FinalCtaSection({ content }: FinalCtaSectionProps) {
  return (
    <Section className={styles.finalSection} aria-label={content.title}>
      <Container>
        <div className={styles.finalLayout}>
          <ResponsiveImage
            src={content.image.src}
            alt={content.image.alt}
            width={content.image.width}
            height={content.image.height}
            ratio="square"
            sizes="(max-width: 767px) 52vw, 14rem"
            className={styles.brandImage}
          />
          <CTA
            eyebrow={content.eyebrow}
            title={content.title}
            body={content.body}
            primary={content.primary}
            secondary={content.secondary}
          />
        </div>
      </Container>
    </Section>
  );
}
