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/airbnb-vs-booking-different-prices')
  return {
    title: t('guideAirbnbVsBooking'),
    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.',
    openGraph: {
      title: 'Airbnb vs Booking.com: Why Prices Differ for the Same Property',
      description:
        'Commission structures, service fees, and geo-pricing all contribute to different prices for the same place. Here\'s the full breakdown.',
      type: 'article',
    },
    alternates: { canonical, languages },
  }
}

const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline:
    '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. Commission structures, service fees, and geo-pricing all play a role.',
  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/guides/airbnb-vs-booking-different-prices',
}

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

      <article className="max-w-3xl">
        <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">
              Platform Comparison
            </span>
            <span className="text-xs text-gray-400">6 min read</span>
          </div>
          <h1 className="text-4xl font-bold text-gray-900 mb-4 leading-tight">
            Airbnb vs Booking.com: Why the Same Property Shows Different Prices on Each Platform
          </h1>
          <p className="text-gray-500 text-lg leading-relaxed">
            Search for a popular apartment in Lisbon and you might find the same property listed on
            both Airbnb and Booking.com. One shows €95/night. The other shows €119/night. Same
            apartment. Same dates. Why is there a difference — and which one is actually cheaper
            after all fees?
          </p>
        </div>

        {/* Featured image */}
        <div className="mb-10 rounded-2xl overflow-hidden aspect-[16/7]">
          <img
            src="/guides/airbnb-vs-booking.jpg"
            alt="Modern apartment interior representing short-term rental platforms"
            className="w-full h-full object-cover"
          />
        </div>

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

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              Why the same property appears on both platforms
            </h2>
            <p className="text-gray-600">
              Many vacation rental properties and serviced apartments are managed by professional
              property managers or hosts who use &quot;channel manager&quot; software to list the same
              property on multiple booking platforms simultaneously. Tools like Lodgify, Hostaway,
              and Guesty synchronise availability calendars and allow hosts to set platform-specific
              pricing.
            </p>
            <p className="text-gray-600 mt-3">
              This means it is common to find the exact same apartment — same photos, same
              description, same location — on Airbnb, Booking.com, Vrbo, and other platforms at
              the same time.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              Reason 1: Different commission structures
            </h2>
            <p className="text-gray-600">
              The most significant driver of price differences is how each platform charges hosts
              and guests:
            </p>

            <h3 className="text-base font-semibold text-gray-900 mb-2 mt-4">Airbnb</h3>
            <p className="text-gray-600">
              Airbnb uses a split-fee model for most listings. Guests pay a service fee (typically
              14–16% of the booking subtotal). Hosts pay a separate host service fee (around 3%).
              Some hosts opt for a host-only fee model (around 15% from the host) with no guest
              service fee — this is common for professional property managers and produces a lower
              displayed price.
            </p>

            <h3 className="text-base font-semibold text-gray-900 mb-2 mt-4">Booking.com</h3>
            <p className="text-gray-600">
              Booking.com charges the host (property) a commission ranging from 10–25%, typically
              around 15–18% for apartments and vacation rentals. Guests see a price that the host
              has set to account for this commission — the commission is invisible to the guest but
              is baked into the nightly rate.
            </p>
            <p className="text-gray-600 mt-3">
              In practice: a host listing the same apartment on both platforms may set the
              Booking.com base price slightly higher (to cover their 15% commission) while the
              Airbnb price is lower because the platform charges guests directly via the service
              fee. But add that 15% Airbnb guest fee and the total can flip — Airbnb ends up more
              expensive in aggregate.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              Reason 2: Service fee transparency (or the lack of it)
            </h2>
            <p className="text-gray-600">
              One of the most frustrating aspects of comparing Airbnb and Booking.com prices is that
              each platform displays fees differently:
            </p>
            <ul className="list-disc pl-5 space-y-2 text-gray-600 mt-3">
              <li>
                <strong>Airbnb</strong> shows a per-night base price in search results, then adds
                the guest service fee plus cleaning fees on the checkout page. It is common to see
                a &quot;€85/night&quot; listing become €110+/night after fees when you reach checkout.
              </li>
              <li>
                <strong>Booking.com</strong> typically shows the total price including taxes in
                search results (if you enable the &quot;include taxes and fees&quot; toggle). The base
                price often looks higher, but the total is more comparable to Airbnb&apos;s checkout total.
              </li>
            </ul>
            <p className="text-gray-600 mt-3">
              The practical lesson: never compare the nightly rate headline — always compare the
              final checkout total for the same number of nights.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              Reason 3: Geo-pricing on top of platform differences
            </h2>
            <p className="text-gray-600">
              Platform commission differences explain part of the price gap. Geo-pricing adds another
              layer. Both Airbnb and Booking.com apply geographic price differentiation — and they
              do not apply it in the same way or at the same magnitude.
            </p>
            <p className="text-gray-600 mt-3">
              This creates a compound effect: the same apartment could be cheapest on Airbnb when
              browsed from one country, but cheapest on Booking.com when browsed from another.
              Finding the globally cheapest option requires checking both platforms across multiple
              country contexts.
            </p>

            <div className="bg-gray-50 rounded-xl border border-gray-100 overflow-hidden mt-4">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-gray-100 text-left">
                    <th className="px-4 py-3 font-semibold text-gray-700">Search context</th>
                    <th className="px-4 py-3 font-semibold text-gray-700">Airbnb (incl. fees)</th>
                    <th className="px-4 py-3 font-semibold text-gray-700">Booking.com (incl. fees)</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  <tr>
                    <td className="px-4 py-3 text-gray-600">From United States</td>
                    <td className="px-4 py-3 text-gray-700">€112</td>
                    <td className="px-4 py-3 font-medium text-green-600">€98</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-3 text-gray-600">From Germany</td>
                    <td className="px-4 py-3 text-gray-700">€107</td>
                    <td className="px-4 py-3 font-medium text-green-600">€95</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-3 text-gray-600">From Poland</td>
                    <td className="px-4 py-3 font-medium text-green-600">€89</td>
                    <td className="px-4 py-3 text-gray-700">€92</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-3 text-gray-600">From India</td>
                    <td className="px-4 py-3 font-medium text-green-600">€82</td>
                    <td className="px-4 py-3 text-gray-700">€88</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p className="text-gray-500 text-xs mt-2">
              Illustrative example for a Lisbon apartment. Actual prices vary by property and dates.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              When to choose Airbnb vs Booking.com
            </h2>

            <h3 className="text-base font-semibold text-gray-900 mb-2">Choose Airbnb when:</h3>
            <ul className="list-disc pl-5 space-y-1 text-gray-600">
              <li>You are booking a longer stay (7+ nights) — Airbnb&apos;s weekly/monthly discount often makes it significantly cheaper for extended stays</li>
              <li>You want detailed local knowledge from the host (Airbnb hosts tend to be more communicative)</li>
              <li>You are booking a unique, quirky, or owner-occupied property (Airbnb&apos;s selection is stronger here)</li>
              <li>Flexible cancellation matters — Airbnb&apos;s cancellation policy options are more transparent</li>
            </ul>

            <h3 className="text-base font-semibold text-gray-900 mb-2 mt-4">Choose Booking.com when:</h3>
            <ul className="list-disc pl-5 space-y-1 text-gray-600">
              <li>You want a wider selection of traditional hotels in the same search alongside apartments</li>
              <li>You need free cancellation — Booking.com&apos;s refundable rate options are more standardised</li>
              <li>You are travelling to Asia — Booking.com&apos;s Asian hotel inventory and geo-pricing for Asian browsers is often better</li>
              <li>You are booking last-minute — Booking.com tends to have better last-minute availability</li>
            </ul>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-gray-900 mb-3">
              How to cross-check both platforms in one search
            </h2>
            <p className="text-gray-600">
              CahooTravel supports both Airbnb and Booking.com URLs. To find the cheapest option
              for any property listed on both:
            </p>
            <ol className="list-decimal pl-5 space-y-2 text-gray-600 mt-3">
              <li>Find the property on Booking.com and copy its URL.</li>
              <li>Search on CahooTravel to see the price across 100+ countries on Booking.com.</li>
              <li>Find the same property on Airbnb and repeat — copy the Airbnb URL and search.</li>
              <li>Compare: which platform, in which country context, shows the lowest total price?</li>
              <li>Book on that platform. No extra steps needed.</li>
            </ol>
            <p className="text-gray-600 mt-3">
              This two-pass comparison takes less than two minutes and consistently reveals whether
              Airbnb or Booking.com is cheaper for a specific property — and from which country
              context the cheapest price is available.
            </p>
          </section>

          <div className="rounded-2xl bg-brand-purple text-white p-8 flex flex-col md:flex-row items-center justify-between gap-6 mt-4">
            <div>
              <h3 className="text-lg font-bold mb-1">Compare Airbnb and Booking.com prices across countries</h3>
              <p className="text-purple-200 text-sm">
                Paste any Airbnb or Booking.com URL and see the full price breakdown. Free to start.
              </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 whitespace-nowrap"
            >
              Start comparing →
            </Link>
          </div>
        </div>
      </article>

      <BreadcrumbJsonLd
        items={[
          { name: 'Guides', path: '/guides' },
          { name: 'Airbnb vs Booking.com Prices' },
        ]}
      />
    </InternalPageTemplate>
  )
}