// Home = город-пикер. Ничего лишнего.

const CityCard = ({ city, onClick }) => (
  <button
    onClick={onClick}
    className="group text-left p-4 sm:p-6 rounded-2xl bg-white border border-paper-200 hover:border-brand-400 hover:shadow-card active:scale-95 transition-all relative overflow-hidden w-full"
  >
    <div className="absolute -right-3 -top-3 w-16 sm:w-20 h-16 sm:h-20 rounded-full bg-brand-50 group-hover:bg-brand-100 transition" />
    <div className="relative">
      <div className="text-3xl sm:text-4xl mb-2 sm:mb-4">{city.emoji}</div>
      <div className="font-display font-semibold text-base sm:text-xl text-ink-900">{city.name}</div>
      <div className="mt-2 sm:mt-4 inline-flex items-center gap-1 text-xs sm:text-sm font-semibold text-brand-600">
        Выбрать <Icon name="arrowRight" size={12} />
      </div>
    </div>
  </button>
);

const Home = ({ navigate }) => {
  const { setCity } = useStore();

  const handleCity = (id) => {
    setCity(id);
    navigate({ name: 'catalog' });
  };

  return (
    <div className="min-h-[calc(100vh-56px)] sm:min-h-[calc(100vh-64px)] flex flex-col items-center justify-center py-10 sm:py-16 px-4">
      <div className="w-full max-w-3xl">

        {/* Hero */}
        <div className="text-center mb-8 sm:mb-12">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-50 border border-brand-100 mb-4">
            <span className="text-[11px] font-semibold text-brand-700 tracking-wide uppercase">Ярмарка 2026</span>
          </div>
          <h1 className="font-display font-bold text-3xl sm:text-4xl md:text-5xl text-ink-900 tracking-tight mb-3">
            Выберите ваш город
          </h1>
          <p className="text-ink-500 text-sm sm:text-base max-w-sm mx-auto">
            Покажем товары от команд вашего офиса
          </p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5 sm:gap-3 md:gap-4">
          {window.DATA.CITIES.map((c) => (
            <CityCard key={c.id} city={c} onClick={() => handleCity(c.id)} />
          ))}
          {/* All cities */}
          <button
            onClick={() => { setCity(null); navigate({ name: 'catalog' }); }}
            className="group text-left p-4 sm:p-6 rounded-2xl border border-dashed border-paper-200 hover:border-brand-300 hover:bg-brand-50 active:scale-95 transition-all w-full"
          >
            <div className="text-3xl sm:text-4xl mb-2 sm:mb-4">🌍</div>
            <div className="font-display font-semibold text-base sm:text-xl text-ink-900">Все города</div>
          </button>
        </div>

      </div>
    </div>
  );
};

window.Home = Home;