"use client";

import Image from "next/image";
import Link from "next/link";
import SubpageLayout from "@/components/SubpageLayout";
import { BLOG_POSTS } from "@/utils/blogData";
import InnerBanner from "@/components/InnerBanner";
import AnimatedSection from "@/components/AnimatedSection";

const CornerOrnaments = () => (
  <>
    <svg className="absolute w-3 h-3 text-[#bc9e65]/40 top-2 left-2 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3 h-3 text-[#bc9e65]/40 top-2 right-2 rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3 h-3 text-[#bc9e65]/40 bottom-2 left-2 -rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3 h-3 text-[#bc9e65]/40 bottom-2 right-2 rotate-180 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
  </>
);

export default function BlogPage() {
  return (
    <SubpageLayout>
      <InnerBanner pageName="Blog" bgImage="/images/inner-banner/3.webp" />

      <div className="w-full bg-[#f5efe0] relative z-10">
        {/* Subtle background texture */}
        <div className="absolute inset-0 pointer-events-none select-none">
          <Image src="/images/story_bg.png" alt="" fill className="object-cover" />
        </div>
        <div className="max-w-6xl mx-auto px-6 py-12 lg:py-20 relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-7xl mx-auto">
          {BLOG_POSTS.map((post, index) => (
            <AnimatedSection key={post.id} variant="fadeUp" delay={index * 0.1}>
            <div
              className="relative bg-[#fbfaf4] rounded-xl border border-[#e8e0ce] flex flex-col group overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
            >
              {/* Image Container with fade out */}
              <div className="relative w-full aspect-[4/3] overflow-hidden border-b-1 border-[#0a4a2b]">
                <Image
                  src={post.image}
                  alt={post.title}
                  fill
                  sizes="(max-width: 768px) 100vw, 30vw"
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
                
                {/* Gradient fade to match background */}
                <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#fbfaf4] via-[#fbfaf4]50 to-transparent z-10 pointer-events-none" />

                {/* Floating Tag */}
                <div className="absolute bottom-4 left-5 z-20 bg-[#0a4a2b] rounded-md px-3 py-1.5 shadow-md">
                  <span className="font-sans text-[10px] font-extrabold tracking-widest text-[#fff] uppercase">
                    {post.id === 1 ? "Recipes" : post.id === 2 ? "Ingredients" : "Behind The Scenes"}
                  </span>
                </div>
              </div>

              {/* Card Body */}
              <div className="flex flex-col flex-1 p-5 pt-3 relative z-10">
                <Link href={`/blog/${post.slug}`} className="mb-3 block">
                  <h3 className="font-serif text-[22px] leading-tight font-medium text-[#1a3a25] transition-colors duration-300 hover:text-[#8a6c3a] line-clamp-2">
                    {post.title}
                  </h3>
                </Link>
                
                <p className="font-sans text-stone-600 text-[13px] leading-relaxed mb-6 flex-1">
                  {post.desc}
                </p>

                {/* Footer Row */}
                <div className="flex items-center text-stone-500 font-sans text-[11px] mt-auto">
                  <span className="flex-shrink-0">
                    {post.date} 
                  </span>
                  
                  {/* Expanding line */}
                  <div className="flex-1 bg-[#d8c396]/60 mx-3" />
                  
                  <Link
                    href={`/blog/${post.slug}`}
                    className="flex-shrink-0 text-[#0a4a2b] hover:text-[#bc9e65] transition-colors flex items-center gap-1 group/btn font-bold text-[13px]"
                  >
                    Read More <span className="transition-transform group-hover/btn:translate-x-1 text-lg leading-none">→</span>
                  </Link>
                </div>
              </div>
            </div>
            </AnimatedSection>
          ))}
        </div>
        </div>
      </div>
    </SubpageLayout>
  );
}
