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, '/founders-story')
  return {
    title: t('foundersStory'),
    description:
      'A holiday in Greece led to a discovery: Booking.com was showing us 20% higher hotel prices because of where we were searching from. Here\'s how CahooTravel was born.',
    openGraph: {
      title: 'How a Holiday in Greece Revealed Hotel Geo-Pricing — CahooTravel\'s Founder Story',
      description:
        'We almost overpaid 20% for a hotel — not because prices changed, but because we were searching from the wrong country. This is how we discovered geo-pricing and built CahooTravel.',
      type: 'article',
    },
    alternates: { canonical, languages },
  }
}

const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: 'How a Holiday in Greece Revealed Hotel Geo-Pricing — Our Story',
  description:
    "A holiday in Greece led to a discovery: Booking.com was showing us 20% higher hotel prices because of where we were searching from. Here's how CahooTravel was born.",
  author: { '@type': 'Organization', name: 'CahooTravel' },
  publisher: {
    '@type': 'Organization',
    name: 'CahooTravel',
    logo: { '@type': 'ImageObject', url: 'https://www.cahootravel.com/cahootravel-logo.svg' },
  },
  datePublished: '2025-01-15',
  dateModified: '2025-01-15',
  mainEntityOfPage: 'https://www.cahootravel.com/founders-story',
}

export default function FoundersStoryPage() {
  return (
    <InternalPageTemplate>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
      />

      <article className="max-w-3xl">
        {/* Header */}
        <div className="mb-10">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-xs font-medium text-brand-purple bg-brand-purple-light px-2.5 py-1 rounded-full">
              Our Story
            </span>
            <span className="text-xs text-gray-400">4 min read</span>
          </div>
          <h1 className="text-4xl font-bold text-gray-900 mb-4 leading-tight">
            How a Holiday in Greece Taught Us That Hotels Charge You More Depending on Where You Search
          </h1>
          <p className="text-gray-500 text-lg leading-relaxed">
            I was on a beach in Chalkidiki when I nearly booked a hotel at 20% more than I needed to pay.
            Not because prices were high in general — because the platform knew I was in Greece.
          </p>
        </div>

        <div className="prose prose-gray max-w-none text-sm leading-relaxed space-y-8">

          <section>
            <p className="text-gray-600">
              I was halfway through a holiday in Chalkidiki when I started planning my next trip. That's
              a traveller thing — you're never quite done looking ahead.
            </p>
            <p className="text-gray-600 mt-3">
              I found a hotel I liked for an upcoming stay. Checked the price on Booking.com. It felt
              high, but I was tired and almost booked it anyway. Something made me pause — I'd look
              at it again at home.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              The moment we noticed
            </h2>
            <p className="text-gray-600">
              Two weeks later, back at my desk, I pulled up the same hotel, the same dates, the same
              room. The price was nearly <strong>20% lower</strong> than what I'd seen in Greece.
            </p>
            <p className="text-gray-600 mt-3">
              My first assumption was that prices had dropped while I was away. So I checked an old
              browser tab I'd left open before my trip. The price hadn't moved. It was exactly what
              I remembered from before I left.
            </p>
            <p className="text-gray-600 mt-3">
              The gap wasn't a price drop. It was a <strong>location gap</strong>. Booking.com had
              shown me a more expensive price because I was searching from Greece. Back home, the
              same hotel showed the cheaper rate it always had.
            </p>

            <div className="mt-6 bg-purple-50 border border-purple-100 rounded-xl px-5 py-4">
              <p className="text-sm font-semibold text-gray-900 mb-2">What this looked like in numbers</p>
              <p className="text-sm text-gray-600 leading-relaxed">
                A 3-night stay that cost €210 when searched from Greece was showing €175 from home.
                Same hotel. Same dates. Same room type. Same platform. The only variable was the
                country I appeared to be searching from.
              </p>
            </div>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              It wasn't a one-off
            </h2>
            <p className="text-gray-600">
              A few weeks later it happened again — this time in reverse. A friend visiting from the
              US mentioned they'd booked the same hotel we'd recommended. We compared what we'd each
              paid. They had paid <strong>€40 more</strong> than us. Same room. Same night. Same
              platform. Our home country simply gets quoted a lower base price than theirs.
            </p>
            <p className="text-gray-600 mt-3">
              That confirmed it wasn't just about travelling abroad. The gap is baked into your home
              market too — you just never see it because you have nothing to compare it to.
            </p>
            <p className="text-gray-600 mt-3">
              I spent the following days checking more hotels. Same pattern everywhere — consistent
              10–35% differences depending on the country the search came from. Booking.com, Agoda,
              Expedia. All of them pricing the same room differently based on location.
            </p>
            <p className="text-gray-600 mt-3">
              This isn't an accident or a glitch. Booking platforms use pricing algorithms that
              adjust rates based on where a visitor is located — reading your IP address, device
              locale, and currency to match what users in your market typically pay. It's called
              <strong> geo-pricing</strong>, and the vast majority of travellers have never heard
              of it. Which means most people book at whatever price they're shown, without ever
              knowing a cheaper rate exists for the exact same room.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              Why we built CahooTravel
            </h2>
            <p className="text-gray-600">
              Once you know geo-pricing exists, the manual fix is obvious: switch your VPN to the
              cheapest country and book from there. The problem is the step before that — finding
              out <em>which</em> country is cheapest for this specific hotel, on this specific date.
              That means changing your location 100+ times and refreshing the page each time. Nobody
              does that.
            </p>
            <p className="text-gray-600 mt-3">
              We built CahooTravel to do that part automatically. Paste a hotel link — we check the
              price from every country simultaneously and show you the full picture in seconds.
              Which country is cheapest. How big the gap is. Exactly how much you could save.
            </p>
            <p className="text-gray-600 mt-3">
              One search replaces hours of manual checking. You get the answer in seconds and book
              with confidence — knowing you have the cheapest available rate.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              What we've found since
            </h2>
            <p className="text-gray-600">
              Across the searches our users run every month, we consistently see price differences
              of 15–35% for the same room on the same night. The gap exists for budget hotels and
              five-star resorts. It's present in Tokyo, Lisbon, New York, Bali, and hundreds of
              other destinations. It affects Booking.com, Agoda, Expedia, and most major platforms.
            </p>
            <p className="text-gray-600 mt-3">
              If you've never checked whether you're being shown the cheapest price, there's a
              reasonable chance you haven't been.
            </p>
            <p className="text-gray-600 mt-4 font-medium text-gray-700">
              — The CahooTravel team
            </p>
          </section>

          {/* CTA */}
          <div className="bg-brand-purple rounded-2xl p-7 text-center">
            <h3 className="text-lg font-bold text-white mb-2">
              See the real price of your hotel
            </h3>
            <p className="text-purple-200 text-sm mb-5 leading-relaxed">
              Paste any hotel link and we'll check the price across 100+ countries — free, in seconds.
            </p>
            <Link
              href="/"
              className="inline-flex items-center gap-2 bg-white text-brand-purple font-semibold text-sm px-6 py-3 rounded-xl hover:bg-purple-50 transition-colors"
            >
              Find the cheapest price for your hotel
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </Link>
          </div>

        </div>
      </article>

      <BreadcrumbJsonLd
        items={[
          { name: 'About', path: '/about' },
          { name: "Founder's Story", path: '/founders-story' },
        ]}
      />
    </InternalPageTemplate>
  )
}