import type { LandingCtaContent } from './content';

interface CTAProps {
  content: LandingCtaContent;
}

export const CTA = ({ content }: CTAProps) => (
  <section className='container mx-auto px-4 py-24'>
    <div className='mx-auto max-w-4xl'>
      <div className='border-border/40 from-muted/50 to-muted/30 rounded-2xl border bg-linear-to-br p-8 text-center md:p-12'>
        <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
          {content.heading}
        </h2>
        <p className='text-muted-foreground mb-8 text-lg'>
          {content.description}
        </p>

        <div className='mt-12'>
          <p className='text-muted-foreground mb-3 text-sm font-medium'>
            {content.commandLabel}
          </p>
          <div className='border-border/40 bg-background mx-auto max-w-2xl rounded-lg border p-4'>
            <code className='block text-left text-sm whitespace-pre-wrap'>
              {content.command}
            </code>
          </div>
        </div>
      </div>
    </div>
  </section>
);
