"use client";

import Image from "next/image";

const StoryPreTitleOrnament = () => (
  <svg className="w-4 h-4 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
  </svg>
);

const StoryLotusDivider = () => (
  <div className="flex items-center gap-4 my-5 justify-center w-full max-w-[280px] pointer-events-none select-none">
    <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#d8c396]" />
    <svg className="w-6 h-5 text-[#bc9e65]" viewBox="0 0 30 20" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" fill="currentColor" fillOpacity="0.1" />
      <path d="M 15,8 C 9,10 9,15 15,16" />
      <path d="M 15,8 C 21,10 21,15 15,16" />
    </svg>
    <div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#d8c396]" />
  </div>
);

export default function RestaurantStory() {
  return (
    <section className="relative py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none">
      {/* Traditional Background Image containing pre-composed sketches and mandalas */}
      <Image
        src="/images/story_bg.png"
        alt="Traditional South Indian Story Background"
        fill
        priority
        className="object-fill pointer-events-none select-none z-0"
      />

      {/* Traditional Temple Borders */}
      <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-30 z-10" />

      <div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-8 relative z-10">
        
        {/* Left Side: Story & Features Details (Fully Center-Aligned) */}
        <div className="w-full lg:w-[50%] flex flex-col items-center text-center justify-center">
          
          {/* Pre-title with Gold Crest */}
          <div className="flex flex-col items-center mb-2">
            <StoryPreTitleOrnament />
            <span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
              ••••• OUR STORY •••••
            </span>
          </div>

          {/* Main Headline */}
          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase">
            A Tradition Served<br />
            <span className="text-[#0a4a2b] font-extrabold block mt-1">With Love</span>
          </h2>

          {/* Traditional Gold Divider */}
          <StoryLotusDivider />

          {/* Paragraph Narrative */}
          <p className="font-sans text-xs sm:text-sm lg:text-[15px] text-stone-700 leading-relaxed max-w-xl text-center tracking-wider mb-2 italic font-semibold">
            At My Dosa Place, food is more than just a meal, it's a tradition passed down through generations. From authentic recipes to warm hospitality, we bring the true essence of South India to your table.
          </p>

          {/* Traditional Bottom Gold Divider */}
          <StoryLotusDivider />

          {/* Grid of 4 Key Features */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4 w-full mt-4">
            
            {/* Feature 1: Veg */}
            <div className="flex flex-col items-center text-center group select-text">
              <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                <svg className="w-6 h-6 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10" />
                  <path d="M12 18V12" />
                  <path d="M12 12C12 10 14 9 16 9" />
                  <path d="M12 14C12 12 10 11 8 11" />
                </svg>
              </div>
              <h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
                100% Pure Veg
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                Pure vegetarian food made with the finest ingredients.
              </p>
            </div>

            {/* Feature 2: Recipes */}
            <div className="flex flex-col items-center text-center group select-text">
              <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <path d="M4 10h16c0 5-2.5 8-8 8s-8-3-8-8z" />
                  <path d="M12 4v4" />
                  <path d="M6 8h12" />
                  <path d="M2 10h20" />
                </svg>
              </div>
              <h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
                Authentic Recipes
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                Traditional recipes crafted with authentic South Indian flavors.
              </p>
            </div>

            {/* Feature 3: Hospitality */}
            <div className="flex flex-col items-center text-center group select-text">
              <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <path d="M12 20V4" />
                  <path d="M12 7c4 0 6 2 6 5s-2 3-6 3" />
                  <path d="M12 11c-4 0-6 2-6 5s2 3 6 3" />
                  <path d="M12 15c4 0 6-2 6-5s-2-2-6-2" />
                </svg>
              </div>
              <h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
                Warm Hospitality
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                A homely environment with friendly service and a smile.
              </p>
            </div>

            {/* Feature 4: Love */}
            <div className="flex flex-col items-center text-center group select-text">
              <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <circle cx="12" cy="12" r="10" />
                  <path d="M12 16.5s-4-2.5-4-4.5c0-1.2.8-2 2-2 1 0 1.5.5 2 1 .5-.5 1-1 2-1 1.2 0 2 .8 2 2 0 2-4 4.5-4 4.5z" fill="currentColor" fillOpacity="0.1" />
                </svg>
              </div>
              <h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
                Made With Love
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                Every dish is prepared with love, care and traditional values.
              </p>
            </div>

          </div>

        </div>

        {/* Right Side: Mockup Gopuram Archway thali frame */}
        <div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative z-10">
          {/* Crop-extracted story thali arch image */}
          <div className="w-[340px] h-[340px] sm:w-[480px] sm:h-[480px] md:w-[500px] md:h-[500px] relative pointer-events-none select-none">
            <Image
              src="/images/story_arch.png"
              alt="My Dosa Place Traditional Dining Feast"
              fill
              sizes="(max-width: 1024px) 100vw, 46vw"
              className="object-contain"
              priority
            />
          </div>
        </div>

      </div>
    </section>
  );
}
