"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import SubpageLayout from "@/components/SubpageLayout";
import InnerBanner from "@/components/InnerBanner";
import AnimatedSection from "@/components/AnimatedSection";
import TestimonialSlider from "@/components/TestimonialSlider";

/* ─── FAQ Data ─────────────────────────────────────── */
const faqs = [
  {
    q: "Do you offer vegan options?",
    a: "We're a 100% pure vegetarian restaurant, and many of our dishes are naturally vegan or easily made vegan on request — including idli, sambar, most chutneys, and several of our dosas. Just ask your server to prepare your dish without ghee or curd.",
  },
  {
    q: "Who is the chef behind My Dosa Place?",
    a: "Our kitchen is led by Chef Mendia Juxef, who brings over 30 years of experience in traditional South Indian cooking to every dish — including time-honoured techniques like 24-hour batter fermentation and stone-ground spices",
  },
  {
    q: "Is My Dosa Place a family-run restaurant?",
    a: "Yes, our heritage-driven approach to food and hospitality is rooted in family tradition, which is why the Kudumba Dining experience is central to who we are. ",
  },
  {
    q: "Do you provide catering services?",
    a: "Yes — we offer catering for private events, family gatherings, and celebrations. Get in touch with us to discuss your group size, menu, and date.",
  },
];

/* ─── Values Data ───────────────────────────────────── */
const values = [
  {
    label: "Quality",
    desc: "Every dish crafted with the finest ingredients.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 14v4m-5-4h10m-8 4a3 3 0 006 0H9z" />
        <path strokeLinecap="round" strokeLinejoin="round" d="M18.36 10a7.978 7.978 0 00-12.72 0" />
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v3m0 0a2 2 0 100 4 2 2 0 000-4z" />
      </svg>
    ),
  },
  {
    label: "Sustainability",
    desc: "Our thinking practices support responsible choices for a better tomorrow.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 01-9-9c0-5 3.5-9 9-9s9 4 9 9a9 9 0 01-9 9z" />
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21V9m-4 4l4-4 4 4" />
      </svg>
    ),
  },
  {
    label: "Passion",
    desc: "Dedication and love poured into every recipe we serve.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
        <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
      </svg>
    ),
  },
  {
    label: "Community",
    desc: "Building bonds and bringing people together.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
        <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
      </svg>
    ),
  },
];

