import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import Link from "next/link"
import { ArrowRight } from "lucide-react"

export default function BlogPage() {
  const posts = [
    {
      slug: "home-repairs-when-to-call-in-the-pros",
      title: "Home Repairs: When to Call in the Pros",
      excerpt:
        "With all the resources available, people are choosing more often to tackle DIY projects around the house by themselves. However, there are some projects that are best left to the professionals.",
      date: "January 23, 2020",
      category: "Maintenance",
      image: "/blog/home-repairs-plumber.jpg",
    },
    // Placeholder posts to fill the grid for visual demonstration
    {
      slug: "icf-construction-benefits",
      title: "The Structural Advantages of ICF Construction",
      excerpt:
        "Insulated Concrete Forms (ICF) provide superior energy efficiency and structural integrity compared to traditional framing methods.",
      date: "February 15, 2020",
      category: "Construction",
      image: "/icf-above-grade-walls-construction.jpg",
    },
    {
      slug: "radiant-heating-guide",
      title: "Complete Guide to Radiant Floor Heating",
      excerpt:
        "Discover why radiant floor heating is the most efficient and comfortable way to heat your high-performance home.",
      date: "March 10, 2020",
      category: "Systems",
      image: "/radiant-floor-heating-installation.jpg",
    },
  ]

  return (
    <div className="min-h-screen flex flex-col bg-[#f8f9fa]">
      <SiteHeader />

      <main className="flex-1">
        {/* Refined header section with better typography and spacing */}
        <section className="pt-32 pb-16 md:pt-48 md:pb-24 px-4 md:px-8 border-b border-gray-200 bg-white">
          <div className="max-w-[1400px] mx-auto">
            <div className="flex flex-col gap-6">
              <div className="w-16 h-1.5 bg-[#8cc63f]" />
              <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-[#0f172a]">Insights</h1>
              <p className="text-xl text-gray-600 max-w-2xl leading-relaxed">
                Expert perspectives on structural engineering, modern construction, and high-performance building
                systems.
              </p>
            </div>
          </div>
        </section>

        {/* Blog Grid */}
        <section className="py-24 px-4 md:px-8">
          <div className="max-w-[1400px] mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-24">
              {posts.map((post, index) => (
                <Link
                  key={post.slug}
                  href={post.slug === "home-repairs-when-to-call-in-the-pros" ? `/blog/${post.slug}` : "#"}
                  className="group block"
                >
                  <div className="relative aspect-[4/3] overflow-hidden bg-gray-100 mb-8">
                    <div className="absolute inset-0 bg-[#0f172a]/0 group-hover:bg-[#0f172a]/10 transition-colors duration-500 z-10" />
                    <img
                      src={post.image || "/placeholder.svg"}
                      alt={post.title}
                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    <div className="absolute top-6 left-6 bg-white/90 backdrop-blur-sm px-4 py-2 text-xs font-bold tracking-widest uppercase text-[#0f172a]">
                      {post.category}
                    </div>
                  </div>

                  <div className="flex flex-col gap-4">
                    <div className="flex items-center justify-between border-b border-gray-200 pb-4">
                      <span className="text-sm font-medium text-gray-500">{post.date}</span>
                      <span className="text-sm font-medium text-[#0066bf] opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center gap-2">
                        Read Article <ArrowRight className="w-4 h-4" />
                      </span>
                    </div>
                    <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] leading-tight group-hover:text-[#0066bf] transition-colors duration-300">
                      {post.title}
                    </h2>
                    <p className="text-gray-600 leading-relaxed line-clamp-3">{post.excerpt}</p>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      </main>

      <SiteFooter />
    </div>
  )
}