import type { Metadata } from 'next'
import InternalPageTemplate from '@/components/InternalPageTemplate'
import BreadcrumbJsonLd from '@/components/BreadcrumbJsonLd'
import Link from 'next/link'
import { getTranslations } from 'next-intl/server'
import { buildAlternates } from '@/lib/seo'

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>
}): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations('seo')
  const { canonical, languages } = buildAlternates(locale, '/guides')
  return {
    title: t('guides'),
    description:
      'Learn how hotel geo-pricing works, why Booking.com shows different prices by country, and how to always find the cheapest hotel rate. Free guides from CahooTravel.',
    alternates: { canonical, languages },
  }
}

const GUIDES = [
  {
    slug: 'hotel-geo-pricing-explained',
    title: 'Hotel Geo-Pricing Explained: Why the Same Room Costs More Depending on Where You Search',
    description:
      'Booking platforms like Booking.com and Airbnb show different prices to users from different countries. Here\'s why it happens and how to use it to your advantage.',
    readTime: '7 min read',
    tag: 'Fundamentals',
    image: '/guides/hotel-geo-pricing.jpg',
    imageAlt: 'Hotel room with city view representing geo-pricing differences',
  },
  {
    slug: 'booking-com-prices-by-country',
    title: 'Booking.com Prices by Country: How Much You Could Be Overpaying',
    description:
      'Booking.com shows different hotel prices to users based on their country. Price gaps of up to 40% are common. Here\'s what the data shows and how to pay less.',
    readTime: '6 min read',
    tag: 'Platform Deep-Dive',
    image: '/guides/booking-com-prices.jpg',
    imageAlt: 'Laptop open for hotel price comparison on Booking.com',
  },
  {
    slug: 'cheapest-hotel-price-without-vpn',
    title: 'How to Find the Cheapest Hotel Price Without Using a VPN',
    description:
      'Many travellers use VPNs to try to unlock cheaper hotel rates. It rarely works. Here\'s a more reliable, legal method that actually finds geo-pricing gaps.',
    readTime: '8 min read',
    tag: 'How-To',
    image: '/guides/cheapest-hotel-vpn.jpg',
    imageAlt: 'Travellers planning a trip with maps and documents',
  },
  {
    slug: 'japan-hotel-prices',
    title: 'Japan Hotel Prices: Why Foreign Visitors Often Pay More Than Locals',
    description:
      'Hotels in Japan frequently show different prices to visitors browsing from abroad. Here\'s why, which platforms show the biggest gaps, and how to book at the best rate.',
    readTime: '7 min read',
    tag: 'Destination Guide',
    image: '/guides/japan-hotel-prices.jpg',
    imageAlt: 'Tokyo city skyline at night',
  },
  {
    slug: 'airbnb-vs-booking-different-prices',
    title: 'Airbnb vs Booking.com: Why the Same Property Shows Different Prices on Each Platform',
    description:
      'The same accommodation can cost 10–30% more on one platform than the other. Here\'s exactly why prices differ and how to always find the cheaper option.',
    readTime: '6 min read',
    tag: 'Platform Comparison',
    image: '/guides/airbnb-vs-booking.jpg',
    imageAlt: 'Modern apartment interior representing short-term rental platforms',
  },
  {
    slug: 'best-time-to-book-hotels',
    title: 'Best Time to Book a Hotel: When Prices Are Actually Lowest',
    description:
      'Is it cheaper to book hotels early or last minute? The honest answer depends on your destination type — and timing is rarely the biggest saving available to you.',
    readTime: '7 min read',
    tag: 'Strategy',
    image: '/guides/best-time-to-book.jpg',
    imageAlt: 'Airplane at dusk representing travel planning and booking timing',
  },
  {
    slug: 'why-do-hotel-prices-change-by-location',
    title: 'Why Do Hotel Prices Change by Location? The Complete Explanation',
    description:
      'Hotel prices differ depending on where you search from. Here\'s the full explanation of location-based pricing, how it works, and how to consistently pay the lowest rate.',
    readTime: '6 min read',
    tag: 'Fundamentals',
    image: '/guides/why-hotel-prices-change-by-location.jpg',
    imageAlt: 'World map showing hotel price differences by country',
  },
  {
    slug: 'how-to-find-cheapest-hotel-price',
    title: 'How to Find the Cheapest Hotel Price: A Practical Step-by-Step Guide',
    description:
      'Stop overpaying for hotels. A practical guide covering geo-pricing gaps, platform comparison, booking timing, and the tools that move the needle most.',
    readTime: '7 min read',
    tag: 'How-To',
    image: '/guides/how-to-find-cheapest-hotel-price.jpg',
    imageAlt: 'Traveller comparing hotel prices on a laptop and phone',
  },
  {
    slug: 'best-hotel-price-comparison-tool',
    title: 'The Best Hotel Price Comparison Tool: What to Look For in 2025',
    description:
      'Most comparison tools check platforms. Few check countries. Here\'s why geo-pricing comparison is the most powerful feature to look for — and how tools differ.',
    readTime: '6 min read',
    tag: 'Tools & Strategy',
    image: '/guides/best-hotel-price-comparison-tool.jpg',
    imageAlt: 'Laptop showing hotel price comparison results',
  },
  {
    slug: 'geo-pricing-hotels',
    title: 'Hotel Geo-Pricing: Why You Pay More Depending on Where You Search From',
    description:
      'Geo-pricing means the same room costs different amounts based solely on your search country. Here\'s how it works, which destinations have the biggest gaps, and how to beat it.',
    readTime: '8 min read',
    tag: 'Fundamentals',
    image: '/guides/geo-pricing-hotels.jpg',
    imageAlt: 'Globe with hotel icons representing geo-pricing across countries',
  },
  {
    slug: 'hotel-savings-for-digital-nomads',
    title: 'Hotel Savings for Digital Nomads: How to Pay Less for Every Stay',
    description:
      'Digital nomads book more hotels than almost anyone. Here\'s how geo-pricing affects your accommodation costs and how to consistently find the cheapest rate for every stay.',
    readTime: '7 min read',
    tag: 'Digital Nomads',
    image: '/guides/hotel-savings-digital-nomads.jpg',
    imageAlt: 'Digital nomad working on laptop in a hotel room',
  },
  {
    slug: 'hotel-deals-for-travel-bloggers',
    title: 'Hotel Deals for Travel Bloggers: The Geo-Pricing Edge',
    description:
      'Travel bloggers who understand geo-pricing find cheaper hotels and write more accurate price content. Here\'s how to use country-based price comparison in your work.',
    readTime: '7 min read',
    tag: 'Travel Bloggers',
    image: '/guides/hotel-deals-travel-bloggers.jpg',
    imageAlt: 'Travel blogger photographing a hotel room for content',
  },
  {
    slug: 'booking-com-price-by-country',
    title: 'Booking.com Price by Country: How to Check and Find the Cheapest Rate',
    description:
      'Booking.com shows different hotel prices to users in different countries. Here\'s how to check the price across all markets and book at the cheapest available rate.',
    readTime: '6 min read',
    tag: 'Platform Guide',
    image: '/guides/booking-com-price-by-country.jpg',
    imageAlt: 'Booking.com hotel listing open on a laptop',
  },
]

