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

export function ComparisonSection({ content }: { content: HomepageContent['comparison'] }) {
  return (
    <Section tone="muted" aria-label={content.title}>
      <Container>
        <Stack gap="large">
          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
          <ResponsiveImage
            src={content.image.src}
            alt={content.image.alt}
            width={content.image.width}
            height={content.image.height}
            ratio="wide"
            sizes="(max-width: 767px) 100vw, 86vw"
            className={styles.comparisonImage}
          />
          <Comparison
            columns={[
              { title: content.beforeTitle, items: content.beforeItems, tone: 'problem' },
              { title: content.afterTitle, items: content.afterItems, tone: 'solution' },
            ]}
          />
        </Stack>
      </Container>
    </Section>
  );
}
