cta.tsx

import { FC } from 'react';
import { Chrome, Github } from 'lucide-react';
import { CHROME_STORE_URL, GITHUB_REPO_URL } from '../utils/constant';

export const CTA: FC = () => {
  return (
    <section
      className="py-36 px-6 md:px-12 relative overflow-hidden bg-ink"
      id="install"
    >
      <div className="absolute inset-0 grid-bg opacity-70" />
      <div className="absolute top-0 left-0 right-0 h-px bg-edge" />

      <div className="relative max-w-xl mx-auto text-center">
        <div className="inline-flex items-center gap-2 border border-edge bg-ink2/80 px-4 py-1.5 mb-10 rounded-full">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-blink" />
          <span className="font-mono text-[10px] tracking-[0.18em] uppercase text-fog">
            Available now — free
          </span>
        </div>

        <h2 className="font-display text-[clamp(36px,5vw,64px)] font-normal text-cream mb-5 leading-[1.05]">
          Memory that never
          <br />
          <span className="text-amber italic">forgets you.</span>
        </h2>

        <p className="text-[14px] text-mist mb-10 leading-relaxed font-body">
          Install the extension and bring persistent memory to every AI you use.
          <br className="hidden md:block" />
          Free, open-source, takes 30 seconds.
        </p>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <a
            href={CHROME_STORE_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2.5 bg-amber text-white px-7 py-3.5 text-[12px] tracking-widest uppercase font-medium hover:bg-amber/90 transition-colors rounded-sm"
          >
            <Chrome size={20} strokeWidth={1.75} />
            Add to Chrome
          </a>
          <a
            href={GITHUB_REPO_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2.5 border border-edge bg-ink2/60 text-cream px-7 py-3.5 text-[12px] tracking-widest uppercase font-medium hover:bg-ink2 hover:border-edge2 transition-colors rounded-sm"
          >
            <Github size={18} strokeWidth={1.75} />
            Star on GitHub
          </a>
        </div>
      </div>
    </section>
  );
};