export default function GuidesPage() {
  return (
    <InternalPageTemplate>
      <div className="mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4 leading-tight">
          Travel Guides & Hotel Price Tips
        </h1>
        <p className="text-gray-500 text-lg max-w-2xl leading-relaxed">
          Practical guides on how hotel geo-pricing works, which platforms charge more by country,
          and how to always find the lowest rate on your next booking.
        </p>
      </div>

      <div className="flex flex-col gap-6">
        {GUIDES.map(guide => (
          <Link
            key={guide.slug}
            href={`/guides/${guide.slug}`}
            className="group flex flex-col sm:flex-row bg-white border border-gray-100 rounded-2xl overflow-hidden hover:border-brand-purple/30 hover:shadow-sm transition-all"
          >
            {/* Thumbnail */}
            <div className="relative shrink-0 w-full sm:w-52 aspect-[16/10] sm:aspect-auto overflow-hidden">
              <img
                src={guide.image}
                alt={guide.imageAlt}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                loading="lazy"
              />
            </div>

            {/* Content */}
            <div className="flex flex-col justify-center p-6">
              <div className="flex items-center gap-3 mb-3">
                <span className="text-xs font-medium text-brand-purple bg-brand-purple-light px-2.5 py-1 rounded-full">
                  {guide.tag}
                </span>
                <span className="text-xs text-gray-400">{guide.readTime}</span>
              </div>
              <h2 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-brand-purple transition-colors leading-snug">
                {guide.title}
              </h2>
              <p className="text-sm text-gray-500 leading-relaxed">{guide.description}</p>
            </div>
          </Link>
        ))}
      </div>

      <BreadcrumbJsonLd items={[{ name: 'Guides', path: '/guides' }]} />
    </InternalPageTemplate>
  )
}