/* ─── Page ──────────────────────────────────────────── */
export default function AboutPage() {
  /* single controlled index — only 1 FAQ open at a time */
  const [openFaq, setOpenFaq] = useState<number | null>(0);

  return (
    <SubpageLayout>
      <div className="w-full overflow-x-hidden">

      {/* ── Inner Banner ── */}
      <InnerBanner pageName="About" bgImage="/images/inner-banner/1.webp" />

      {/* ══════════════════════════════════════════
          SECTION 1 — Welcome & Features (Image match)
      ══════════════════════════════════════════ */}
      <div className="relative w-full bg-[#fdfaf4] overflow-hidden pt-16 pb-24">
        {/* Faint temple sketch background */}
        <div className="absolute inset-0 z-0 pointer-events-none select-none">
          <Image src="/images/story_bg.png" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6">
          {/* Top Row: 3 columns (Left Text, Center Arch, Right Card) */}
          <div className="flex flex-col lg:flex-row items-center justify-between gap-10">

            {/* LEFT COLUMN: Text */}
            <AnimatedSection variant="fadeLeft" delay={0.1}>
              <div className="w-full lg:w-[400px] select-text z-20 relative">
                <div className="flex items-center gap-2 mb-2">
                  <svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                  </svg>
                  <p className="font-sans text-[11px] tracking-[0.2em] text-[#bc9e65] uppercase font-bold">
                    WELCOME TO
                  </p>
                </div>

                <h1 className="font-serif text-5xl sm:text-[64px] leading-[1.1] mb-4">
                  <span className="text-[#0a4a2b] block">My Dosa</span>
                  <span className="text-[#bc9e65] block">Place</span>
                </h1>

                {/* Divider */}
                <div className="flex items-center gap-3 w-48 mb-6">
                  <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
                  <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                    <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                  </svg>
                  <div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
                </div>

                <h3 className="font-sans text-sm tracking-widest text-[#0a4a2b] uppercase font-bold mb-4">
                  AUTHENTIC SOUTH INDIAN CUISINE
                </h3>

                <p className="font-sans text-[#4a3c28] text-sm leading-relaxed mb-8 pr-4">
                  Nestled in the heart of Waterloo, My Dosa Place is a 100% pure vegetarian South Indian restaurant built around one craft: the dosa — where every dish tells a story rooted in tradition, love, and the finest ingredients.
                </p>

                <div className="flex flex-wrap items-center gap-6">
                  <Link
                    href="/menu"
                    className="inline-flex items-center gap-3 px-6 py-3 bg-[#0a4a2b] hover:bg-[#163823] text-white font-sans font-bold text-[11px] tracking-widest uppercase transition-all duration-300 rounded-md"
                  >
                    EXPLORE MENU <span>→</span>
                  </Link>

                  <button className="flex items-center gap-3 group">
                    <div className="w-10 h-10 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] group-hover:bg-[#bc9e65] group-hover:text-white transition-all">
                      <svg className="w-3.5 h-3.5 ml-0.5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M8 5v14l11-7z" />
                      </svg>
                    </div>
                    <span className="font-sans text-[11px] font-bold tracking-widest text-[#bc9e65] uppercase">
                      OUR STORY
                    </span>
                  </button>
                </div>
              </div>
            </AnimatedSection>

            {/* CENTER & RIGHT ARCH/CARD COMPOSITION */}
            <div className="flex-1 flex justify-center items-center mt-12 lg:mt-0 w-full">

              {/* px buffer on mobile/tablet so absolute badges don't overflow viewport */}
              <div className="relative px-[70px] lg:px-0">
                <div className="relative overflow-visible"> {/* The Arch Group Container */}

                  {/* Outer arch line decoration */}
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] h-[420px] sm:w-[340px] sm:h-[480px] lg:w-[420px] lg:h-[570px] rounded-t-full border-t border-l border-r border-[#bc9e65]/40 z-0 pointer-events-none" />

                  {/* The Arch Image container */}
                  <AnimatedSection variant="scaleUp" delay={0.2}>
                    <div className="relative w-[260px] h-[380px] sm:w-[320px] sm:h-[460px] lg:w-[400px] lg:h-[550px] rounded-t-full overflow-hidden border-[6px] border-[#fdfaf4] shadow-[0_0_40px_rgba(0,0,0,0.1)] z-10">
                      <div className="absolute inset-0 rounded-t-full border border-[#bc9e65]/30 z-20 pointer-events-none" />
                      <Image
                        src="/images/story_arch.png"
                        alt="My Dosa Place"
                        fill
                        className="object-cover"
                      />
                    </div>
                  </AnimatedSection>

                  {/* Made With Love Badge (Overlapping left of arch) */}
                  <AnimatedSection variant="fadeRight" delay={0.4} className="absolute top-1/2 -translate-y-1/2 -left-6 sm:-left-16 lg:-left-16 z-20">
                    <div className="bg-[#0a4a2b] border border-[#bc9e65] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
                      <div className="absolute inset-1.5 border border-[#bc9e65]/40 rounded-xl pointer-events-none" />
                      <svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                      </svg>
                      <span className="font-sans text-[11px] tracking-widest text-white uppercase text-center font-bold leading-tight mb-3">
                        MADE<br />WITH<br />LOVE
                      </span>
                      <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                      </svg>
                    </div>
                  </AnimatedSection>

                  {/* Right Card — only at lg+ where two-column layout provides horizontal space */}
                  <AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-10 -right-35 lg:-right-20 z-20 hidden md:block">
                    <div className="bg-[#fdfaf4] border border-[#bc9e65] rounded-3xl p-8 w-[260px] shadow-2xl relative">
                      <div className="absolute inset-1.5 border border-[#bc9e65]/30 rounded-[20px] pointer-events-none" />

                      <div className="relative z-10 flex flex-col items-center text-center pt-2">
                        <p className="font-serif italic text-[#bc9e65] text-lg mb-1">A Taste of</p>
                        <h4 className="font-serif text-[#0a4a2b] text-lg font-bold leading-snug tracking-wide uppercase mb-3">
                          TRADITION<br />MADE WITH<br />PASSION
                        </h4>

                        {/* Divider */}
                        <div className="flex items-center gap-2 w-full justify-center mb-6">
                          <div className="h-[1px] w-8 bg-[#bc9e65]" />
                          <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                          </svg>
                          <div className="h-[1px] w-8 bg-[#bc9e65]" />
                        </div>

                        <ul className="w-full flex flex-col gap-4 text-left">
                          <li className="flex items-center gap-4">
                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
                            <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every meal.</span>
                          </li>
                          <li className="flex items-center gap-4">
                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                            <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every guest.</span>
                          </li>
                          <li className="flex items-center gap-4">
                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                            <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every time.</span>
                          </li>
                        </ul>
                      </div>

                      {/* Leaves bg bottom right */}
                      <div className="absolute bottom-0 right-0 w-24 h-24 opacity-30 pointer-events-none rounded-br-3xl overflow-hidden">
                        <Image src="/images/menu_leaf_clean.png" alt="" fill className="object-cover" />
                      </div>
                    </div>
                  </AnimatedSection>

                </div>{/* end arch group */}
              </div>{/* end padding wrapper */}
            </div>
          </div>

          {/* BOTTOM PILL ROW */}
          {/* <AnimatedSection variant="fadeUp" delay={0.6}>
            <div className="mt-20 w-full rounded-[40px] bg-[#fcf9f2] border border-[#eaddc4] shadow-md flex flex-col md:flex-row items-stretch overflow-hidden min-h-[140px]">
              
              <div className="relative w-full md:w-[25%] h-48 md:h-auto hidden md:block">
                <Image src="/images/south_indian_thali_luxury.png" alt="Dosa" fill className="object-cover" />
              </div>

             
              <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 p-6 lg:p-8">
             
                <div className="flex items-center gap-3 lg:gap-4">
                  <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
                    <svg className="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z" /></svg>
                  </div>
                  <div className="flex flex-col flex-1">
                    <span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">AUTHENTIC RECIPES</span>
                    <span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">Traditional recipes passed down through generations.</span>
                  </div>
                </div>
               
                <div className="flex items-center gap-3 lg:gap-4 sm:border-l border-[#eaddc4] pt-4 sm:pt-0 sm:pl-6 border-t sm:border-t-0">
                  <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
                    <svg className="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
                  </div>
                  <div className="flex flex-col flex-1">
                    <span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">FINEST INGREDIENTS</span>
                    <span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">Handpicked ingredients for rich, natural and authentic flavours.</span>
                  </div>
                </div>
                
                <div className="flex items-center gap-3 lg:gap-4 xl:border-l border-[#eaddc4] pt-4 xl:pt-0 xl:pl-6 border-t xl:border-t-0">
                  <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
                    <svg className="w-5 h-5 lg:w-6 lg:h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L8 8h8l-4-6zm-5 7v13h10V9H7zm2 2h6v2H9v-2zm0 4h6v2H9v-2zm0 4h6v2H9v-2z" /></svg>
                  </div>
                  <div className="flex flex-col flex-1">
                    <span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">HERITAGE & CULTURE</span>
                    <span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">Honouring the culinary heritage of South India in every dish.</span>
                  </div>
                </div>
               
                <div className="flex items-center gap-3 lg:gap-4 sm:border-l border-[#eaddc4] pt-4 sm:pt-0 sm:pl-6 border-t sm:border-t-0 xl:border-t-0">
                  <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
                    <svg className="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                  </div>
                  <div className="flex flex-col flex-1">
                    <span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">WARM AMBIENCE</span>
                    <span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">A cozy space where good food and great memories are made.</span>
                  </div>
                </div>
              </div>

              
              <div className="relative w-full md:w-[20%] h-48 md:h-auto hidden md:block">
                <Image src="/images/my_dosa_place_interior.png" alt="Interior" fill className="object-cover" />
              </div>
            </div>
          </AnimatedSection> */}

        </div>
      </div>

      {/* ══════════════════════════════════════════
          SECTION 2 — Our Values  (dark green bg)
      ══════════════════════════════════════════ */}
      <div className="relative w-full overflow-hidden">
        {/* Background image overlay */}
        <div className="absolute inset-0 z-0 pointer-events-none select-none mix-blend-multiply opacity-50">
          <Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
        </div>

        {/* Intricate Gold Border */}
        <div className="absolute inset-4 z-10 border border-[#bc9e65]/40 rounded-xl pointer-events-none">
          {/* Corner ornaments */}
          <div className="absolute -top-1 -left-1 w-6 h-6 border-t-2 border-l-2 border-[#bc9e65]" />
          <div className="absolute -top-1 -right-1 w-6 h-6 border-t-2 border-r-2 border-[#bc9e65]" />
          <div className="absolute -bottom-1 -left-1 w-6 h-6 border-b-2 border-l-2 border-[#bc9e65]" />
          <div className="absolute -bottom-1 -right-1 w-6 h-6 border-b-2 border-r-2 border-[#bc9e65]" />
        </div>

        <div className="relative z-20 max-w-7xl mx-auto px-6 py-20 sm:py-24 flex flex-col items-center text-center">
          {/* Header */}
          <AnimatedSection variant="fadeUp" delay={0} className="flex flex-col items-center">
            {/* Lotus icon top */}
            <svg className="w-8 h-8 text-[#bc9e65] mb-4" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
            </svg>
            <h2 className="font-serif text-5xl sm:text-[64px] text-white uppercase tracking-wider mb-4 leading-none">
              OUR VALUES
            </h2>
            <div className="flex items-center gap-3 w-48 mb-6 justify-center">
              <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
              <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
              </svg>
              <div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
            </div>
            <p className="font-sans text-[#bc9e65] text-lg sm:text-xl tracking-wide leading-relaxed">
              Rooted in tradition. Crafted with passion.<br />Served with love.
            </p>
            <div className="flex justify-center mt-6 mb-16">
              {/* <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
              </svg> */}
            </div>
          </AnimatedSection>

          {/* Cards Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full mb-20 relative">
            {/* Decorators between cards */}
            <div className="hidden lg:block absolute left-1/4 top-1/2 -translate-y-1/2 -ml-2 z-30">
              <div className="w-3 h-3 rotate-45 border border-[#bc9e65] bg-[#0a2e1f]" />
            </div>
            <div className="hidden lg:block absolute left-2/4 top-1/2 -translate-y-1/2 -ml-2 z-30">
              <div className="w-3 h-3 rotate-45 border border-[#bc9e65] bg-[#0a2e1f]" />
            </div>
            <div className="hidden lg:block absolute left-3/4 top-1/2 -translate-y-1/2 -ml-2 z-30">
              <div className="w-3 h-3 rotate-45 border border-[#bc9e65] bg-[#0a2e1f]" />
            </div>

            {values.map((v, i) => (
              <AnimatedSection key={v.label} variant="fadeUp" delay={i * 0.1}>
                <div className="relative group bg-[#0a2e1f] border border-[#bc9e65] rounded-t-[50px] rounded-b-xl px-6 py-12 flex flex-col items-center text-center shadow-[0_10px_30px_rgba(0,0,0,0.5)] transition-transform duration-300 hover:-translate-y-2 h-full z-20">
                  {/* Scalloped top inner border approximation */}
                  <div className="absolute inset-2 border border-[#bc9e65]/30 rounded-t-[42px] rounded-b-lg pointer-events-none" />

                  {/* Gold Circular Icon */}
                  <div className="w-[84px] h-[84px] rounded-full border-[2px] border-[#bc9e65] bg-gradient-to-br from-[#bc9e65]/20 to-transparent flex items-center justify-center text-[#bc9e65] mb-8 relative shadow-[0_0_15px_rgba(188,158,101,0.2)]">
                    <div className="absolute inset-1.5 border border-[#bc9e65]/50 rounded-full" />
                    {v.icon}
                  </div>

                  <h3 className="font-serif text-white text-xl uppercase tracking-widest mb-4">
                    {v.label}
                  </h3>
                  {/* <div className="flex justify-center mb-5">
                    <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                      <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                    </svg>
                  </div> */}
                  <p className="font-sans text-stone-200 text-sm leading-relaxed px-2">
                    {v.desc}
                  </p>
                </div>
              </AnimatedSection>
            ))}
          </div>

          {/* Bottom Bar */}
          <AnimatedSection variant="fadeUp" delay={0.4} className="w-full">
            <div className="rounded-3xl lg:rounded-full bg-[#0a2e1f] border border-[#bc9e65] px-6 sm:px-8 py-8 sm:py-10 lg:py-6 shadow-xl relative w-full overflow-hidden">
              <div className="absolute inset-1 sm:inset-1.5 lg:inset-1 border border-[#bc9e65]/30 rounded-3xl lg:rounded-full pointer-events-none" />
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 lg:gap-4 relative z-10">
                {/* 1 */}
                <div className="flex items-center sm:justify-center gap-4 lg:border-r border-[#bc9e65]/30">
                  <div className="text-[#bc9e65] shrink-0">
                    <svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z" /></svg>
                  </div>
                  <div className="flex flex-col text-left">
                    <span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">AUTHENTIC FLAVOURS</span>
                    <span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">True taste of South India</span>
                  </div>
                </div>
                {/* 2 */}
                <div className="flex items-center sm:justify-center gap-4 lg:border-r border-[#bc9e65]/30">
                  <div className="text-[#bc9e65] shrink-0">
                    <svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
                  </div>
                  <div className="flex flex-col text-left">
                    <span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">FINEST INGREDIENTS</span>
                    <span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">Handpicked with care</span>
                  </div>
                </div>
                {/* 3 */}
                <div className="flex items-center sm:justify-center gap-4 lg:border-r border-[#bc9e65]/30">
                  <div className="text-[#bc9e65] shrink-0">
                    <svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L8 8h8l-4-6zm-5 7v13h10V9H7zm2 2h6v2H9v-2zm0 4h6v2H9v-2zm0 4h6v2H9v-2z" /></svg>
                  </div>
                  <div className="flex flex-col text-left">
                    <span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">TIMELESS TRADITION</span>
                    <span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">Honouring our heritage</span>
                  </div>
                </div>
                {/* 4 */}
                <div className="flex items-center sm:justify-center gap-4">
                  <div className="text-[#bc9e65] shrink-0">
                    <svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                  </div>
                  <div className="flex flex-col text-left">
                    <span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">WARM HOSPITALITY</span>
                    <span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">Making you feel at home</span>
                  </div>
                </div>
              </div>
            </div>
          </AnimatedSection>

        </div>
      </div>

      {/* ══════════════════════════════════════════
          SECTION 2.5 — Testimonials (sandstone bg)
      ══════════════════════════════════════════ */}
      <div className="relative w-full bg-[#fdfaf4] overflow-hidden">
        <div className="absolute inset-0 z-0 pointer-events-none select-none">
          <Image src="/images/menu_bg_traditional.png" alt="" fill className="object-cover object-center opacity-60 mix-blend-multiply" />
        </div>

        <div className="relative z-10 max-w-6xl mx-auto px-6 py-20 sm:py-24 text-center">
          <AnimatedSection variant="fadeUp" className="flex flex-col items-center">
            {/* Top Crown icon */}
            <div className="relative flex items-center justify-center mb-4">
              <svg className="w-8 h-8 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z" />
              </svg>
            </div>

            <p className="font-sans text-[11px] tracking-[0.3em] text-[#8a6c3a] uppercase font-bold mb-3">
              Words of Love
            </p>
            <h2 className="font-serif text-4xl sm:text-5xl text-[#1a3a25] tracking-wider mb-2">
              WHAT OUR GUESTS SAY
            </h2>

            <div className="flex items-center gap-3 w-48 mx-auto mb-14 justify-center">
              <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
              <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
              </svg>
              <div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
            </div>
          </AnimatedSection>

          <TestimonialSlider />
        </div>
      </div>

      {/* ══════════════════════════════════════════
          SECTION 3 — FAQ  (dark green & gold ornate split layout)
      ══════════════════════════════════════════ */}
      <div className="relative w-full bg-[#04120a] overflow-hidden pt-10 pb-40">

        {/* Background texture for the whole section */}
        <div className="absolute inset-0 pointer-events-none opacity-30">
          <Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
        </div>

        <div className="relative max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">

          {/* ── LEFT: Ornate dark green panel ── */}
          <div className="relative flex-[1.2] lg:flex-none lg:w-[60%] bg-[#062013] z-20 p-6 sm:p-10 lg:p-16 flex flex-col justify-center">

            {/* The Inset Gold Ornate Border */}
            <div className="absolute inset-4 lg:inset-6 border-[1.5px] border-[#bc9e65] rounded-xl lg:rounded-tr-[100px] lg:rounded-br-[100px] pointer-events-none" />

            {/* Corner flourishes */}
            <div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-[#bc9e65] pointer-events-none" />
            <div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-[#bc9e65] pointer-events-none" />

            {/* Hanging Lamp graphic (top left) */}
            <div className="absolute top-4 left-16 sm:left-24 w-12 h-32 pointer-events-none flex flex-col items-center">
              <div className="w-[1.5px] h-16 bg-[#bc9e65]" />
              <svg className="w-8 h-12 text-[#bc9e65]" viewBox="0 0 24 36" fill="currentColor">
                <path d="M4 12 L20 12 L16 20 L8 20 Z" />
                <path d="M12 24 L12 36" stroke="currentColor" strokeWidth="1.5" />
                <path d="M12 0 L12 12" stroke="currentColor" strokeWidth="1.5" />
                <circle cx="12" cy="10" r="2" />
                <circle cx="12" cy="22" r="2" />
              </svg>
            </div>

            {/* Overlapping Lotus Emblem on the right edge */}
            <div className="absolute top-1/2 -right-10 -translate-y-1/2 w-20 h-20 bg-[#062013] rounded-full border-[1.5px] border-[#bc9e65] flex items-center justify-center z-30 hidden lg:flex shadow-xl">
              <svg className="w-10 h-10 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C12 2 15 7 15 11C15 15 12 18 12 18C12 18 9 15 9 11C9 7 12 2 12 2Z" />
                <path d="M12 2C12 2 18 7 20 11C22 15 18 18 18 18C18 18 16 15 15 11C14 7 12 2 12 2Z" opacity="0.7" />
                <path d="M12 2C12 2 6 7 4 11C2 15 6 18 6 18C6 18 8 15 9 11C10 7 12 2 12 2Z" opacity="0.7" />
              </svg>
            </div>

            <AnimatedSection variant="fadeUp" delay={0.1} className="relative z-10 flex flex-col items-center text-center mt-12">
              {/* Header */}
              <div className="flex flex-col items-center mb-10 w-full max-w-2xl mx-auto">
                <div className="flex items-center gap-4 mb-3">
                  <div className="w-10 h-[1.5px] bg-[#bc9e65]" />
                  <span className="font-sans text-[10px] sm:text-xs tracking-[0.3em] text-[#bc9e65] uppercase font-bold">We're Here To Help</span>
                  <div className="w-10 h-[1.5px] bg-[#bc9e65]" />
                </div>
                <h2 className="font-serif text-4xl sm:text-5xl lg:text-[54px] text-white tracking-wide mb-4 leading-tight">
                  Frequently Asked Questions
                </h2>
                <div className="flex items-center justify-center mb-6">
                  <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                  </svg>
                </div>
                <p className="font-sans text-[#e8dcb5] text-sm sm:text-base max-w-md mx-auto">
                  Find answers to common questions about our food, services and more.
                </p>
              </div>

              {/* FAQ accordion */}
              <div className="space-y-4 w-full max-w-2xl mx-auto">
                {[
                  {
                    q: "Do you offer vegan options?",
                    a: "Yes! We have a wide range of delicious vegan dishes made with the finest ingredients.",
                    icon: <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22C12 22 4 16 4 10C4 5.58 7.58 2 12 2C16.42 2 20 5.58 20 10C20 16 12 22 12 22Z" opacity="0.8" /><path d="M12 2C7.58 2 4 5.58 4 10C4 16 12 22 12 22V2Z" /></svg>
                  },
                  {
                    q: "Where do you source your ingredients?",
                    a: "We source our ingredients locally whenever possible and import authentic spices directly from South India.",
                    icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M4 12c0-4.418 3.582-8 8-8s8 3.582 8 8M3 14h18M6 14v4a2 2 0 002 2h8a2 2 0 002-2v-4" /></svg>
                  },
                  {
                    q: "Do you provide catering services?",
                    a: "Yes, we offer catering for events of all sizes. Contact us for our specialized catering menu.",
                    icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M8 9h8m-8 4h6m-3-9v4a5 5 0 00-5 5H4a7 7 0 017-7V4a1 1 0 011-1h2a1 1 0 011 1v4a7 7 0 017 7h-2a5 5 0 00-5-5V4" /></svg>
                  },
                  {
                    q: "What are your opening hours?",
                    a: "We are open from 11:30 AM to 10:00 PM from Tuesday to Sunday. We are closed on Mondays.",
                    icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                  }
                ].map((f, i) => {
                  const isOpen = openFaq === i;
                  return (
                    <div
                      key={i}
                      className={`border border-[#bc9e65] rounded-2xl overflow-hidden cursor-pointer transition-all duration-300 relative
                        ${isOpen ? "bg-[#0a2e1f] shadow-inner" : "bg-[#062013] hover:bg-[#0a2a1c]"}`}
                      onClick={() => setOpenFaq(isOpen ? null : i)}
                    >
                      <div className="flex items-center justify-between px-5 py-4 sm:px-8 sm:py-5 gap-4 relative z-10">
                        {/* Icon on left */}
                        <div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-full border border-[#bc9e65] text-[#bc9e65]">
                          {f.icon}
                        </div>

                        {/* Text Content */}
                        <div className="flex-1">
                          <span className={`font-serif text-base sm:text-lg tracking-wide transition-colors duration-300 ${isOpen ? "text-white" : "text-white"}`}>
                            {f.q}
                          </span>

                          <AnimatePresence initial={false}>
                            {isOpen && (
                              <motion.div
                                initial={{ height: 0, opacity: 0, marginTop: 0 }}
                                animate={{ height: "auto", opacity: 1, marginTop: 12 }}
                                exit={{ height: 0, opacity: 0, marginTop: 0 }}
                                transition={{ duration: 0.3 }}
                                style={{ overflow: "hidden" }}
                              >
                                <p className="font-sans text-[#e8dcb5] text-sm leading-relaxed tracking-wide pb-2 pr-4 border-t border-[#bc9e65]/20 pt-4">
                                  {f.a}
                                </p>
                              </motion.div>
                            )}
                          </AnimatePresence>
                        </div>

                        {/* Right plus/minus indicator */}
                        <div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-[#bc9e65] text-[#bc9e65]">
                          <motion.span
                            animate={{ rotate: isOpen ? 180 : 0 }}
                            transition={{ duration: 0.3 }}
                            className="text-lg leading-none font-light"
                          >
                            {isOpen ? "−" : "+"}
                          </motion.span>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Still have questions block */}
              <div className="mt-8 w-[95%] sm:w-[85%] max-w-xl mx-auto border border-[#bc9e65] rounded-2xl bg-[#082418] px-6 py-5 flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-6 shadow-md relative">
                <div className="flex items-center gap-4 relative z-10">
                  <div className="w-10 h-10 rounded-full border border-[#bc9e65] text-[#bc9e65] flex items-center justify-center shrink-0">
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                  </div>
                  <div className="flex flex-col text-left">
                    <span className="font-serif text-[#bc9e65] text-lg tracking-wide">Still have questions?</span>
                    <span className="font-sans text-[#e8dcb5] text-xs uppercase tracking-wider">We're happy to help!</span>
                  </div>
                </div>
                <Link
                  href="/contact"
                  className="relative z-10 px-8 py-3 bg-gradient-to-r from-[#d9b876] to-[#bc9e65] hover:from-[#e8dcb5] hover:to-[#d9b876] text-[#1a3a25] font-serif font-bold text-xs tracking-widest uppercase transition-all duration-300 rounded shadow-md shrink-0 whitespace-nowrap border-[1.5px] border-[#bc9e65]"
                >
                  CONTACT US →
                </Link>
              </div>

            </AnimatedSection>
          </div>

          {/* ── RIGHT: photo full height ── */}
          <div className="relative w-full lg:w-[40%] min-h-[400px] lg:min-h-0 z-0 bg-[#062013]">
            <Image
              src="/images/my_dosa_place_interior.png"
              alt="My Dosa Place interior"
              fill
              className="object-cover object-center"
            />
            {/* Dark gradient overlay matching reference */}
            <div className="absolute inset-0 bg-gradient-to-l from-transparent via-[#062013]/20 to-[#062013] opacity-90" />

            {/* Hanging lights accents in the photo side */}
            <div className="absolute top-10 right-10 flex items-center justify-center w-8 h-8 rounded-full border border-[#bc9e65] text-[#bc9e65]">
              <div className="w-2 h-2 rounded-full bg-[#bc9e65]" />
            </div>
          </div>

        </div>

        {/* ── BOTTOM FEATURE BAR ── */}
        <div className="relative max-w-[1400px] mx-auto w-[90%] sm:w-[85%] lg:w-[78%] bg-[#062013] border border-[#bc9e65] rounded-2xl lg:rounded-full px-6 sm:px-8 py-6 shadow-2xl z-30 mb-8 mt-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10">
            {/* Feature 1 */}
            <div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
              <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" /></svg>
              </div>
              <div className="flex flex-col text-left pr-4">
                <span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">AUTHENTIC RECIPES</span>
                <span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">Traditional flavours passed down through generations.</span>
              </div>
            </div>
            {/* Feature 2 */}
            <div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
              <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
              </div>
              <div className="flex flex-col text-left pr-4">
                <span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">FINEST INGREDIENTS</span>
                <span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">Handpicked ingredients for exceptional taste.</span>
              </div>
            </div>
            {/* Feature 3 */}
            <div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
              <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
              </div>
              <div className="flex flex-col text-left pr-4">
                <span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">MADE WITH LOVE</span>
                <span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">Every dish is crafted with passion and care.</span>
              </div>
            </div>
            {/* Feature 4 */}
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
              </div>
              <div className="flex flex-col text-left">
                <span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">WARM HOSPITALITY</span>
                <span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">A cozy place where every guest feels like family.</span>
              </div>
            </div>
          </div>
        </div>

      </div>

      {/* ══════════════════════════════════════════
          SECTION 4 — CTA  (sandstone bg, ornate border)
      ══════════════════════════════════════════ */}
      <div className="relative w-full bg-[#fdfaf4] p-4 sm:p-6 lg:p-8">

        {/* The Outer Ornate Gold Border Container */}
        <div className="relative w-full border-[1.5px] border-[#bc9e65] min-h-[700px] flex flex-col justify-between overflow-visible">

          {/* Corner ornaments */}
          {/* Top Left */}
          <div className="absolute top-0 left-0 w-16 h-16 pointer-events-none">
            <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
              <path d="M0,0 L50,0 Q50,50 0,50 Z" />
              <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
            </svg>
          </div>
          {/* Top Right */}
          <div className="absolute top-0 right-0 w-16 h-16 pointer-events-none transform rotate-90">
            <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
              <path d="M0,0 L50,0 Q50,50 0,50 Z" />
              <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
            </svg>
          </div>
          {/* Bottom Left */}
          <div className="absolute bottom-0 left-0 w-16 h-16 pointer-events-none transform -rotate-90">
            <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
              <path d="M0,0 L50,0 Q50,50 0,50 Z" />
              <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
            </svg>
          </div>
          {/* Bottom Right */}
          <div className="absolute bottom-0 right-0 w-16 h-16 pointer-events-none transform rotate-180">
            <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
              <path d="M0,0 L50,0 Q50,50 0,50 Z" />
              <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
            </svg>
          </div>

          {/* Background Image: story_bg.png has the pots and leaves and temple/palace */}
          <div className="absolute inset-0 pointer-events-none z-0">
            <Image src="/images/story_bg.png" alt="" fill className="object-cover object-bottom opacity-80 mix-blend-multiply" />
          </div>

          {/* Center Content */}
          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 pt-14 sm:pt-24 pb-8 flex flex-col items-center text-center">

            {/* Top Lotus Icon with wings */}
            <div className="flex items-center justify-center gap-4 mb-4">
              <div className="w-12 h-[1.5px] bg-gradient-to-r from-transparent to-[#bc9e65]" />
              <svg className="w-8 h-8 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
              </svg>
              <div className="w-12 h-[1.5px] bg-gradient-to-l from-transparent to-[#bc9e65]" />
            </div>

            <p className="font-sans text-[11px] tracking-[0.3em] text-[#8a6c3a] uppercase font-bold mb-4">
              Come Dine With Us
            </p>

            <h2 className="font-serif text-xl sm:text-3xl lg:text-5xl text-[#1a3a25] tracking-wide leading-tight mb-2">
              EXPERIENCE THE TASTE OF
            </h2>

            <h2 className="font-serif text-4xl sm:text-6xl lg:text-[90px] text-transparent bg-clip-text bg-gradient-to-b from-[#d9b876] to-[#8a6c3a] tracking-widest leading-none mb-6 drop-shadow-sm font-bold" style={{ textShadow: "0px 4px 15px rgba(188,158,101,0.3)" }}>
              TRADITION
            </h2>

            <div className="flex justify-center mb-8">
              <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
              </svg>
            </div>

            <p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-10 max-w-lg mx-auto">
              Visit us or order online and let every bite take you on a journey of authentic South Indian flavors.
            </p>

            <Link
              href="/reservation"
              className="inline-flex items-center gap-3 px-8 sm:px-12 py-4 sm:py-5 bg-gradient-to-r from-[#e8dcb5] via-[#d9b876] to-[#e8dcb5] text-[#1a3a25] font-sans font-bold text-[12px] sm:text-[13px] tracking-widest uppercase transition-all duration-300 shadow-[0_10px_20px_rgba(188,158,101,0.3)] hover:shadow-[0_15px_25px_rgba(188,158,101,0.4)] hover:-translate-y-1 relative"
              style={{
                clipPath: "polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px)"
              }}
            >
              {/* Inner subtle border effect */}
              <div className="absolute inset-[3px] border border-[#8a6c3a]/30 pointer-events-none" style={{
                clipPath: "polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px)"
              }} />

              <svg className="w-5 h-5 relative z-10 text-[#1a3a25]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" /></svg>
              <span className="relative z-10">RESERVE A TABLE</span>
            </Link>
          </div>

          {/* Bottom Bar inserted here */}
          <div className="relative z-10 w-[95%] max-w-[1200px] mx-auto mb-10 mt-12 bg-[#fdfaf4]/90 backdrop-blur-sm border border-[#bc9e65] rounded-xl px-6 py-8 shadow-[0_15px_30px_rgba(0,0,0,0.05)]" style={{
            clipPath: "polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px)"
          }}>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10">
              {/* Feature 1 */}
              <div className="flex items-center justify-center gap-4 lg:border-r border-[#bc9e65]/30 px-2">
                <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" /></svg>
                </div>
                <div className="flex flex-col text-left">
                  <span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">AUTHENTIC RECIPES</span>
                  <span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">Traditional flavors passed down through generations.</span>
                </div>
              </div>
              {/* Feature 2 */}
              <div className="flex items-center justify-center gap-4 lg:border-r border-[#bc9e65]/30 px-2">
                <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
                </div>
                <div className="flex flex-col text-left">
                  <span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">FINEST INGREDIENTS</span>
                  <span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">Handpicked ingredients for exceptional taste and quality.</span>
                </div>
              </div>
              {/* Feature 3 */}
              <div className="flex items-center justify-center gap-4 lg:border-r border-[#bc9e65]/30 px-2">
                <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                </div>
                <div className="flex flex-col text-left">
                  <span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">MADE WITH LOVE</span>
                  <span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">Every dish is crafted with passion and dedication.</span>
                </div>
              </div>
              {/* Feature 4 */}
              <div className="flex items-center justify-center gap-4 px-2">
                <div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                </div>
                <div className="flex flex-col text-left">
                  <span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">WARM HOSPITALITY</span>
                  <span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">A cozy place where every guest feels like family.</span>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom center divider icon below feature bar overlapping the border */}
          {/* <div className="absolute bottom-[-14px] left-1/2 -translate-x-1/2 bg-[#fdfaf4] px-4 z-20 hidden md:block">
             <svg className="w-7 h-7 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
               <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
             </svg>
          </div> */}

        </div>
      </div>

      </div>{/* end overflow-x-hidden wrapper */}
    </SubpageLayout>
  );
}
