'use client';

import { ArrowRight } from "lucide-react";
import SectionTitle from "../Common/SectionTitle";
import SingleBlog from "./SingleBlog";
import blogData from "./blogData";
import { ROUTES } from "@/config/routes";
import Link from "next/link";

const Blog = () => {
    const latestBlogs = blogData.slice(0, 3);

    return (
        <section className="relative bg-gradient-to-b from-white via-red-50/20 to-white dark:bg-bg-color-dark bg-no-repeat overflow-hidden">
            {/* Background decoration */}
            <div className="absolute inset-0 pointer-events-none opacity-30">
                <div className="absolute top-40 left-20 w-80 h-80 bg-red-200 rounded-full blur-3xl" />
                <div className="absolute bottom-20 right-20 w-80 h-80 bg-orange-200 rounded-full blur-3xl" />
            </div>

            <div className="container px-4 py-12 md:py-16 relative z-10">
                <div>
                    <SectionTitle
                        title={
                            <>
                                Chia Sẻ Từ Kinh Nghiệm <span className="text-red-500 font-bold">Thực Chiến</span>
                            </>
                        }
                        paragraph="Cập nhật những xu hướng truyền thông mới nhất, cách xây dựng thương hiệu bằng hình ảnh, video và livestream hiệu quả. Tất cả đều được đúc kết từ thực tiễn triển khai cho hàng trăm thương hiệu khác nhau."
                    />
                </div>

                <div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 md:gap-x-6 lg:gap-x-8 xl:grid-cols-3 mt-8">
                    {latestBlogs.map((blog, index) => (
                        <div
                            key={blog.id}
                            className="w-full"
                        >
                            <SingleBlog blog={blog} />
                        </div>
                    ))}
                </div>

                <div className="flex justify-center mt-12">
                    <Link href={ROUTES.BLOG}>
                        <button className="flex items-center gap-2 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-bold px-8 py-4 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
                            Xem Thêm Bài Viết
                            <ArrowRight className="w-5 h-5" />
                        </button>
                    </Link>
                </div>
            </div>
            <div className="absolute right-0 top-5 z-2">
                <svg
                    width="238"
                    height="531"
                    viewBox="0 0 238 531"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <rect
                        opacity="0.3"
                        x="422.819"
                        y="-70.8145"
                        width="196"
                        height="541.607"
                        rx="2"
                        transform="rotate(51.2997 422.819 -70.8145)"
                        fill="url(#paint0_linear_83:2)"
                    />
                    <rect
                        opacity="0.3"
                        x="426.568"
                        y="144.886"
                        width="59.7544"
                        height="541.607"
                        rx="2"
                        transform="rotate(51.2997 426.568 144.886)"
                        fill="url(#paint1_linear_83:2)"
                    />
                    <defs>
                        <linearGradient
                            id="paint0_linear_83:2"
                            x1="517.152"
                            y1="-251.373"
                            x2="517.152"
                            y2="459.865"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF4B4B" />
                            <stop offset="1" stopColor="#FF4B4B" stopOpacity="0" />
                        </linearGradient>
                        <linearGradient
                            id="paint1_linear_83:2"
                            x1="455.327"
                            y1="-35.673"
                            x2="455.327"
                            y2="675.565"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF4B4B" />
                            <stop offset="1" stopColor="#FF4B4B" stopOpacity="0" />
                        </linearGradient>
                    </defs>
                </svg>
            </div>
            <div className="absolute bottom-5 left-0 z-2">
                <svg
                    width="279"
                    height="106"
                    viewBox="0 0 279 106"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <g opacity="0.5">
                        <path
                            d="M-57 12L50.0728 74.8548C55.5501 79.0219 70.8513 85.7589 88.2373 79.3692C109.97 71.3821 116.861 60.9642 156.615 63.7423C178.778 65.291 195.31 69.2985 205.911 62.3533C216.513 55.408 224.994 47.7682 243.016 49.1572C255.835 50.1453 265.278 50.8936 278 45.3373"
                            stroke="url(#paint0_linear_72:302)"
                        />
                        <path
                            d="M-57 1L50.0728 63.8548C55.5501 68.0219 70.8513 74.7589 88.2373 68.3692C109.97 60.3821 116.861 49.9642 156.615 52.7423C178.778 54.291 195.31 58.2985 205.911 51.3533C216.513 44.408 224.994 36.7682 243.016 38.1572C255.835 39.1453 265.278 39.8936 278 34.3373"
                            stroke="url(#paint1_linear_72:302)"
                        />
                        <path
                            d="M-57 23L50.0728 85.8548C55.5501 90.0219 70.8513 96.7589 88.2373 90.3692C109.97 82.3821 116.861 71.9642 156.615 74.7423C178.778 76.291 195.31 80.2985 205.911 73.3533C216.513 66.408 224.994 58.7682 243.016 60.1572C255.835 61.1453 265.278 61.8936 278 56.3373"
                            stroke="url(#paint2_linear_72:302)"
                        />
                        <path
                            d="M-57 35L50.0728 97.8548C55.5501 102.022 70.8513 108.759 88.2373 102.369C109.97 94.3821 116.861 83.9642 156.615 86.7423C178.778 88.291 195.31 92.2985 205.911 85.3533C216.513 78.408 224.994 70.7682 243.016 72.1572C255.835 73.1453 265.278 73.8936 278 68.3373"
                            stroke="url(#paint3_linear_72:302)"
                        />
                    </g>
                    <defs>
                        <linearGradient
                            id="paint0_linear_72:302"
                            x1="256.267"
                            y1="53.6717"
                            x2="-40.8688"
                            y2="8.15715"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF0000" stopOpacity="0" />
                            <stop offset="1" stopColor="#FF0000" />
                        </linearGradient>
                        <linearGradient
                            id="paint1_linear_72:302"
                            x1="256.267"
                            y1="42.6717"
                            x2="-40.8688"
                            y2="-2.84285"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF0000" stopOpacity="0" />
                            <stop offset="1" stopColor="#FF0000" />
                        </linearGradient>
                        <linearGradient
                            id="paint2_linear_72:302"
                            x1="256.267"
                            y1="64.6717"
                            x2="-40.8688"
                            y2="19.1572"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF0000" stopOpacity="0" />
                            <stop offset="1" stopColor="#FF0000" />
                        </linearGradient>
                        <linearGradient
                            id="paint3_linear_72:302"
                            x1="256.267"
                            y1="76.6717"
                            x2="-40.8688"
                            y2="31.1572"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF0000" stopOpacity="0" />
                            <stop offset="1" stopColor="#FF0000" />
                        </linearGradient>
                    </defs>
                </svg>
            </div>
            <div className="absolute bottom-0 left-0 z-2">
                <svg
                    width="239"
                    height="601"
                    viewBox="0 0 239 601"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <rect
                        opacity="0.3"
                        x="-184.451"
                        y="600.973"
                        width="196"
                        height="541.607"
                        rx="2"
                        transform="rotate(-128.7 -184.451 600.973)"
                        fill="url(#paint0_linear_93:235)"
                    />
                    <rect
                        opacity="0.3"
                        x="-188.201"
                        y="385.272"
                        width="59.7544"
                        height="541.607"
                        rx="2"
                        transform="rotate(-128.7 -188.201 385.272)"
                        fill="url(#paint1_linear_93:235)"
                    />
                    <defs>
                        <linearGradient
                            id="paint0_linear_93:235"
                            x1="-90.1184"
                            y1="420.414"
                            x2="-90.1184"
                            y2="1131.65"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0" />
                        </linearGradient>
                        <linearGradient
                            id="paint1_linear_93:235"
                            x1="-159.441"
                            y1="204.714"
                            x2="-159.441"
                            y2="915.952"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0" />
                        </linearGradient>
                    </defs>
                </svg>
            </div>
        </section>
    );
};

export default Blog;
