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

export function WorkflowSection({ content }: { content: HomepageContent['workflow'] }) {
  return (
    <Section id="workflow" 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.workflowImage}
          />
          <Workflow items={content.steps} label={content.title} />
        </Stack>
      </Container>
    </Section>
  );
}
