import type { Metadata } from 'next'
import InternalPageTemplate from '@/components/InternalPageTemplate';
import Link from 'next/link';
import { getTranslations } from 'next-intl/server';

export const metadata: Metadata = {
  title: 'Supported Platforms — Compare Prices on 23+ Booking Sites',
  description: 'CahooTravel works with Booking.com, Airbnb, Expedia, Hotels.com, Agoda, VRBO, Trip.com and 16 more. Paste any hotel link and compare prices instantly.',
}

const CATEGORIES = [
  {
    key: 'globalHotels',
    platforms: [
      { name: 'Booking.com',  domain: 'booking.com',  logo: '/partner-logos/booking.png',  url: 'https://booking.com' },
      { name: 'Expedia',      domain: 'expedia.com',  logo: '/partner-logos/expedia.png',  url: 'https://expedia.com' },
      { name: 'Hotels.com',   domain: 'hotels.com',   logo: '/partner-logos/hotels.png',   url: 'https://hotels.com' },
      { name: 'Agoda',        domain: 'agoda.com',    logo: '/partner-logos/agoda.png',    url: 'https://agoda.com' },
      { name: 'Trip.com',     domain: 'trip.com',     logo: '/partner-logos/trip.png',     url: 'https://trip.com' },
      { name: 'Travelocity',  domain: 'travelocity.com', logo: '/partner-logos/travelocity.png', url: 'https://travelocity.com' },
    ],
  },
  {
    key: 'rentalsAlternative',
    platforms: [
      { name: 'Airbnb',       domain: 'airbnb.com',      logo: '/partner-logos/airbnb.png',      url: 'https://airbnb.com' },
      { name: 'VRBO',         domain: 'vrbo.com',        logo: '/partner-logos/vrbo.png',        url: 'https://vrbo.com' },
      { name: 'HomeToGo',     domain: 'hometogo.com',    logo: '/partner-logos/hometogo.png',    url: 'https://hometogo.com' },
      { name: 'Homestay',     domain: 'homestay.com',    logo: '/partner-logos/homestay.png',    url: 'https://homestay.com' },
      { name: 'Plum Guide',   domain: 'plumguide.com',   logo: '/partner-logos/plumguide.png',   url: 'https://plumguide.com' },
      { name: 'Hipcamp',      domain: 'hipcamp.com',     logo: '/partner-logos/hipcamp.png',     url: 'https://hipcamp.com' },
      { name: 'CasasRurales', domain: 'casasrurales.com',logo: '/partner-logos/casasrurales.png',url: 'https://casasrurales.com' },
      { name: 'Misterb&b',    domain: 'misterbandb.com', logo: '/partner-logos/misterbandb.png', url: 'https://misterbandb.com' },
      { name: 'RedAwning',    domain: 'redawning.com',   logo: '/partner-logos/redawning.png',   url: 'https://redawning.com' },
    ],
  },
  {
    key: 'hostels',
    platforms: [
      { name: 'Hostelworld',  domain: 'hostelworld.com', logo: '/partner-logos/hostelworld.png', url: 'https://hostelworld.com' },
    ],
  },
  {
    key: 'regional',
    platforms: [
      { name: 'MakeMyTrip',   domain: 'makemytrip.com',  logo: '/partner-logos/makemytrip.png',  url: 'https://makemytrip.com' },
      { name: 'Goibibo',      domain: 'goibibo.com',     logo: '/partner-logos/goibibo.png',     url: 'https://goibibo.com' },
      { name: 'Cleartrip',    domain: 'cleartrip.com',   logo: '/partner-logos/cleartrip.png',   url: 'https://cleartrip.com' },
      { name: 'Yatra',        domain: 'yatra.com',       logo: '/partner-logos/yatra.png',       url: 'https://yatra.com' },
      { name: 'OYO',          domain: 'oyorooms.com',    logo: '/partner-logos/oyo.png',         url: 'https://oyorooms.com' },
      { name: 'Fliggy',       domain: 'fliggy.com',      logo: '/partner-logos/fliggy.png',      url: 'https://fliggy.com' },
      { name: 'Ostrovok',     domain: 'ostrovok.ru',     logo: '/partner-logos/ostrovok.png',    url: 'https://ostrovok.ru' },
    ],
  },
];

const totalCount = CATEGORIES.reduce((sum, c) => sum + c.platforms.length, 0);

export default async function PlatformsPage() {
  const t = await getTranslations('pages.platforms');

  const categories = CATEGORIES.map(cat => ({
    ...cat,
    name: t(`categories.${cat.key}.name`),
    description: t(`categories.${cat.key}.description`),
  }));

  return (
    <InternalPageTemplate>
      {/* Header */}
      <div className="mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('heading')}</h1>
        <p className="text-gray-500 text-lg max-w-2xl leading-relaxed">
          {t('subheading', { totalCount })}
        </p>
      </div>

      {/* Categories */}
      <div className="flex flex-col gap-14 mb-16">
        {categories.map(category => (
          <div key={category.key}>
            <div className="mb-6">
              <h2 className="text-lg font-semibold text-gray-900">{category.name}</h2>
              <p className="text-sm text-gray-400 mt-0.5">{category.description}</p>
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
              {category.platforms.map(platform => (
                <a
                  key={platform.name}
                  href={platform.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex flex-col items-center gap-3 bg-gray-50 hover:bg-white border border-gray-100 hover:border-gray-200 hover:shadow-sm rounded-2xl px-4 py-5 transition-all duration-200 group"
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={platform.logo}
                    alt={platform.name}
                    className="h-7 w-auto object-contain grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-100 transition-all duration-200"
                  />
                  <span className="text-xs text-gray-500 group-hover:text-gray-800 font-medium text-center transition-colors">
                    {platform.name}
                  </span>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Coming soon note */}
      <div className="bg-gray-50 border border-gray-100 rounded-2xl px-8 py-6 mb-16 flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <div className="flex-shrink-0 text-2xl">🔜</div>
        <div>
          <p className="text-sm font-semibold text-gray-800 mb-0.5">{t('comingSoonHeading')}</p>
          <p className="text-sm text-gray-500 leading-relaxed">
            {t('comingSoonBody', { totalCount })}
          </p>
        </div>
      </div>

      {/* CTA */}
      <div className="rounded-2xl bg-brand-purple text-white p-10 flex flex-col md:flex-row items-center justify-between gap-6">
        <div>
          <h3 className="text-xl font-bold mb-1">{t('ctaHeading')}</h3>
          <p className="text-purple-200 text-sm">{t('ctaBody')}</p>
        </div>
        <Link
          href="/"
          className="flex-shrink-0 bg-brand-yellow hover:bg-brand-yellow-dark text-gray-900 font-medium text-sm px-6 py-2.5 rounded-md transition-colors"
        >
          {t('ctaButton')}
        </Link>
      </div>
    </InternalPageTemplate>
  );
}