import { blogs2 } from "@/utils/data";
import Link from "next/link";

const Blog2Section = () => (
    <section className="blog-two-section section-space">
        <div className="small-container">
            <div className="blog-two-title-area mb-60">
                <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                    <span className="section-sub-title">BLOG & NEWS</span>
                    <h3 className="section-title mt-10">Explore Blogs And News</h3>
                </div>
                <Link className="primary-btn-1 btn-hover" href="/blog">
                    view all &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                    <span className="btn-hover-span"></span>
                </Link>
            </div>
            <div className="row g-4">
                <div className="col-xxl-8 col-xl-8 col-lg-12">
                    {blogs2[0] && (
                        <div key={blogs2[0].id} className="blog-style-two relative overflow-hidden">
                            <Link className="blog-image w-img relative block" href={`/blog/${blogs2[0].slug}`}>
                                <img src={blogs2[0].image} alt="" />
                                <span className="blog-category-tag">{blogs2[0].category}</span>
                            </Link>
                            <div className="blog-content-area">
                                <div className="post-meta">
                                    <span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
                                    <span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blogs2[0].date}</span>
                                </div>
                                <hr />
                                <h5 className="blog-title">
                                    <Link href={`/blog/${blogs2[0].slug}`}>{blogs2[0].title}</Link>
                                </h5>
                                <p className="blog-text">Stay updated with the latest trends and insights from our team of experts in the industry.</p>
                                <Link className="primary-btn-5 btn-hover" href={`/blog/${blogs2[0].slug}`}>
                                    Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                    <span className="btn-hover-span"></span>
                                </Link>
                            </div>
                        </div>
                    )}
                </div>
                <div className="col-xxl-4 col-xl-4 col-lg-12">
                    {blogs2.slice(1, 2).map((blog) => (
                        <div key={blog.id} className="blog-style-two d-block relative overflow-hidden">
                            <div className="blog-content-area">
                                <div className="post-meta">
                                    <span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
                                    <span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
                                </div>
                                <hr />
                                <h5 className="blog-title">
                                    <Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
                                </h5>
                                <p className="blog-text">Discover more about how we drive digital excellence.</p>
                                <Link className="primary-btn-5 btn-hover" href={`/blog/${blog.slug}`}>
                                    Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                    <span className="btn-hover-span"></span>
                                </Link>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>

        <style jsx>{`
            .relative { position: relative; }
            .blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
            .blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
            .blog-category-tag {
                position: absolute;
                bottom: 0px;
                right: 0px;
                background: #3779b9;
                color: #fff;
                padding: 10px 20px;
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                z-index: 2;
                border-radius: 12px 0 0 0;
            }
            .blog-style-two {
                border-left: 1px solid #e2e8f0;
                border-right: 1px solid #e2e8f0;
                border-bottom: 1px solid #e2e8f0;
                border-radius: 20px 20px 15px 15px;
                background: #fff;
                transition: all 0.3s ease;
                height: 100%;
            }
            .blog-style-two:hover {
                border-color: #3779b9;
                box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
            }
            .blog-content-area {
                padding: 30px 25px;
            }
            .blog-title {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                line-height: 1.5;
                height: 3em;
            }
        `}</style>
    </section>
);

export default Blog2Section;
