student-web-if-development-kit/groups/ACAAB/src/components/CTA.tsx

import { MessageCircle } from 'lucide-react';
import { useLang } from '../context/LanguageContext';

const WA_NUMBER = '6285123456789'; // Ganti dengan nomor WhatsApp resmi

export default function CTA() {
    const { t, lang } = useLang();
    const waLink = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(lang === 'id' ? 'Halo, saya ingin mendaftarkan prestasi atau karya saya.' : 'Hello, I would like to register my achievement or work.')}`;

    return (
        <section className="acaab-full-bleed bg-untan-navy py-14 md:py-16 border-t border-white/10">
            <div className="max-w-7xl mx-auto px-4 lg:px-8">
                <div className="bg-untan-yellow/10 border border-untan-yellow/20 rounded-2xl px-8 py-10 md:py-12 flex flex-col md:flex-row items-center justify-between gap-8">

                    {/* LEFT TEXT */}
                    <div className="text-center md:text-left">
                        <span className="inline-block bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 mb-4 rounded-sm">
                            {t.cta.badge}
                        </span>
                        <h2 className="text-white text-2xl md:text-3xl font-bold font-serif leading-snug mb-3">
                            {t.cta.title}
                        </h2>
                        <p className="text-slate-300 text-sm md:text-base leading-relaxed max-w-lg">
                            {t.cta.desc}
                        </p>
                    </div>

                    {/* RIGHT CTA */}
                    <div className="flex flex-col items-center gap-3 shrink-0">
                        <a
                            href={waLink}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-2.5 bg-[#25D366] hover:bg-[#20c05a] text-white text-sm font-bold px-6 py-3 rounded-full transition-all hover:scale-105 shadow-lg shadow-[#25D366]/20 whitespace-nowrap"
                        >
                            <MessageCircle size={18} />
                            {t.cta.waButton}
                        </a>
                    </div>

                </div>
            </div>
        </section>
    );
}