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 type { HomepageContent } from '@/content/homepage-model';
import styles from './ModulesSection.module.css';

export function ModulesSection({ content }: { content: HomepageContent['modules'] }) {
  return (
    <Section id="modules" aria-label={content.title}>
      <Container>
        <Stack gap="large">
          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
          <div className={styles.modulesLayout}>
            <ResponsiveImage
              src={content.image.src}
              alt={content.image.alt}
              width={content.image.width}
              height={content.image.height}
              ratio="square"
              sizes="(max-width: 1023px) 100vw, 38vw"
              className={styles.modulesImage}
            />
            <FeatureGrid>
              {content.items.map((item) => (
                <FeatureCard
                  key={item.id}
                  title={item.title}
                  description={item.description}
                  {...(item.icon ? { icon: item.icon } : {})}
                />
              ))}
            </FeatureGrid>
          </div>
        </Stack>
      </Container>
    </Section>
  );
}
