import { Icon } from '@/lib/icons';
import { CITIES } from '@/lib/data';
import { getAllBusinesses } from '@/lib/queries';

export const metadata = { title: 'Villes couvertes — Darsouk' };
export const dynamic = 'force-dynamic';

export default function VillesPage() {
  const businesses = getAllBusinesses();
  const counts = new Map<string, number>();
  for (const b of businesses) counts.set(b.city, (counts.get(b.city) || 0) + 1);

  const total = businesses.length;
  const covered = CITIES.filter((c) => (counts.get(c) || 0) > 0).length;

  return (
    <div className="wrap" style={{ paddingTop: 32, paddingBottom: 56 }}>
      <div className="chip chip-sm" style={{ background: 'var(--red-tint)', color: 'var(--red-dark)', border: 'none' }}>
        <Icon name="pin" size={14} />58 wilayas
      </div>
      <h1 className="h1" style={{ fontSize: 38, marginTop: 16 }}>Darsouk, partout en Algérie</h1>
      <p className="body" style={{ marginTop: 10, maxWidth: 600, fontSize: 16 }}>
        Choisissez votre ville pour découvrir les commerces, restaurants, cafés et services près de chez vous.
        Présent dans <b>{covered}</b> wilaya{covered > 1 ? 's' : ''} et en pleine expansion.
      </p>

      <div className="row gap24" style={{ marginTop: 24, flexWrap: 'wrap' }}>
        {(
          [
            ['58', 'wilayas couvertes'],
            [String(total), 'commerces référencés'],
            ['1 058', 'communes'],
          ] as const
        ).map((s) => (
          <div key={s[1]}>
            <div className="h2" style={{ color: 'var(--red)' }}>{s[0]}</div>
            <div className="small">{s[1]}</div>
          </div>
        ))}
      </div>

      <h2 className="h3" style={{ marginTop: 40, marginBottom: 16 }}>Toutes les villes</h2>
      <div className="city-grid">
        {CITIES.map((city) => {
          const n = counts.get(city) || 0;
          return (
            <a key={city} className="city-card" href={`/explorer?city=${encodeURIComponent(city)}`}>
              <div className="city-card-ic"><Icon name="pin" size={18} stroke={1.8} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="city-card-name">{city}</div>
                <div className="tiny" style={{ color: n > 0 ? 'var(--teal)' : 'var(--muted)' }}>
                  {n > 0 ? `${n} commerce${n > 1 ? 's' : ''}` : 'Bientôt disponible'}
                </div>
              </div>
              <Icon name="chevronRight" size={16} style={{ color: 'var(--faint)' }} />
            </a>
          );
        })}
      </div>
    </div>
  );
}