<script setup>
import { motion } from 'motion-v'
import { MapPin, MessageSquareQuote, Sparkles } from 'lucide-vue-next'
import { renderPublicRichText } from '~/utils/public-rich-text'

const props = defineProps({
  page: {
    type: Object,
    required: true,
  },
})

function toArray(value) {
  return Array.isArray(value) ? value : []
}

function renderRichText(value) {
  return renderPublicRichText(String(value || '').trim())
}

const structuredContent = computed(() => props.page?.structuredContent || {})
const pageTitle = computed(() => props.page?.title || '')
const pageSubtitle = computed(() => props.page?.subtitle || '')
const pageExcerpt = computed(() => props.page?.excerpt || '')
const heroImage = computed(() => structuredContent.value?.media?.heroImage || props.page?.heroImage || props.page?.featuredImage || '')
const heroImageAlt = computed(() => structuredContent.value?.media?.heroImageAlt || props.page?.heroImageAlt || pageTitle.value)
const heroEyebrow = computed(() => structuredContent.value?.ui?.heroEyebrow || '')
const introHtml = computed(() => renderRichText(structuredContent.value?.introHtml || structuredContent.value?.intro || pageExcerpt.value))
const bodyHtml = computed(() => renderRichText(structuredContent.value?.bodyHtml || props.page?.body || ''))
const highlights = computed(() => toArray(structuredContent.value?.highlights))
const faqItems = computed(() => toArray(structuredContent.value?.faq))
const reviews = computed(() => toArray(structuredContent.value?.reviews))
const priceStats = computed(() => toArray(structuredContent.value?.priceStats))
const popularPlaces = computed(() => toArray(structuredContent.value?.popularPlaces))
const mapHtml = computed(() => String(structuredContent.value?.mapHtml || '').trim())
const promoHtml = computed(() => renderRichText(structuredContent.value?.promoHtml || ''))
const ctaLabel = computed(() => structuredContent.value?.cta?.label || props.page?.cta?.label || '')
const ctaUrl = computed(() => structuredContent.value?.cta?.url || props.page?.cta?.url || '')

const ui = computed(() => ({
  introHeading: structuredContent.value?.ui?.introHeading || '',
  highlightsHeading: structuredContent.value?.ui?.highlightsHeading || '',
  faqHeading: structuredContent.value?.ui?.faqHeading || '',
  reviewsHeading: structuredContent.value?.ui?.reviewsHeading || '',
  pricingHeading: structuredContent.value?.ui?.pricingHeading || '',
  placesHeading: structuredContent.value?.ui?.placesHeading || '',
  mapHeading: structuredContent.value?.ui?.mapHeading || '',
  promoHeading: structuredContent.value?.ui?.promoHeading || '',
}))

function statBarHeight(percent) {
  const numeric = Number(percent || 0)
  if (!Number.isFinite(numeric)) {
    return '18%'
  }

  const bounded = Math.max(10, Math.min(100, numeric))
  return `${bounded}%`
}
</script>

