"use client";

import Image from "next/image";
import SubpageLayout from "@/components/SubpageLayout";

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>
  </>
);

const BLOG_POSTS = [
  {
    id: 1,
    title: "The Art of Fermenting Dosa Batter: A 24-Hour Ritual",
    desc: "Discover the traditional science and family secrets behind cultivating the perfect sourness and crispiness for our signature stone-ground dosas.",
    date: "JULY 15, 2026",
    image: "/images/masala_dosa_luxury.png",
    author: "Chef Sundaram Iyer",
  },
  {
    id: 2,
    title: "Secret Spices of Chettinad Cookery",
    desc: "Unveiling the delicate proportions of kalpasi (stone flower), star anise, and freshly crushed peppercorns that define our royal spice blends.",
    date: "JUNE 28, 2026",
    image: "/images/category_curries.jpg",
    author: "My Dosa Place Culinary Team",
  },
  {
    id: 3,
    title: "Why Brass Cookware Remains King in Heritage Dining",
    desc: "How slow-heating copper and brass vessels preserve the vital nutrients and aroma of our house-cooked lentil sambar and vegetable poriyals.",
    date: "MAY 12, 2026",
    image: "/images/south_indian_thali_luxury.png",
    author: "Heritage Preservation Society",
  },
];

export default function BlogPage() {
  return (
    <SubpageLayout>
      {/* Background elements */}
      <div className="absolute inset-0 z-0 pointer-events-none select-none opacity-40">
        <Image
          src="/images/category_bg.jpg"
          alt="Backdrop"
          fill
          priority
          className="object-cover object-center"
        />
      </div>

      <div className="max-w-5xl mx-auto px-6 py-12 relative z-10">
        
        {/* Subpage Header Banner */}
        <div className="text-center pb-14 max-w-2xl mx-auto select-text">
          <div className="flex items-center gap-3 justify-center mb-2">
            <span className="text-[#bc9e65] text-xs">❧</span>
            <span className="font-sans text-[10px] tracking-[0.3em] text-[#bc9e65] font-extrabold uppercase">
              CULINARY CHRONICLES
            </span>
            <span className="text-[#bc9e65] text-xs">❧</span>
          </div>
          <h1 className="font-serif text-3xl sm:text-4xl lg:text-[42px] font-bold text-white tracking-wider leading-tight uppercase">
            Spices & <span className="text-[#bc9e65]">Stories</span>
          </h1>
          <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#bc9e65] to-transparent mx-auto mt-4" />
        </div>

        {/* Blog Posts Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
          {BLOG_POSTS.map((post) => (
            <div
              key={post.id}
              className="relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-5 rounded-none shadow-2xl flex flex-col group overflow-visible transition-all duration-300 hover:-translate-y-1"
            >
              {/* Corner leaves and border outline */}
              <div className="absolute inset-1.5 border border-[#bc9e65]/15 pointer-events-none" />
              <CornerOrnaments />

              {/* Image Frame */}
              <div className="relative w-full aspect-[4/3] border border-[#bc9e65]/35 overflow-hidden mb-4 bg-[#06120c] shadow-md z-10"
                style={{
                  clipPath: "polygon(50% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 20%)"
                }}
              >
                <Image
                  src={post.image}
                  alt={post.title}
                  fill
                  sizes="(max-width: 768px) 100vw, 30vw"
                  className="object-cover group-hover:scale-105 transition-transform duration-[1.5s]"
                />
              </div>

              {/* Meta */}
              <div className="flex items-center justify-between font-sans text-[9px] tracking-wider text-[#bc9e65] uppercase font-bold mb-2 z-10">
                <span>{post.date}</span>
                <span>BY {post.author}</span>
              </div>

              {/* Details */}
              <h3 className="font-serif text-sm lg:text-[15px] font-bold text-white tracking-wider uppercase mb-2 group-hover:text-[#bc9e65] transition-colors duration-300 z-10 min-h-[44px]">
                {post.title}
              </h3>
              <p className="font-sans text-stone-300 text-[11px] leading-relaxed tracking-wider mb-6 flex-1 z-10">
                {post.desc}
              </p>

              {/* Read button */}
              <button
                className="clickable self-start font-sans font-bold text-[9px] tracking-[0.2em] text-[#bc9e65] uppercase hover:text-white transition-colors duration-300 z-10 flex items-center gap-1.5"
                onClick={() => alert(`Enjoying "${post.title}"? Full recipe chronicles coming soon to Waterloo!`)}
              >
                READ MORE <span className="text-[10px] group-hover:translate-x-1 transition-transform duration-300">→</span>
              </button>
            </div>
          ))}
        </div>

      </div>
    </SubpageLayout>
  );
}
