'use client';

import { useEffect, useState } from 'react';
import { getTranslation, Language, useLanguage } from '@/lib/i18n';
import Link from 'next/link';
import { BookOpen, CreditCard, Headphones, Star, MapPin, Radio, ArrowRight } from 'lucide-react';

const styles = `
  .service-hero {
    padding: 60px 20px;
    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
    text-align: center;
    color: #111827;
  }
  
  .dark .service-hero {
    color: #f3f4f6;
  }
  
  .service-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111827;
  }
  
  .dark .service-hero h1 {
    color: #f3f4f6;
  }
  
  .service-hero p {
    font-size: 1.125rem;
    color: #6b7280;
    max-width: 48rem;
    margin: 0 auto;
  }
  
  .dark .service-hero p {
    color: #9ca3af;
  }
  
  .service-grid {
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    padding: 60px 20px;
    background-color: white;
  }
  
  .dark .service-grid {
    background-color: #111827;
  }
  
  .service-card {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 18px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .dark .service-card {
    background: #1f2937;
    border-color: #374151;
  }
  
  .service-card:hover {
    border-color: rgb(20, 113, 76);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }
  
  .service-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  
  .service-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
  }
  
  .dark .service-card h3 {
    color: #f3f4f6;
  }
  
  .service-card p {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 16px;
  }
  
  .dark .service-card p {
    color: #9ca3af;
  }
  
  .service-card a {
    color: rgb(20, 113, 76);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .service-card a:hover {
    text-decoration: underline;
  }
  
  .info-section {
    padding: 60px 20px;
    background-color: #f9fafb;
  }
  
  .dark .info-section {
    background-color: #0f1117;
  }
  
  .info-grid {
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  
  .info-box {
    background: white;
    border-radius: 18px;
    padding: 32px;
    border: 1px solid #e5e7eb;
  }
  
  .dark .info-box {
    background: #1f2937;
    border-color: #374151;
  }
  
  .info-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111827;
  }
  
  .dark .info-box h3 {
    color: #f3f4f6;
  }
  
  .info-box p {
    color: #6b7280;
    margin-bottom: 16px;
  }
  
  .dark .info-box p {
    color: #9ca3af;
  }
  
  .info-box ul {
    list-style: none;
    padding: 0;
  }
  
  .info-box li {
    font-size: 0.875rem;
    color: #6b7280;
    padding: 8px 0;
  }
  
  .dark .info-box li {
    color: #9ca3af;
  }
  
  .cta-bg {
    background-color: rgb(20, 113, 76);
    color: white;
    padding: 60px 20px;
    text-align: center;
  }
  
  .cta-bg h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
  }
  
  .cta-bg p {
    font-size: 1.125rem;
    margin-bottom: 32px;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  .button-white {
    display: inline-block;
    padding: 16px 32px;
    background-color: white;
    color: rgb(20, 113, 76);
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
  }
  
  .button-white:hover {
    transform: scale(1.05);
  }
  
  @media (max-width: 768px) {
    .info-grid {
      grid-template-columns: 1fr;
    }
    
    .service-hero h1 {
      font-size: 1.875rem;
    }
  }
`;

export default function Services() {
  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 services = [
    { icon: BookOpen, title: t('services.booking'), desc: t('services.bookingDesc'), color: '#3b82f6' },
    { icon: MapPin, title: t('services.seats'), desc: t('services.seatsDesc'), color: '#10b981' },
    { icon: CreditCard, title: t('services.payment'), desc: t('services.paymentDesc'), color: '#a855f7' },
    { icon: Headphones, title: t('services.support'), desc: t('services.supportDesc'), color: '#f97316' },
    { icon: Star, title: t('services.loyalty'), desc: t('services.loyaltyDesc'), color: '#ec4899' },
    { icon: Radio, title: t('services.tracking'), desc: t('services.trackingDesc'), color: '#ef4444' },
  ];

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

        <div className="service-grid">
          {services.map((service, idx) => {
            const Icon = service.icon;
            return (
              <div key={idx} className="service-card">
                <div className="service-icon" style={{ background: `${service.color}20` }}>
                  <Icon size={28} color={service.color} />
                </div>
                <h3>{service.title}</h3>
                <p>{service.desc}</p>
                <Link href="/booking/search">
                  Learn More <ArrowRight size={16} />
                </Link>
              </div>
            );
          })}
        </div>

        <section className="info-section">
          <div className="info-grid">
            <div className="info-box">
              <h3>Multi-Currency Support</h3>
              <p>Book in multiple currencies with real-time exchange rates.</p>
              <ul>
                <li>✓ ETB (Ethiopian Birr)</li>
                <li>✓ DJF (Djiboutian Franc)</li>
                <li>✓ USD (US Dollar)</li>
              </ul>
            </div>
            <div className="info-box">
              <h3>Age-Based Pricing</h3>
              <p>Smart pricing for families with special rates for children.</p>
              <ul>
                <li>✓ Adults (≥5 years): Full fare</li>
                <li>✓ Children (&lt;5 years): First free</li>
                <li>✓ Automatic age calculation</li>
              </ul>
            </div>
          </div>
        </section>

        <section className="cta-bg">
          <h2>Experience the Difference</h2>
          <p>Start booking your train journey today and discover our premium services.</p>
          <Link href="/booking/search" className="button-white">Book Your Trip Now</Link>
        </section>
      </main>
    </>
  );
}
