'use client';

// Suggested installation locations for vending machines.

import {
  HomeOutlined,
  ReadOutlined,
  ShopOutlined,
  MedicineBoxOutlined,
  ClockCircleOutlined,
  AppstoreOutlined,
} from '@ant-design/icons';
import { useLanguage } from '@/app/context/LanguageContext';

const ICONS = {
  hotel: HomeOutlined,
  school: ReadOutlined,
  pharmacy: ShopOutlined,
  hospital: MedicineBoxOutlined,
  night: ClockCircleOutlined,
  specialty: AppstoreOutlined,
};

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

  return (
    <section id="locations" className="relative px-6 md:px-16 py-20 md:py-28 bg-surface border-t border-subtle">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-2xl md:text-4xl font-extrabold brand-gradient-text">{t.locations.title}</h2>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {t.locations.items.map((loc) => {
            const Icon = ICONS[loc.icon];
            return (
              <div
                key={loc.id}
                className="bg-page-60 border border-subtle rounded-2xl p-6 hover:border-brand-500/60 transition-colors"
              >
                <div className="w-12 h-12 rounded-xl bg-brand/15 border border-subtle flex items-center justify-center text-brand-400 text-xl mb-4">
                  {Icon && <Icon />}
                </div>
                <h3 className="text-primary font-bold text-base mb-2">{loc.title}</h3>
                <p className="text-secondary text-sm leading-7">{loc.description}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}