'use client';

import { useEffect, useState } from 'react';
import { getTranslation, Language, useLanguage } from '@/lib/i18n';
import { Phone, Mail, MapPin } from 'lucide-react';
import { Footer } from '@/components/Footer';

const styles = `
  .contact-hero {
    padding: 60px 20px;
    background: #ffffff;
    text-align: center;
    color: #111827;
  }

  .dark .contact-hero {
    background: #111827;
    color: #f3f4f6;
  }
  
  .contact-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111827;
  }
  
  .dark .contact-hero h1 {
    color: #f3f4f6;
  }
  
  .contact-hero p {
    font-size: 1.125rem;
    color: #6b7280;
  }
  
  .dark .contact-hero p {
    color: #9ca3af;
  }
  
  .contact-grid {
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 60px 20px;
    background-color: white;
  }
  
  .dark .contact-grid {
    background-color: #111827;
  }
  
  .contact-card {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 18px;
    padding: 24px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
  }
  
  .dark .contact-card {
    background: #1f2937;
    border-color: #374151;
  }
  
  .contact-card:hover {
    border-color: rgb(20, 113, 76);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  
  .contact-icon {
    width: 48px;
    height: 48px;
    background: rgb(20, 113, 76);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  
  .contact-card h3 {
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
  }
  
  .dark .contact-card h3 {
    color: #f3f4f6;
  }
  
  .contact-card p {
    font-size: 0.875rem;
    color: #6b7280;
  }
  
  .dark .contact-card p {
    color: #9ca3af;
  }
  
  .contact-card a {
    color: #6b7280;
    text-decoration: none;
  }
  
  .contact-card a:hover {
    color: rgb(20, 113, 76);
  }
`;

export default function Contact() {
  const [lang, setLang] = useState<Language>('en');
  const { getLang } = useLanguage();
  const t = (key: string) => getTranslation(lang, key);

  useEffect(() => {
    setLang(getLang());
    const handleLanguageChange = (e: any) => setLang(e.detail);
    window.addEventListener('languageChange', handleLanguageChange);
    return () => window.removeEventListener('languageChange', handleLanguageChange);
  }, [getLang]);

  const contactInfo = [
    { icon: Phone, title: t('contact.phone'), value: '9546', link: 'tel:9546' },
    { icon: Mail, title: t('contact.email'), value: 'edr_@edrsc.com', link: 'mailto:edr_@edrsc.com' },
    { icon: MapPin, title: t('contact.address'), value: 'Addis Ababa, Ethiopia', link: '#' },
  ];

  return (
    <>
      <style>{styles}</style>
      <main>
        <section className="contact-hero">
          <h1>{t('contact.title')}</h1>
          <p>{t('contact.subtitle')}</p>
        </section>

        <section className="contact-grid">
          {contactInfo.map((info, idx) => {
            const Icon = info.icon;
            return (
              <a key={idx} href={info.link} className="contact-card">
                <div className="contact-icon">
                  <Icon size={24} color="white" />
                </div>
                <h3>{info.title}</h3>
                <p>{info.value}</p>
              </a>
            );
          })}
        </section>
      </main>
      <Footer />
    </>
  );
}
