CTA Section

// Edit the content below to customize your call-to-action
const CTA_CONTENT = {
  heading: 'Start building today',
  subtitle: 'Join thousands of teams already shipping faster with a component library that just works.',
  primaryCta: { label: 'Get started', href: '#' },
  secondaryCta: { label: 'Learn more', href: '#' }
}

export default function CtaSection() {
  return (
    <section className="px-6 py-16">
      <div className="mx-auto max-w-2xl flex flex-col items-center rounded-2xl border border-[#E5E5E5] dark:border-[#3A3A3A] bg-white dark:bg-[#161616] px-8 py-14 text-center">
        <h2
          className="max-w-[20ch] font-semibold leading-[1.15] tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]"
          style={{ fontSize: 'clamp(24px, 3.4vw, 34px)' }}
        >
          {CTA_CONTENT.heading}
        </h2>
        <p className="mt-4 max-w-[42ch] text-[14px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
          {CTA_CONTENT.subtitle}
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a
            href={CTA_CONTENT.primaryCta.href}
            className="inline-flex items-center justify-center gap-2 rounded-full bg-[#1d1d1f] dark:bg-white px-6 py-3 text-[13px] font-medium text-white dark:text-[#1d1d1f] transition-opacity duration-200 hover:opacity-85 cursor-pointer"
          >
            {CTA_CONTENT.primaryCta.label}
          </a>
          <a
            href={CTA_CONTENT.secondaryCta.href}
            className="inline-flex items-center justify-center rounded-full border border-black/15 dark:border-white/20 px-6 py-3 text-[13px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] transition-colors duration-200 hover:bg-black/[0.03] dark:hover:bg-white/[0.06] cursor-pointer"
          >
            {CTA_CONTENT.secondaryCta.label}
          </a>
        </div>
      </div>
    </section>
  )
}