import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { notFound } from "next/navigation"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import styles from "./blog-post.module.css"

// This would typically come from a CMS or database
const posts = {
  "home-repairs-when-to-call-in-the-pros": {
    title: "Home Repairs: When to Call in the Pros",
    date: "January 23, 2020",
    author: "webmaster",
    category: "Maintenance",
    image: "/blog/home-repairs-plumber.jpg",
    content: `
      <p class="lead">With all the resources available, people are choosing more often to tackle DIY projects around the house by themselves. Certainly, you can save money and hassle by doing it yourself, and you will walk away with the pride of a job well done. However, there are some projects in your home that are best left to the professionals.</p>

      <p>Contributed by: <a href="https://diyguys.net" target="_blank" rel="noopener noreferrer">diyguys.net</a></p>

      <h2>What's the Difference?</h2>

      <p>When deciding whether to take on the project yourself or hire a professional, first assess how serious the problem is. Minor home repairs, such as touching up paint on your walls or replacing cabinet hardware, are common projects to tackle yourself with success. They have a low risk of injury, accessible tools and equipment, and are going to be acceptable if a less-than-perfect result is achieved.</p> 
      
      <p>Major home repairs, like plumbing leaks and foundation issues, are risky to take on without the help of a professional. These repairs involve a safety risk, structural importance, or require an expert. If you risk attempting some of these more complicated repairs, you risk not only injuring yourself but also damaging your home further.</p>

      <h2>Minor vs. Major Plumbing Repairs</h2>

      <p>Plumbing issues can often happen at the worst times, and sometimes the problems are well within your abilities to repair. Installing or repairing sink faucets, cleaning clogged drains, and changing out the shower heads are great examples of inexpensive DIY projects that you can successfully undertake. However, if you are experiencing issues such as low water pressure, no hot water, or sewage back up, you need to call in a professional. Plumbers are highly skilled and trained, so you will pay more for their expertise but diagnosing and repairing these types of problems is one best left to an expert plumber.</p>

      <h2>Electricity is Dangerous</h2>

      <p>Just like plumbers, professional electricians are highly trained and experts in their field. Electrical repair can be dangerous and potentially life-threatening. While you will save money tackling repairs by yourself, you need to consider your knowledge level and capabilities. You may possess basic knowledge in electrical wiring and feel confident installing new light fixtures or ceiling fan. However, more complicated problems can arise, such as dead outlets, flickering light bulbs, and circuit breakers frequently tripping. If you are not skilled in electrical work, you may find that hiring a good electrician is the safest and most efficient route.</p>

      <h2>Getting Rid of Junk</h2>

      <p>If you're planning to toss old appliances, worn mattresses, or the ratty carpet you ripped out of several rooms, your first thought might be to remove it all yourself. Think again. By calling in professional junk haulers, you can save yourself the hassle and money — not to mention grievous bodily harm. Additionally, reputable haulers will ensure that everything is disposed of in an environmentally friendly manner. That way, if you have items that need recycling, you can rest assured that these objects will end up precisely where they should go. Junk and waste removal services in Colorado Springs typically cost between $397 and $941.</p>

      <h2>When Structure is Involved</h2>

      <p>Another area of home repair that is best left to the professionals is anything involving the structure of your home. Foundation issues can occur that affect the structure of your home, like uneven floors, poor drainage, or cracked concrete. If any of these problems occur in your home, a professional needs to be called to handle it immediately. Left alone, the foundation will be compromised resulting in a dangerous and expensive domino effect of damage.</p>

      <h2>Let's Talk Numbers</h2>

      <p>In all these circumstances, we have established that there is a time for professional repair. Obviously, the cost is higher to outsource the repair work, but how much exactly are we talking about? Foundation repair can cost around $5,800 on average, but smaller repairs like cracks cost less and issues with drainage could cost more. Hiring an electrician will not be as expensive, as the repairs are less serious than foundation issues. The cost varies based on the repair; the breaker that keeps tripping may cost less than a dead outlet. Calling a plumber to fix a leaky faucet can be as low as $100, though you might be able to do this yourself.</p>

      <p>Calling a plumber, electrician, or structural engineer costs money, but it is money well spent when you are preventing further damage or personal injury in the repair. Do your research to find a reputable repairman and you will be glad that you called the professionals.</p>

      <p><em>Photo Credit: <a href="https://pixabay.com/photos/plumber-handyman-repair-worker-228010/" target="_blank" rel="noopener noreferrer">Pixabay</a></em></p>
    `,
  },
}

export default function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = posts[params.slug as keyof typeof posts]

  if (!post) {
    notFound()
  }

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <SiteHeader />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative pt-32 pb-16 md:pt-48 md:pb-24 px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Link
              href="/blog"
              className="inline-flex items-center gap-2 text-sm font-bold tracking-widest text-[#0066bf] uppercase mb-8 hover:text-[#0f172a] transition-colors"
            >
              <ArrowLeft className="w-4 h-4" /> Back to Journal
            </Link>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-black text-[#0f172a] leading-[1.1] mb-8 tracking-tight">
              {post.title}
            </h1>
            <div className="flex items-center justify-center gap-6 text-sm md:text-base text-gray-500 font-medium">
              <span>{post.date}</span>
              <span className="w-1 h-1 bg-gray-300 rounded-full" />
              <span>{post.category}</span>
              <span className="w-1 h-1 bg-gray-300 rounded-full" />
              <span>By {post.author}</span>
            </div>
          </div>
        </section>

        {/* Featured Image */}
        <section className="px-4 md:px-8 mb-16 md:mb-24">
          <div className="max-w-[1400px] mx-auto">
            <div className="aspect-[21/9] overflow-hidden rounded-sm bg-gray-100">
              <img src={post.image || "/placeholder.svg"} alt={post.title} className="w-full h-full object-cover" />
            </div>
          </div>
        </section>

        {/* Content */}
        <section className="px-4 pb-24">
          <article className="max-w-[720px] mx-auto">
            <div className={styles.blogContent} dangerouslySetInnerHTML={{ __html: post.content }} />

            {/* Share / Footer */}
            <div className="mt-16 pt-8 border-t border-gray-200 flex justify-between items-center">
              <div className="text-sm font-medium text-gray-500">Share this article</div>
              <div className="flex gap-4">
                {/* Social placeholders */}
                <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-[#0f172a] hover:bg-[#0066bf] hover:text-white transition-colors cursor-pointer">
                  <span className="sr-only">Twitter</span>
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                  </svg>
                </div>
                <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-[#0f172a] hover:bg-[#0066bf] hover:text-white transition-colors cursor-pointer">
                  <span className="sr-only">LinkedIn</span>
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path
                      fillRule="evenodd"
                      d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </article>
        </section>
      </main>

      <SiteFooter />
    </div>
  )
}
