import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import SubpageLayout from "@/components/SubpageLayout";
import { BLOG_POSTS } from "@/utils/blogData";
import InnerBanner from "@/components/InnerBanner";
import AnimatedSection from "@/components/AnimatedSection";

export function generateStaticParams() {
  return BLOG_POSTS.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = BLOG_POSTS.find((p) => p.slug === slug);

  if (!post) {
    notFound();
  }

  // Split content into paragraphs for custom structural rendering
  const paragraphs = post.content.split('\n\n').filter(p => p.trim() !== '');
  const firstParagraph = paragraphs[0] || "";
  const remainingParagraphs = paragraphs.slice(1) || [];

  return (
    <SubpageLayout>
      {/* Inner Banner */}
      <InnerBanner pageName="Blog Details" bgImage="/images/inner-banner/4.webp" />

      <div className="w-full bg-[#fbfaf4] relative z-10">
        <div className="max-w-7xl mx-auto px-6 py-12 lg:py-20 flex flex-col lg:flex-row gap-12">
        
        {/* ── MAIN CONTENT (Left) ── */}
        <div className="flex-1 lg:max-w-[800px] w-full">
          
          {/* Big Featured Image */}
          <AnimatedSection variant="scaleUp" delay={0}>
          <div className="relative w-full h-[500px] rounded-2xl overflow-hidden shadow-lg mb-10 border border-[#e8e0ce]">
            <Image
              src={post.image}
              alt={post.title}
              fill
              priority
              className="object-cover"
            />
          </div>
          </AnimatedSection>

          {/* Post Header / Meta */}
          <AnimatedSection variant="fadeUp" delay={0.15}>
          <div className="mb-8">
            <div className="flex items-center gap-3 font-sans text-[11px] tracking-widest text-[#8a6c3a] uppercase font-bold mb-4">
              <span>{post.date}</span>
              <span className="w-1.5 h-1.5 rounded-full bg-[#bc9e65]" />
              <span>BY {post.author}</span>
            </div>
            <h1 className="font-serif text-3xl sm:text-4xl lg:text-[44px] font-bold text-[#1a3a25] tracking-wide leading-tight mb-6">
              {post.title}
            </h1>
          </div>
          </AnimatedSection>

          {/* Content Body */}
          <AnimatedSection variant="fadeUp" delay={0.25}>
          <div 
            className="prose prose-stone max-w-none prose-p:font-sans prose-p:text-stone-700 prose-p:leading-[1.8] prose-p:text-[15px] prose-p:mb-6"
            dangerouslySetInnerHTML={{ __html: post.content }}
          />
          
          <AnimatedSection variant="fadeUp" delay={0.35}>
            {/* Back to page button */}
            <div className="border-t border-[#e8e0ce] pt-10 mt-10 text-center sm:text-left">
              <Link
                href="/blog"
                className="inline-flex items-center justify-center gap-3 bg-[#1a3a25] hover:bg-[#8a6c3a] text-white px-8 py-4 rounded-full font-sans text-xs font-bold tracking-widest uppercase transition-all duration-300 shadow-md hover:shadow-lg"
              >
                <span className="text-[14px]">←</span> Back to Blogs
              </Link>
            </div>
          </AnimatedSection>
          </AnimatedSection>
        </div>

        {/* ── RIGHT SIDEBAR ── */}
        <AnimatedSection variant="fadeRight" delay={0.3} className="w-full lg:w-[350px] shrink-0">
        <div className="w-full lg:w-[350px] shrink-0">
          <div className="sticky top-24 bg-[#f5efe0] rounded-2xl p-6 lg:p-8 border border-[#e8e0ce] shadow-sm">
            <h4 className="font-serif text-2xl text-[#1a3a25] font-bold mb-6 flex items-center gap-3">
              <span className="w-8 h-[2px] bg-[#bc9e65]" />
              Related Posts
            </h4>
            
            <div className="flex flex-col gap-6">
              {BLOG_POSTS.filter(p => p.id !== post.id).slice(0, 3).map(related => (
                <Link key={related.id} href={`/blog/${related.slug}`} className="group flex flex-col gap-3">
                  <div className="relative w-full aspect-video rounded-xl overflow-hidden shadow-sm">
                    <Image
                      src={related.image}
                      alt={related.title}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-700"
                    />
                  </div>
                  <div>
                    <div className="text-[10px] text-[#8a6c3a] font-bold tracking-widest uppercase mb-1 font-sans">
                      {related.date}
                    </div>
                    <h5 className="font-serif text-[15px] leading-snug font-bold text-[#1a3a25] group-hover:text-[#bc9e65] transition-colors">
                      {related.title}
                    </h5>
                  </div>
                </Link>
              ))}
            </div>

            {/* Contact CTA Banner */}
            <div className="mt-10 relative rounded-xl overflow-hidden shadow-lg border border-[#bc9e65]/30 bg-[#272f27] min-h-[240px] flex flex-col items-center justify-center text-center p-8">
              {/* Content */}
              <div className="relative z-10 flex flex-col items-center gap-4">
                {/* Gold icon */}
                <div className="w-12 h-12 rounded-full border border-[#bc9e65]/60 flex items-center justify-center text-[#bc9e65] mb-1">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                  </svg>
                </div>

                <h5 className="font-serif text-xl text-white tracking-wide leading-tight">
                  Reserve a Table
                </h5>
                <p className="font-sans text-stone-300 text-xs leading-relaxed max-w-[200px]">
                  Ready to experience authentic South Indian flavors? Visit us or get in touch.
                </p>

                <Link
                  href="/reservation"
                  className="mt-2 inline-flex items-center gap-2 bg-[#bc9e65] hover:bg-white text-[#061810] font-bold text-[10px] tracking-widest uppercase px-6 py-3 rounded-md transition-all duration-300 shadow-md hover:shadow-lg"
                >
                  Reserve your table <span className="text-sm leading-none">→</span>
                </Link>
              </div>
            </div>

          </div>
        </div>
        </AnimatedSection>
        </div>
      </div>
    </SubpageLayout>
  );
}
