import { ActionLink } from '@/components/actions/ActionLink';
import { Container, Section } from '@/components/layout/LayoutPrimitives';
import { ResponsiveImage } from '@/components/media/MediaFrame';
import { Eyebrow, Heading, Text } from '@/components/typography/Typography';
import type { HomepageContent } from '@/content/homepage-model';
import styles from './HeroSection.module.css';

interface HeroSectionProps {
  content: HomepageContent['hero'];
  homePath: string;
}

export function HeroSection({ content, homePath }: HeroSectionProps) {
  return (
    <Section id="product" className={styles.hero} aria-label={content.title}>
      <Container>
        <div className={styles.heroGrid}>
          <div className={styles.heroCopy}>
            <Eyebrow>{content.eyebrow}</Eyebrow>
            <Heading level={1} appearance="display">
              {content.title}
            </Heading>
            <Text variant="lead">{content.body}</Text>
            <div className={styles.heroActions} role="group" aria-label={content.eyebrow}>
              <ActionLink href={content.primary.href ?? homePath} variant="button-conversion">
                {content.primary.label}
              </ActionLink>
              <ActionLink
                href={homePath}
                variant="button-primary"
                {...(content.secondary.disabledReason
                  ? { disabledReason: content.secondary.disabledReason }
                  : {})}
              >
                {content.secondary.label}
              </ActionLink>
            </div>
          </div>
          <div className={styles.previewStage}>
            <ResponsiveImage
              src={content.image.src}
              alt={content.image.alt}
              width={content.image.width}
              height={content.image.height}
              ratio="wide"
              priority
              sizes="(max-width: 767px) 100vw, 48vw"
              caption={content.preview.caption}
              className={styles.heroImage}
            />
          </div>
        </div>
      </Container>
    </Section>
  );
}
