import { motion } from 'framer-motion';
import { ArrowRight, Mail, Phone } from 'lucide-react';
import { useTranslation } from 'react-i18next';

export function CTA() {
  const { t } = useTranslation();
  const email = t('cta.email');
  const whatsapp = t('cta.whatsapp');

  return (
    <section id="contact" className="section">
      <div className="container-rl">
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
          className="relative overflow-hidden rounded-2xl bg-secondary text-secondary-fg shadow-lg"
        >
          <div
            aria-hidden="true"
            className="pointer-events-none absolute -top-32 -right-32 h-[420px] w-[420px] rounded-full bg-primary/30 blur-3xl"
          />
          <div
            aria-hidden="true"
            className="pointer-events-none absolute -bottom-40 -left-32 h-[380px] w-[380px] rounded-full bg-primary/20 blur-3xl"
          />

          <div className="relative grid gap-10 p-10 lg:grid-cols-[1.1fr_0.9fr] lg:p-16">
            <div>
              <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/20 px-3 py-1 text-xs font-semibold text-primary">
                {t('cta.eyebrow')}
              </span>
              <h2 className="heading text-balance mt-5 text-3xl text-secondary-fg md:text-4xl">
                {t('cta.title')}
              </h2>
              <p className="mt-4 text-secondary-fg/80 md:text-lg">
                {t('cta.subtitle')}
              </p>

              <a
                href={`mailto:${email}`}
                className="btn-primary mt-8"
              >
                {t('cta.ctaPrimary')}
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </a>
            </div>

            <div className="grid gap-4 self-center">
              <ContactCard
                Icon={Mail}
                label={t('cta.emailLabel')}
                value={email}
                href={`mailto:${email}`}
              />
              <ContactCard
                Icon={Phone}
                label={t('cta.whatsappLabel')}
                value={whatsapp}
                href={`https://wa.me/${whatsapp.replace(/\D/g, '')}`}
              />
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function ContactCard({
  Icon,
  label,
  value,
  href,
}: {
  Icon: typeof Mail;
  label: string;
  value: string;
  href: string;
}) {
  return (
    <a
      href={href}
      className="group flex items-center gap-4 rounded-xl border border-white/10 bg-white/5 p-5 transition-colors hover:bg-white/10"
    >
      <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary text-primary-fg">
        <Icon className="h-5 w-5" aria-hidden="true" />
      </div>
      <div className="min-w-0">
        <div className="text-xs uppercase tracking-wider text-secondary-fg/60">
          {label}
        </div>
        <div className="truncate font-semibold text-secondary-fg group-hover:underline">
          {value}
        </div>
      </div>
    </a>
  );
}