import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
import { FeatureCard } from '@/components/marketing/FeatureCard';
import { SectionHeader } from '@/components/marketing/SectionHeader';
import { FeatureGrid } from '@/components/marketing/SectionPatterns';
import { ResponsiveImage } from '@/components/media/MediaFrame';
import { Callout } from '@/components/surfaces/Callout';
import type { HomepageContent } from '@/content/homepage-model';
import styles from './ResultsSection.module.css';

export function ResultsSection({ content }: { content: HomepageContent['results'] }) {
  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.resultsImage}
          />
          <FeatureGrid>
            {content.metrics.map((metric) => (
              <FeatureCard
                key={metric.id}
                title={metric.title}
                description={metric.description}
                {...(metric.icon ? { icon: metric.icon } : {})}
                emphasis="muted"
              />
            ))}
          </FeatureGrid>
          <Callout icon="info" title={content.methodTitle}>
            <ol className={styles.methodList}>
              {content.method.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ol>
          </Callout>
        </Stack>
      </Container>
    </Section>
  );
}
