'use client';

import Button from '@/components/ui/Button';
import { ArrowRight, MessageCircle } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { WHATSAPP_URL } from '@/lib/constants';

export default function CTA() {
  const { t } = useTranslation();

  return (
    <section className="bg-cream-50 py-16 sm:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-700 via-brand-800 to-brand-900 px-8 py-14 text-center shadow-premium-lg sm:px-16 sm:py-16">
          <div className="pointer-events-none absolute -right-20 -top-20 h-60 w-60 rounded-full bg-gold-500/10" />
          <div className="pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-gold-500/10" />

          <div className="relative z-10">
            <h2 className="mb-4 font-display text-3xl font-bold text-white md:text-4xl">
              {t('cta.title')}
            </h2>
            <p className="mx-auto mb-8 max-w-xl text-brand-100">{t('cta.subtitle')}</p>
            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              <Button href="/shop" variant="gold" size="lg">
                {t('cta.button')}
                <ArrowRight className="h-4 w-4 rtl:rotate-180" />
              </Button>
              <Button
                href={WHATSAPP_URL}
                external
                variant="secondary"
                size="lg"
                className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
              >
                <MessageCircle className="h-4 w-4" />
                {t('cta.whatsapp')}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}