import { Link, useParams } from 'react-router-dom'
import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import { BlogCard } from '../components/cards'
import { useContent, getBlog, getSettings } from '../lib/api'

export default function BlogPost() {
  const { slug } = useParams()
  const posts = useContent(getBlog)
  const settings = useContent(getSettings)
  if (!posts) return <div className="min-h-screen" />

  const post = posts.find((p) => p.slug === slug)
  if (!post) {
    return (
      <div className="wrap py-40 text-center">
        <h1 className="sec-title">Post not found</h1>
        <Link to="/blog" className="btn-primary mt-4">
          Back to Blog
        </Link>
      </div>
    )
  }

  const date = new Date(post.published_at).toLocaleDateString('en-US', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  })
  const related = posts.filter((p) => p.slug !== slug).slice(0, 2)

  return (
    <>
      <Seo
        title={`${post.title} — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description={post.excerpt}
        image={post.image}
      />
      <article>
        <header className="relative overflow-hidden bg-ocean-700 pt-36 pb-20 text-white">
          <div
            className="absolute inset-0 bg-cover bg-center opacity-30"
            style={{ backgroundImage: `url(${post.image})` }}
            aria-hidden
          />
          <div className="absolute inset-0 bg-gradient-to-b from-ocean-700/60 to-ocean-700/90" aria-hidden />
          <div className="wrap relative z-10 max-w-3xl">
            <p className="mb-4 text-[0.78rem] font-semibold tracking-[0.3em] uppercase text-turquoise-200">
              {post.category} · {date}
            </p>
            <h1 className="text-[clamp(2rem,4.6vw,3.2rem)] font-semibold">{post.title}</h1>
          </div>
        </header>

        <div className="wrap max-w-3xl py-16">
          <Reveal>
            <img
              src={post.image}
              alt={post.title}
              className="mb-10 aspect-[16/8] w-full rounded-3xl object-cover shadow-soft"
            />
            {/* Post bodies are authored in the CMS rich-text editor. */}
            <div
              className="prose-ocean [&_h2]:sec-title [&_h2]:!text-[1.5rem] [&_h2]:mt-8 [&_p]:mb-4 [&_p]:text-muted [&_em]:italic"
              dangerouslySetInnerHTML={{ __html: post.body }}
            />
            {post.tags.length > 0 && (
              <div className="mt-10 flex flex-wrap gap-2">
                {post.tags.map((t) => (
                  <span key={t} className="rounded-full bg-mist px-4 py-1.5 text-[0.8rem] font-semibold text-ocean-700">
                    #{t}
                  </span>
                ))}
              </div>
            )}
          </Reveal>
        </div>

        {related.length > 0 && (
          <section className="bg-gradient-to-b from-mist to-cream py-16">
            <div className="wrap">
              <h2 className="sec-title mb-8 text-center !text-[1.7rem]">Keep Reading</h2>
              <div className="grid gap-6 md:grid-cols-2">
                {related.map((p) => (
                  <BlogCard key={p.id} p={p} />
                ))}
              </div>
            </div>
          </section>
        )}
      </article>
    </>
  )
}
