import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { blogs } from "@/data/blogs";

interface Props {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  return blogs.map((blog) => ({
    slug: blog.slug,
  }));
}

export async function generateMetadata({ params }: Props) {
  const { slug } = await params;
  const blog = blogs.find((b) => b.slug === slug);
  if (!blog) return { title: "Blog Not Found" };

  return {
    title: `${blog.title} | VG Fence Products`,
    description: blog.excerpt,
  };
}

export default async function BlogDetailPage({ params }: Props) {
  const { slug } = await params;
  const blog = blogs.find((b) => b.slug === slug);

  if (!blog) {
    notFound();
  }

  // Split content into paragraphs to insert images in between
  const paragraphs = blog.content.split('\n\n');

  return (
    <div className="blog-detail-page">
      {/* ── INNER BANNER ── */}
      <section className="detail-banner fade-up">
        <div className="detail-banner-content">
          <h1 className="detail-title">{blog.title}</h1>
          <div className="banner-breadcrumb" style={{ marginTop: '30px', marginBottom: '0' }}>
            <Link href="/">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              Home
            </Link>
            <span className="separator">/</span>
            <Link href="/blog">Blog</Link>
            <span className="separator">/</span>
            <span>{blog.title}</span>
          </div>
        </div>
      </section>

      {/* ── CONTENT SECTION ── */}
      <section className="section detail-content-section">
        <div className="detail-container">
          {/* Big Image */}
          <div className="big-image-wrap">
            <Image 
              src={blog.image} 
              alt={blog.title} 
              width={1200} 
              height={600} 
              className="big-image"
            />
          </div>

          <div className="detail-body">
            {/* First couple of paragraphs */}
            {paragraphs.slice(0, Math.min(2, paragraphs.length)).map((p, i) => (
              <p key={i}>{p}</p>
            ))}

            {/* 2 Small Images (Left and Right) */}
            <div className="split-images">
              <div className="small-image-wrap">
                <Image 
                  src="/assets/about-fencing.png" 
                  alt="Feature 1" 
                  width={500} 
                  height={350} 
                  className="small-image"
                />
              </div>
              <div className="small-image-wrap">
                <Image 
                  src="/assets/manufacturing-hero.png" 
                  alt="Feature 2" 
                  width={500} 
                  height={350} 
                  className="small-image"
                />
              </div>
            </div>

            {/* Remaining paragraphs */}
            {paragraphs.slice(2).map((p, i) => (
              <p key={i}>{p}</p>
            ))}
          </div>

          {/* Bottom Button */}
          <div className="detail-footer" style={{ marginTop: '60px', textAlign: 'center' }}>
            <Link href="/blog" className="back-link" style={{ marginBottom: 0 }}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
               Back to Blog
            </Link>
          </div>
        </div>
      </section>

    </div>
  );
}