import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { cn } from '../../../lib/cn';
import { buttonBaseClass } from '../../../lib/buttonStyles';

export const CtaSection = () => {
  return (
    <section className="snap-start bg-black">
      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
          className="flex items-center justify-center gap-4"
        >
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
          <span className="text-xs font-semibold uppercase tracking-[0.4em] text-white">
            Ready when you are
          </span>
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
        </motion.div>
        <motion.h3
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
          className="text-4xl font-medium leading-tight text-white sm:text-5xl"
        >
          Join the Infrastructure Revolution
        </motion.h3>
        <motion.p
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
          className="max-w-2xl text-lg text-white/70"
        >
          From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
        </motion.p>
        <div className="flex w-full flex-col items-stretch gap-4 sm:w-auto sm:flex-row sm:items-center sm:justify-center">
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-20%' }}
            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
            className="w-full sm:w-auto"
          >
            <Link
              to="/about"
              className={cn(
                buttonBaseClass,
                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
              )}
            >
              About us
            </Link>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-20%' }}
            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
            className="w-full sm:w-auto"
          >
            <a
              href="https://calendly.com/sachao/30min"
              target="_blank"
              rel="noopener noreferrer"
              className={cn(
                buttonBaseClass,
                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
              )}
            >
              Book a Meeting
            </a>
          </motion.div>
        </div>
      </div>
    </section>
  );
};