<template>
  <div class="min-h-screen bg-[#f7f2ea] text-slate-900">
    <section class="relative overflow-hidden bg-[#201811] text-white">
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.16),_transparent_42%),linear-gradient(135deg,_rgba(210,127,50,0.30),_transparent_48%)]" />
      <div class="relative mx-auto grid max-w-7xl gap-10 px-4 pb-20 pt-20 sm:px-6 lg:grid-cols-[minmax(0,1.1fr)_28rem] lg:px-8">
        <div class="max-w-3xl">
          <p
            v-if="heroEyebrow"
            class="mb-5 text-xs font-semibold uppercase tracking-[0.35em] text-[#f3c58b]"
          >
            {{ heroEyebrow }}
          </p>
          <motion.h1
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            class="max-w-4xl text-4xl font-black uppercase leading-[0.95] tracking-tight sm:text-5xl lg:text-6xl"
          >
            {{ pageTitle }}
          </motion.h1>
          <motion.p
            v-if="pageSubtitle"
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.08 }"
            class="mt-5 max-w-2xl text-lg text-white/80"
          >
            {{ pageSubtitle }}
          </motion.p>
          <motion.div
            v-if="introHtml"
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.14 }"
            class="prose prose-invert mt-8 max-w-2xl prose-p:text-white/82 prose-strong:text-white"
            v-html="introHtml"
          />
          <motion.div
            v-if="ctaLabel && ctaUrl"
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.18 }"
            class="mt-8"
          >
            <NuxtLink
              :to="ctaUrl"
              class="inline-flex items-center rounded-full bg-[#ef8d38] px-6 py-3 text-sm font-bold uppercase tracking-[0.22em] text-[#1d140d] transition hover:bg-white"
            >
              {{ ctaLabel }}
            </NuxtLink>
          </motion.div>
        </div>

        <div
          v-if="heroImage"
          class="overflow-hidden rounded-[2rem] border border-white/10 bg-white/5 shadow-[0_40px_120px_rgba(0,0,0,0.35)]"
        >
          <img
            :src="heroImage"
            :alt="heroImageAlt"
            class="h-full min-h-[280px] w-full object-cover"
            loading="eager"
          >
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
      <div class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_22rem]">
        <div class="space-y-8">
          <div
            v-if="bodyHtml"
            class="overflow-hidden rounded-[2rem] bg-white p-6 shadow-[0_20px_60px_rgba(15,23,42,0.08)] sm:p-8"
          >
            <h2
              v-if="ui.introHeading"
              class="mb-6 text-2xl font-black uppercase tracking-tight text-slate-900"
            >
              {{ ui.introHeading }}
            </h2>
            <div
              class="prose max-w-none prose-headings:font-black prose-headings:uppercase prose-a:text-[#bf5f1a] prose-strong:text-slate-900"
              v-html="bodyHtml"
            />
          </div>

          <div
            v-if="highlights.length"
            class="rounded-[2rem] bg-[#1f2937] p-6 text-white shadow-[0_20px_60px_rgba(15,23,42,0.16)] sm:p-8"
          >
            <div class="mb-6 flex items-center gap-3">
              <Sparkles class="h-5 w-5 text-[#f3c58b]" />
              <h2 class="text-2xl font-black uppercase tracking-tight">
                {{ ui.highlightsHeading || 'Quick facts' }}
              </h2>
            </div>
            <div class="grid gap-4 md:grid-cols-2">
              <article
                v-for="item in highlights"
                :key="`${item.title}:${item.text}`"
                class="rounded-[1.5rem] border border-white/10 bg-white/5 p-5"
              >
                <h3 class="text-sm font-bold uppercase tracking-[0.18em] text-[#f3c58b]">{{ item.title }}</h3>
                <div
                  class="prose prose-invert mt-3 max-w-none text-sm prose-p:text-white/78"
                  v-html="renderRichText(item.text)"
                />
              </article>
            </div>
          </div>

          <div
            v-if="faqItems.length"
            class="rounded-[2rem] bg-white p-6 shadow-[0_20px_60px_rgba(15,23,42,0.08)] sm:p-8"
          >
            <h2 class="mb-6 text-2xl font-black uppercase tracking-tight text-slate-900">
              {{ ui.faqHeading || 'FAQ' }}
            </h2>
            <div class="space-y-3">
              <details
                v-for="item in faqItems"
                :key="item.title"
                class="group rounded-[1.25rem] border border-slate-200 bg-[#fbf7f0] p-5 open:border-[#ef8d38]"
              >
                <summary class="cursor-pointer list-none font-bold text-slate-900">
                  {{ item.title }}
                </summary>
                <div
                  class="prose mt-4 max-w-none text-sm prose-a:text-[#bf5f1a]"
                  v-html="renderRichText(item.answer)"
                />
              </details>
            </div>
          </div>

          <div
            v-if="reviews.length"
            class="rounded-[2rem] bg-[#fff8ec] p-6 shadow-[0_20px_60px_rgba(15,23,42,0.08)] sm:p-8"
          >
            <div class="mb-6 flex items-center gap-3">
              <MessageSquareQuote class="h-5 w-5 text-[#bf5f1a]" />
              <h2 class="text-2xl font-black uppercase tracking-tight text-slate-900">
                {{ ui.reviewsHeading || 'Reviews' }}
              </h2>
            </div>
            <div class="grid gap-4 md:grid-cols-2">
              <article
                v-for="item in reviews"
                :key="`${item.name}:${item.date}`"
                class="rounded-[1.5rem] bg-white p-5 shadow-[0_12px_30px_rgba(15,23,42,0.05)]"
              >
                <div class="flex items-baseline justify-between gap-4">
                  <h3 class="text-base font-bold text-slate-900">{{ item.name }}</h3>
                  <span class="text-xs font-medium uppercase tracking-[0.15em] text-slate-400">{{ item.date }}</span>
                </div>
                <div
                  class="prose mt-3 max-w-none text-sm prose-p:text-slate-600"
                  v-html="renderRichText(item.text)"
                />
                <a
                  v-if="item.url"
                  :href="item.url"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="mt-4 inline-flex text-xs font-bold uppercase tracking-[0.18em] text-[#bf5f1a]"
                >
                  Source review
                </a>
              </article>
            </div>
          </div>
        </div>

        <div class="space-y-8">
          <div
            v-if="priceStats.length"
            class="rounded-[2rem] bg-white p-6 shadow-[0_20px_60px_rgba(15,23,42,0.08)]"
          >
            <h2 class="mb-6 text-xl font-black uppercase tracking-tight text-slate-900">
              {{ ui.pricingHeading || 'Price dynamics' }}
            </h2>
            <div class="grid grid-cols-6 gap-3">
              <div
                v-for="item in priceStats"
                :key="item.title"
                class="flex flex-col items-center justify-end gap-3"
              >
                <div class="flex h-40 w-full items-end rounded-t-2xl bg-[#f4ece0] p-1">
                  <div
                    class="w-full rounded-t-xl bg-gradient-to-t from-[#bf5f1a] to-[#efb06d]"
                    :style="{ height: statBarHeight(item.percent) }"
                  />
                </div>
                <div class="text-center">
                  <div class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">{{ item.title }}</div>
                  <div class="mt-1 text-sm font-black text-slate-900">${{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="popularPlaces.length"
            class="rounded-[2rem] bg-[#1d140d] p-6 text-white shadow-[0_20px_60px_rgba(15,23,42,0.16)]"
          >
            <div class="mb-6 flex items-center gap-3">
              <MapPin class="h-5 w-5 text-[#efb06d]" />
              <h2 class="text-xl font-black uppercase tracking-tight">
                {{ ui.placesHeading || 'Popular places' }}
              </h2>
            </div>
            <div class="space-y-3">
              <article
                v-for="item in popularPlaces"
                :key="`${item.title}:${item.url}`"
                class="rounded-[1.25rem] border border-white/10 bg-white/5 p-4"
              >
                <h3 class="font-bold text-white">{{ item.title }}</h3>
                <p class="mt-2 text-sm leading-6 text-white/72">{{ item.text }}</p>
              </article>
            </div>
          </div>

          <div
            v-if="mapHtml"
            class="overflow-hidden rounded-[2rem] bg-white p-3 shadow-[0_20px_60px_rgba(15,23,42,0.08)]"
          >
            <h2 class="px-3 pb-3 pt-2 text-xl font-black uppercase tracking-tight text-slate-900">
              {{ ui.mapHeading || 'Map' }}
            </h2>
            <div
              class="[&_iframe]:min-h-[340px] [&_iframe]:w-full [&_iframe]:rounded-[1.5rem]"
              v-html="mapHtml"
            />
          </div>

          <div
            v-if="promoHtml"
            class="rounded-[2rem] bg-[#ef8d38] p-6 text-[#1d140d] shadow-[0_20px_60px_rgba(239,141,56,0.28)]"
          >
            <h2 class="mb-4 text-xl font-black uppercase tracking-tight">
              {{ ui.promoHeading || 'Offer' }}
            </h2>
            <div
              class="prose max-w-none prose-headings:text-[#1d140d] prose-p:text-[#1d140d] prose-strong:text-[#1d140d] prose-img:rounded-[1.25rem]"
              v-html="promoHtml"
            />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
