'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useLanguage } from '@/context/LanguageContext';
import styles from './Footer.module.css';

export default function Footer() {
  const { t, language } = useLanguage();

  return (
    <footer className={styles.footer}>
      <div className={styles.glow}></div>
      <div className="container">
        {/* Main Footer Grid */}
        <div className={styles.grid}>
          {/* Brand */}
          <div className={styles.brand}>
            <Link href="/" className={styles.logo}>
              <Image src="/logo.png" alt="Fast Time Phone" width={50} height={50} />
              <div>
                <div className={styles.logoName}>FAST TIME PHONE</div>
                <div className={styles.logoSub}>Mobile &amp; Tech Shop</div>
              </div>
            </Link>
            <p className={styles.brandDesc}>{t.footer.aboutText}</p>
            <div className={styles.socials}>
              <a href="https://wa.me/96590965152" target="_blank" rel="noreferrer" className={styles.socialBtn} aria-label="WhatsApp">
                💬
              </a>
              <a href="https://www.instagram.com/fasttimekw?igsh=MXQ2cjgzZm5vNGx5Zw==" target="_blank" rel="noreferrer" className={styles.socialBtn} aria-label="Instagram">📸</a>
              <a href="https://www.facebook.com/share/1KVBz2nd78/" target="_blank" rel="noreferrer" className={styles.socialBtn} aria-label="Facebook">📘</a>
              <a href="https://tiktok.com/@fast.time.phone" target="_blank" rel="noreferrer" className={styles.socialBtn} aria-label="TikTok">🎵</a>
            </div>
          </div>

          {/* Quick Links */}
          <div className={styles.col}>
            <h4 className={styles.colTitle}>{t.footer.quickLinks}</h4>
            <Link href="/" className={styles.link}>{t.nav.home}</Link>
            <Link href="/products" className={styles.link}>{t.nav.products}</Link>
            <Link href="/deals" className={styles.link}>{t.nav.deals}</Link>
            <Link href="/compare" className={styles.link}>{t.nav.compare}</Link>
            <Link href="/track" className={styles.link}>{t.nav.track}</Link>
          </div>

          {/* Categories */}
          <div className={styles.col}>
            <h4 className={styles.colTitle}>{t.footer.categories}</h4>
            <Link href="/products?category=smartphones" className={styles.link}>📱 {t.categories.smartphones}</Link>
            <Link href="/products?category=accessories" className={styles.link}>🎧 {t.categories.accessories}</Link>
            <Link href="/products?category=watches" className={styles.link}>⌚ {t.categories.watches}</Link>
            <Link href="/products?category=tablets" className={styles.link}>💻 {t.categories.tablets}</Link>
            <Link href="/products?category=gaming" className={styles.link}>🎮 {t.categories.gaming}</Link>
          </div>

          {/* Contact */}
          <div className={styles.col}>
            <h4 className={styles.colTitle}>{t.footer.support}</h4>
            <a href="https://wa.me/96590965152" className={styles.link}>💬 {t.footer.whatsapp}: +965 9096 5152</a>
            <a href="mailto:support@fasttimephone.kw" className={styles.link}>📧 support@fasttimephone.kw</a>
            <span className={styles.link}>📍 {t.footer.address}</span>
            <span className={styles.link}>🕐 {language === 'ar' ? 'السبت – الخميس، 9 ص – 10 م' : 'Sat – Thu, 9AM – 10PM'}</span>
            <div className={styles.payments}>
              <span className={styles.payBadge}>KNET</span>
              <span className={styles.payBadge}>VISA</span>
              <span className={styles.payBadge}>MC</span>
              <span className={styles.payBadge}>Apple Pay</span>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className={styles.bottom}>
          <p className={styles.copyright}>
            © {new Date().getFullYear()} Fast Time Phone. {t.footer.rights}
          </p>
          <div className={styles.bottomLinks}>
            <Link href="/privacy" className={styles.bottomLink}>{t.footer.privacy}</Link>
            <Link href="/terms" className={styles.bottomLink}>{t.footer.terms}</Link>
            <Link href="/returns" className={styles.bottomLink}>{t.footer.returns}</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}
