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" />

      <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">
            
            {/* First Paragraph */}
            <p className="text-lg text-stone-800 leading-relaxed font-medium">
              {firstParagraph}
            </p>

            {/* Blockquote using theme style */}
            <blockquote className="my-10 relative bg-[#f5efe0] border-l-4 border-[#1a3a25] px-8 py-6 rounded-r-xl shadow-sm">
              <svg className="absolute top-4 left-4 w-8 h-8 text-[#bc9e65]/20 transform -translate-x-2 -translate-y-2" fill="currentColor" viewBox="0 0 32 32">
                <path d="M10 8c-3.3 0-6 2.7-6 6v10h10V14H8c0-1.1.9-2 2-2h4V8h-4zm14 0c-3.3 0-6 2.7-6 6v10h10V14h-6c0-1.1.9-2 2-2h4V8h-4z"/>
              </svg>
              <p className="font-serif text-xl sm:text-2xl italic text-[#1a3a25] leading-snug relative z-10 m-0">
                "Tradition is not the worship of ashes, but the preservation of fire. Our recipes are a testament to this philosophy."
              </p>
            </blockquote>

            {/* Remaining Paragraphs */}
            {remainingParagraphs.map((p, idx) => (
              <p key={idx}>{p}</p>
            ))}

            {/* List with related icons */}
            <h3 className="font-serif text-2xl text-[#1a3a25] mt-12 mb-6 font-bold">Key Elements of Our Heritage</h3>
            <ul className="space-y-4 mb-10 pl-0">
              <li className="flex items-start gap-4">
                <div className="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-[#f5efe0] flex items-center justify-center text-[#8a6c3a] shadow-sm border border-[#e8e0ce]">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                </div>
                <div>
                  <strong className="block text-[#1a3a25] font-sans font-bold">Authentic Spices</strong>
                  <span className="text-stone-600 font-sans text-sm">Sourced directly from the lush hills of Kerala, ensuring unmatched aroma and flavor.</span>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-[#f5efe0] flex items-center justify-center text-[#8a6c3a] shadow-sm border border-[#e8e0ce]">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                  <strong className="block text-[#1a3a25] font-sans font-bold">Time-Honored Techniques</strong>
                  <span className="text-stone-600 font-sans text-sm">Slow-cooking processes that have been passed down through generations.</span>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-[#f5efe0] flex items-center justify-center text-[#8a6c3a] shadow-sm border border-[#e8e0ce]">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                </div>
                <div>
                  <strong className="block text-[#1a3a25] font-sans font-bold">Cooked with Love</strong>
                  <span className="text-stone-600 font-sans text-sm">Every dish is prepared with the same care and devotion as a home-cooked meal.</span>
                </div>
              </li>
            </ul>

            {/* 2 Images per row */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 my-12">
              <div className="relative w-full aspect-[4/3] rounded-xl overflow-hidden shadow-md">
                <Image src="/images/chettinad_interior.png" alt="Kitchen Prep" fill className="object-cover" />
              </div>
              <div className="relative w-full aspect-[4/3] rounded-xl overflow-hidden shadow-md">
                <Image src="/images/chef_cooking.png" alt="Chef Cooking" fill className="object-cover object-top" />
              </div>
            </div>

            {/* Title, Paragraph and FAQ */}
            <h3 className="font-serif text-3xl text-[#1a3a25] mt-12 mb-4 font-bold">Common Inquiries</h3>
            <p className="mb-8">
              We often receive questions about our traditional cooking methods and ingredient sourcing. Here are some of the most frequently asked questions from our guests who want to dive deeper into our culinary heritage.
            </p>

            <div className="space-y-4 mb-16">
              {[
                { q: "Do you use artificial colors in your curries?", a: "Never. The vibrant colors of our dishes come purely from natural ingredients like turmeric, Kashmiri chili, and fresh herbs." },
                { q: "Is your dosa batter gluten-free?", a: "Yes, our traditional dosa batter is made entirely from rice and lentils, making it naturally gluten-free." },
                { q: "How spicy is the authentic Chettinad preparation?", a: "It carries a robust, earthy heat from black pepper and dry red chilies. However, we can adjust the spice level to accommodate your palate upon request." }
              ].map((faq, idx) => (
                <div key={idx} className="bg-white border border-[#e8e0ce] p-6 rounded-xl shadow-sm">
                  <h4 className="font-sans font-bold text-[#1a3a25] text-[15px] mb-2 flex items-start gap-2">
                    <span className="text-[#8a6c3a]">Q.</span> {faq.q}
                  </h4>
                  <p className="font-sans text-stone-600 text-sm m-0 pl-6">
                    {faq.a}
                  </p>
                </div>
              ))}
            </div>

            {/* 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>
          </div>
          </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>
  );
}
