'use client';

import React from 'react';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';

export default function CTABanner() {
  const { t } = useLanguage();

  return (
    <section className="py-16 md:py-20 bg-espresso">
      <div className="container-custom">
        <div className="relative rounded-xl overflow-hidden bg-gradient-to-br from-gold/20 via-espresso to-espresso p-10 md:p-16 flex flex-col gap-5 items-center text-center">
          <div className="absolute inset-0 bg-[url('/images/hero/Hero-1.jpeg')] bg-cover bg-center opacity-10"></div>
          <h2 className="font-cormorant text-3xl md:text-5xl text-white font-bold relative z-10 leading-tight">{t('cta.metime.title')}</h2>
          <div className="w-12 h-0.5 bg-gold relative z-10"></div>
          <p className="text-white/80 text-sm relative z-10 max-w-lg">{t('cta.metime.desc')}</p>
          <div className="flex flex-wrap gap-3 relative z-10">
            <Link href="/online-booking" className="px-6 py-3 bg-white text-espresso text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold hover:text-white transition-all duration-300">{t('cta.metime.btn')}</Link>
            <a href="https://api.whatsapp.com/send/?phone=6281911111636&text&type=phone_number&app_absent=0" target="_blank" rel="noopener noreferrer" className="px-6 py-3 border border-white text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-white hover:text-espresso transition-all duration-300">Booking via WhatsApp</a>
          </div>
        </div>
      </div>
    </section>
  );
}
