import Link from "next/link";
import Image from "next/image";
import Contact from "@/component/Contact";
export default function BlogPage() {
    const blogs = [
      {
        img: "/assets/images/blog1.png",
        date: "12 Feb 2026",
        title: "Top Kitchen Remodeling Ideas to Maximize Space & Style",
      },
      {
        img: "/assets/images/blog2.png",
        date: "18 Feb 2026",
        title: "How Smart Home Technology is Transforming Modern Living",
      },
      {
        img: "/assets/images/blog3.png",
        date: "25 Feb 2026",
        title: "Sunroom Design Ideas to Brighten Your Living Space",
      },
      {
        img: "/assets/images/blog4.png",
        date: "03 Mar 2026",
        title: "Outdoor Living Spaces: Create the Perfect Backyard Retreat",
      },
      {
        img: "/assets/images/blog1.png",
        date: "10 Mar 2026",
        title: "Budget-Friendly Renovation Tips Without Compromising Quality",
      },
      {
        img: "/assets/images/blog4.png",
        date: "18 Mar 2026",
        title: "Step-by-Step Guide to Planning Your Dream Home Remodel",
      },
    ];
  
    return (
      <>
        {/* HERO SECTION */}
        <section
          className="hero-remodel-section"
          style={{ backgroundImage: "url(/assets/images/blogback.png)" }}
        >
          <div className="container">
            <div className="row align-items-end">
              <div className="col-lg-6">
                <div className="hero-remodel-content">
                  <span className="hero-remodel-subtitle">Our Blogs</span>
                  <h1 className="hero-remodel-title">
                    Expert Ideas, Trends & Guides for Smarter Living
                  </h1>
                  <p className="hero-remodel-text">
                    Stay updated with the latest trends in home remodeling, smart
                    living, and modern design. Our blog brings you expert insights.
                  </p>
                </div>
              </div>
  
              <div className="col-md-6 endbreadcamp">
                <Link href="/contact" className="btn-primary-custom">
                  Schedule Consultation
                </Link>
              </div>
            </div>
          </div>
        </section>
  
        {/* BLOG GRID */}
        <section className="kitchen-grid-section">
          <div className="container">
            <div className="text-center services-top">
              <div style={{ width: "100%" }}>
                <span className="tag">Insights & Inspiration</span>
                <h2>Expert Ideas for Smarter Home Transformations</h2>
              </div>
            </div>
  
            <div className="row">
              <div className="blog-grid">
                {blogs.map((blog, index) => (
                  <Link href="/blog/blog_details" key={index} className="blog-card">
                    <Image
                      src={blog.img}
                      alt={blog.title}
                      width={400}
                      height={300}
                      className="img-fluid"
                    />
  
                    <div className="overlay">
                      <span>
                        <Image
                          src="/assets/images/icons/calender.svg"
                          alt="calendar"
                          width={16}
                          height={16}
                        />{" "}
                        {blog.date} • HouseCoin Team
                      </span>
                      <h3>{blog.title}</h3>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </section>
        <Contact/>
      </>
    );
  }