"use client";

import Image from "next/image";

export default function RestaurantStory() {
  return (
    <section className="relative py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none">
      {/* 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-25" />

      <div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16 relative z-10">
        
        {/* Left Side: Story & Features Details (Fully Center-Aligned) */}
        <div className="w-full lg:w-[53%] flex flex-col items-center text-center justify-center">
          
          {/* Badge Pre-title with Gold Crest */}
          <div className="flex flex-col items-center mb-4">
            {/* Gold Lamp/Lotus Crest */}
            <svg className="w-8 h-8 text-[#d8c396] mb-2" viewBox="0 0 100 100" fill="none">
              <path d="M50 15 C52 35 70 45 75 50 C65 55 55 58 50 75 C45 58 35 55 25 50 C30 45 48 35 50 15 Z" fill="currentColor" />
              <circle cx="50" cy="50" r="4.5" fill="#8b2635" />
              <path d="M35 78 L65 78" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
            </svg>
            <span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#8b2635] font-bold block">
              ••••• OUR STORY •••••
            </span>
          </div>

          {/* Main Headline */}
          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wide text-[#0a4a2b] leading-tight">
            A Tradition Served<br /> with Love
          </h2>

          {/* Traditional Gold Divider */}
          <div className="flex items-center gap-4 my-6 justify-center">
            <div className="w-16 h-[1.5px] bg-gradient-to-r from-transparent to-[#d8c396]" />
            <div className="w-2.5 h-2.5 rotate-45 border border-[#d8c396] bg-[#8b2635]" />
            <div className="w-16 h-[1.5px] bg-gradient-to-l from-transparent to-[#d8c396]" />
          </div>

          {/* Paragraph Narrative */}
          <p className="font-sans text-xs sm:text-sm lg:text-base text-stone-700 leading-relaxed max-w-xl text-center tracking-wide mb-8">
            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 */}
          <div className="flex items-center gap-4 mb-10 justify-center">
            <div className="w-16 h-[1.5px] bg-gradient-to-r from-transparent to-[#d8c396]" />
            <div className="w-2.5 h-2.5 rotate-45 border border-[#d8c396] bg-[#8b2635]" />
            <div className="w-16 h-[1.5px] bg-gradient-to-l from-transparent to-[#d8c396]" />
          </div>

          {/* Grid of 4 Key Features */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4 w-full">
            
            {/* Feature 1: Veg */}
            <div className="flex flex-col items-center text-center group">
              <div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
                <svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 1 9a7 7 0 0 1-9 9z" />
                  <path d="M19 2c-2.26 4.33-5.27 7.14-8 10" />
                </svg>
              </div>
              <h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
                100% Pure Veg
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
                Pure vegetarian food made with the finest ingredients.
              </p>
            </div>

            {/* Feature 2: Recipes */}
            <div className="flex flex-col items-center text-center group">
              <div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
                <svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 12h18" />
                  <path d="M5 12v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-6" />
                  <path d="M12 3v3" />
                  <path d="M8 4v2" />
                  <path d="M16 4v2" />
                </svg>
              </div>
              <h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
                Authentic Recipes
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
                Traditional recipes crafted with authentic South Indian flavors.
              </p>
            </div>

            {/* Feature 3: Hospitality */}
            <div className="flex flex-col items-center text-center group">
              <div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
                <svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
                  <path d="M12 3c-1.5 3-4 4.5-4 7.5a4 4 0 0 0 8 0c0-3-2.5-4.5-4-7.5z" strokeLinecap="round" strokeLinejoin="round" />
                  <path d="M6 18h12v2H6z" strokeLinecap="round" strokeLinejoin="round" />
                  <path d="M9 20v2h6v-2z" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
                Warm Hospitality
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
                A homely environment with friendly service and a smile.
              </p>
            </div>

            {/* Feature 4: Love */}
            <div className="flex flex-col items-center text-center group">
              <div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
                <svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
                </svg>
              </div>
              <h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
                Made With Love
              </h4>
              <p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
                Every dish is prepared with love, care and traditional values.
              </p>
            </div>

          </div>

        </div>

        {/* Right Side: Larger Gopuram Arched Frame Counter Image */}
        <div className="w-full lg:w-[42%] flex justify-center relative">
          
          {/* Ambient Glow */}
          <div className="absolute w-[400px] h-[400px] rounded-full bg-gold/10 blur-[80px] -z-10 pointer-events-none" />

          {/* Shield frame backing shadow */}
          <div className="absolute inset-y-0 w-full max-w-[420px] bg-[#fcf9f2]/75 border border-gold/15 rounded-t-[200px] -z-10 shadow-md" />

          {/* Gopuram Arch Masked Image Wrapper */}
          <div
            className="w-[340px] h-[420px] sm:w-[420px] sm:h-[520px] relative overflow-hidden shadow-2xl z-10"
            style={{
              clipPath: "url(#gopuram-arch)",
              WebkitClipPath: "url(#gopuram-arch)",
            }}
          >
            <div className="w-full h-full relative group">
              <Image
                src="/images/chettinad_interior.png"
                alt="My Dosa Place Dining Counter"
                fill
                sizes="(max-width: 1024px) 100vw, 40vw"
                className="object-cover brightness-[0.98] transition-transform duration-700 group-hover:scale-105"
                priority
              />
            </div>

            {/* Inset Double Border Stroke Overlay */}
            <svg
              className="absolute inset-0 w-full h-full pointer-events-none z-30"
              viewBox="0 0 100 100"
              preserveAspectRatio="none"
            >
              <path
                d="M 50,1.5 
                   C 64,1.5 71.5,7 71.5,15 
                   C 71.5,18 73,19 75,20 
                   C 83.5,22 86.5,28 86.5,34 
                   C 86.5,37 88.5,38 90.5,39 
                   C 95.5,41 97.5,47 97.5,54 
                   L 97.5,98.5 
                   L 2.5,98.5 
                   L 2.5,54 
                   C 2.5,47 4.5,41 9.5,39 
                   C 11.5,38 13.5,37 13.5,34 
                   C 13.5,28 16.5,22 25,20 
                   C 27,19 28.5,18 28.5,15 
                   C 28.5,7 36,1.5 50,1.5 Z"
                fill="none"
                stroke="#d8c396"
                strokeWidth="1.2"
                strokeLinecap="round"
                opacity="0.85"
              />
              <path
                d="M 50,3.5 
                   C 62.5,3.5 69.5,8.5 69.5,16 
                   C 69.5,18.5 71,19.5 73,20.5 
                   C 81,22.5 84,28 84,33.5 
                   C 84,36 86,37 88,38 
                   C 93,40 94.5,45.5 94.5,52 
                   L 94.5,96 
                   L 5.5,96 
                   L 5.5,52 
                   C 5.5,45.5 7,40 12,38 
                   C 14,37 16,36 16,33.5 
                   C 16,28 19,22.5 27,20.5 
                   C 29,19.5 30.5,18.5 30.5,16 
                   C 30.5,8.5 37.5,3.5 50,3.5 Z"
                fill="none"
                stroke="#d8c396"
                strokeWidth="0.5"
                strokeLinecap="round"
                opacity="0.45"
              />
            </svg>
          </div>

          {/* Arch Caption Label Overlay */}
          <div className="absolute bottom-[-16px] z-20">
            <div className="bg-[#8b2635] border border-gold/45 px-5 py-1 text-[10px] tracking-[0.25em] text-[#fcfaf2] uppercase font-serif font-semibold shadow-md whitespace-nowrap">
              Heritage Sanctuary
            </div>
          </div>

        </div>

      </div>

      {/* SVG ClipPath Definition for the Gopuram Temple Arch frame */}
      <svg width="0" height="0" className="absolute pointer-events-none">
        <defs>
          <clipPath id="gopuram-arch" clipPathUnits="objectBoundingBox">
            <path d="M 0.5,0 
                     C 0.65,0 0.72,0.06 0.72,0.15 
                     C 0.72,0.18 0.74,0.19 0.76,0.2 
                     C 0.85,0.22 0.88,0.28 0.88,0.35 
                     C 0.88,0.38 0.9,0.39 0.92,0.4 
                     C 0.98,0.42 1,0.48 1,0.55 
                     L 1,1 
                     L 0,1 
                     C 0,0.48 0.02,0.42 0.08,0.4 
                     C 0.1,0.39 0.12,0.38 0.12,0.35 
                     C 0.12,0.28 0.15,0.22 0.24,0.2 
                     C 0.26,0.19 0.28,0.18 0.28,0.15 
                     C 0.28,0.06 0.35,0 0.5,0 Z" />
          </clipPath>
        </defs>
      </svg>
    </section>
  );
}