"use client";

import Image from "next/image";
import { motion } from "framer-motion";

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 id="story" className="relative py-24 md:py-24 px-6 sm:px-12 md:px-24 overflow-hidden select-none bg-[#f5edd9]">
      {/* Traditional Background Image containing pre-composed sketches and mandalas */}
      <Image
        src="/images/home/our-story/our-story-bg.webp"
        alt="Traditional South Indian Story Background"
        fill
        priority
        className="object-cover object-center 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) */}
        <motion.div
          initial={{ opacity: 0, y: 35 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.75, ease: "easeOut" }}
          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-base sm:text-base 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">
            Traditional South<br />
            <span className="text-[#0a4a2b] font-extrabold block mt-1">Indian Recipes</span>
          </h2>

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

          {/* Paragraph Narrative */}
          <p className="font-sans text-sm sm:text-base lg:text-lg text-stone-700 leading-relaxed max-w-2xl text-center tracking-wider mb-2 italic font-semibold">
            At My Dosa Place, every recipe reflects the heart of a South Indian kitchen, passed down through generations. In the heart of Waterloo, we bring authentic flavours to those who grew up with them and those discovering them for the first time.
          </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 */}
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 15 }}
              whileInView={{ opacity: 1, scale: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
              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 overflow-hidden">
                <Image src="/images/home/our-story/icons/pure-veg.webp" alt="100% Pure Veg" width={32} height={32} className="object-contain" />
              </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>
            </motion.div>

            {/* Feature 2: Recipes */}
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 15 }}
              whileInView={{ opacity: 1, scale: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
              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 overflow-hidden">
                <Image src="/images/home/our-story/icons/authentic.webp" alt="Authentic Recipes" width={32} height={32} className="object-contain" />
              </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>
            </motion.div>

            {/* Feature 3: Hospitality */}
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 15 }}
              whileInView={{ opacity: 1, scale: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
              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 overflow-hidden">
                <Image src="/images/home/our-story/icons/hospitality.webp" alt="Warm Hospitality" width={32} height={32} className="object-contain" />
              </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>
            </motion.div>

            {/* Feature 4: Love */}
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 15 }}
              whileInView={{ opacity: 1, scale: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
              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 overflow-hidden">
                <Image src="/images/home/our-story/icons/love.webp" alt="Made With Love" width={32} height={32} className="object-contain" />
              </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>
            </motion.div>

          </div>

        </motion.div>

        {/* Right Side: Mockup Gopuram Archway thali frame */}
        <motion.div
          initial={{ opacity: 0, x: 45, scale: 0.96 }}
          whileInView={{ opacity: 1, x: 0, scale: 1 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.85, ease: "easeOut" }}
          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/home/our-story/our-story-right-img.webp"
              alt="My Dosa Place Traditional Dining Feast"
              fill
              sizes="(max-width: 1024px) 100vw, 46vw"
              className="object-contain"
              priority
            />
          </div>
        </motion.div>

      </div>
    </section>
  );
}
