"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: "Yes! We have a wide range of delicious vegan dishes made with the finest ingredients.",
  },
  {
    q: "Where do you source your ingredients?",
    a: "We partner with local and trusted suppliers to bring you the freshest, highest-quality South Indian ingredients every day.",
  },
  {
    q: "Do you provide catering services?",
    a: "Absolutely! We offer full catering for private events, corporate gatherings, weddings, and celebrations. Contact us to discuss your needs.",
  },
  {
    q: "What are your opening hours?",
    a: "Mon–Thu: 4pm–10pm · Fri–Sun: 11am–10pm",
  },
];

/* ─── Values Data ───────────────────────────────────── */
const values = [
  {
    label: "Quality",
    desc: "Every dish crafted with the finest ingredients.",
    icon: (
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
        <path d="M24 4l5.5 11.2L42 17l-9 8.8 2.1 12.4L24 32.4 12.9 38.2 15 25.8 6 17l12.5-1.8z" />
      </svg>
    ),
  },
  {
    label: "Sustainability",
    desc: "Our thinking practices support responsible.",
    icon: (
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
        <path d="M24 6c0 0-14 8-14 20a14 14 0 0028 0C38 14 24 6 24 6z" />
        <path d="M24 20v16M18 30l6-6 6 6" />
      </svg>
    ),
  },
  {
    label: "Passion",
    desc: "Dedication and love poured into every recipe.",
    icon: (
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
        <path d="M24 38s-14-8.5-14-18a8 8 0 0114-5.3A8 8 0 0138 20c0 9.5-14 18-14 18z" />
      </svg>
    ),
  },
  {
    label: "Community",
    desc: "Building bonds and bringing people together.",
    icon: (
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
        <circle cx="18" cy="18" r="6" />
        <circle cx="30" cy="18" r="6" />
        <path d="M6 40c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12" />
      </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>

      {/* ── Inner Banner ── */}
      <InnerBanner pageName="About" />

      {/* ══════════════════════════════════════════
          SECTION 1 — Welcome  (sandstone bg)
      ══════════════════════════════════════════ */}
      <div className="relative w-full">
        <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-center" />
        </div>

        <div className="relative z-10 max-w-6xl mx-auto px-6 py-16 sm:py-20">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">

            {/* Text */}
            <AnimatedSection variant="fadeLeft" delay={0.1}>
              <div className="select-text">
                <p className="font-sans text-[11px] tracking-[0.3em] text-[#8a6c3a] uppercase font-bold mb-3">
                  Welcome to
                </p>
                <h1 className="font-serif text-4xl sm:text-5xl lg:text-[52px] text-[#1a3a25] leading-tight mb-6">
                  My Dosa Place
                </h1>
                <div className="w-16 h-[1.5px] bg-[#bc9e65] mb-6" />
                <p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-4">
                  Nestled in the heart of Waterloo, My Dosa Place is a celebration of authentic South Indian cuisine — where every dish tells a story rooted in tradition, love, and the finest ingredients.
                </p>
                <p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-4">
                  From our crispy, golden dosas to rich, aromatic curries, each recipe has been carefully crafted to honour the culinary heritage of South India. We believe that great food brings people together, and that every meal should be an experience to remember.
                </p>
                <p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-8">
                  Our doors are open to families, friends, and anyone seeking a warm and cozy dining experience, from the streets of Waterloo all the way to South Indian flavours.
                </p>
                <Link
                  href="/contact"
                  className="inline-flex items-center gap-2 px-8 py-3.5 bg-[#1a3a25] hover:bg-[#8a6c3a] text-white font-sans font-bold text-[10px] tracking-widest uppercase transition-all duration-300 shadow-md hover:shadow-lg rounded-sm mt-2"
                >
                  Contact Us <span className="text-sm leading-none">→</span>
                </Link>
              </div>
            </AnimatedSection>

            {/* Photo */}
            <AnimatedSection variant="fadeRight" delay={0.2}>
              <div className="relative flex justify-center lg:justify-end items-center">
                <div className="relative shadow-2xl border-4 border-white/60 rounded-sm inline-flex">
                  <Image
                    src="/images/about.png"
                    alt="My Dosa Place exterior"
                    width={600}
                    height={800}
                    className="w-full h-auto object-contain max-w-[500px]"
                  />
                </div>
                {/* <div className="absolute -bottom-4 -right-4 w-24 h-24 pointer-events-none opacity-60 select-none hidden lg:block">
                <Image src="/images/menu_leaf_right.png" alt="" fill className="object-contain" />
              </div> */}
              </div>
            </AnimatedSection>
          </div>
        </div>
      </div>

      {/* ══════════════════════════════════════════
          SECTION 2 — Our Values  (dark green bg)
      ══════════════════════════════════════════ */}
      <div className="relative w-full bg-[#04120a]">
        <div className="absolute inset-0 pointer-events-none select-none">
          <Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
        </div>
        <div className="absolute inset-0 bg-[#040d08]/70 pointer-events-none" />

        <div className="relative z-10 max-w-6xl mx-auto px-6 py-20 sm:py-24 text-center">
          <AnimatedSection variant="fadeUp" delay={0}>
            <h2 className="font-serif text-3xl sm:text-[40px] text-[#e8dcb5] tracking-wider mb-20">
              Our Values
            </h2>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 sm:gap-0">
            {values.map((v, i) => (
              <AnimatedSection key={v.label} variant="fadeUp" delay={i * 0.12}>
                <div
                  className={`flex flex-col items-center text-center group ${i !== values.length - 1 ? 'md:border-r border-[#bc9e65]/20' : ''
                    } px-4 sm:px-8`}
                >
                  <div className="relative flex items-center justify-center mb-6">
                    {/* subtle glow behind icon */}
                    <div className="absolute inset-0 bg-[#163823] rounded-full blur-[20px] scale-[1.5] opacity-50 group-hover:opacity-80 transition-opacity duration-300"></div>
                    <div className="relative z-10 text-[#bc9e65] group-hover:scale-110 transition-transform duration-300">
                      {v.icon}
                    </div>
                  </div>
                  <h3 className="font-serif text-[#bc9e65] text-lg mb-3 tracking-wide">{v.label}</h3>
                  <p className="font-sans text-[#e8dcb5]/70 text-[11px] uppercase tracking-widest leading-[1.8]">{v.desc}</p>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </div>

      {/* ══════════════════════════════════════════
          SECTION 2.5 — Testimonials (sandstone bg)
      ══════════════════════════════════════════ */}
      <div className="relative w-full">
        <div className="absolute inset-0 z-0 pointer-events-none select-none">
          <Image src="/images/story_bg.png" alt="" fill className="object-cover object-center" />
        </div>
        <div className="absolute inset-0 bg-[#f5e9d0]/40 pointer-events-none" />

        <div className="relative z-10 max-w-6xl mx-auto px-6 py-16 sm:py-20 text-center">
          <AnimatedSection variant="fadeUp">
            <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-3xl sm:text-4xl text-[#1a3a25] tracking-wider mb-3">
              What Our Guests Say
            </h2>
            <div className="w-16 h-[1.5px] bg-[#bc9e65] mx-auto mb-14" />
          </AnimatedSection>

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

      {/* ══════════════════════════════════════════
          SECTION 3 — FAQ  (full-width split layout)
          LEFT: dark green bg + accordion
          RIGHT: interior photo full height
      ══════════════════════════════════════════ */}
      <div className="w-full flex flex-col lg:flex-row" style={{ minHeight: "420px" }}>

        {/* ── LEFT: dark green panel ── */}
        <div className="relative flex-1 bg-[#071a0e]">
          {/* subtle bg texture */}
          <div className="absolute inset-0 pointer-events-none">
            <Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
          </div>
          <div className="absolute inset-0 bg-[#050f08]/65 pointer-events-none" />

          {/* gold border – right edge only on desktop, bottom edge on mobile */}
          <div className="absolute top-0 right-0 bottom-0 w-px bg-[#bc9e65]/30 hidden lg:block" />

          <div className="relative z-10 px-8 sm:px-12 lg:px-16 py-12 lg:py-16">
            <AnimatedSection variant="fadeLeft" delay={0.1}>
              <h2 className="font-serif text-3xl sm:text-4xl text-white tracking-wide mb-8">
                Frequently Asked Questions
              </h2>

              {/* FAQ accordion */}
              <div className="space-y-2">
                {faqs.map((f, i) => {
                  const isOpen = openFaq === i;
                  return (
                    <div
                      key={i}
                      className={`border border-[#bc9e65]/25 cursor-pointer transition-colors duration-300 rounded-sm overflow-hidden ${isOpen ? "bg-[#0a2012]" : "bg-[#091810] hover:bg-[#0c2016]"
                        }`}
                      onClick={() => setOpenFaq(isOpen ? null : i)}
                    >
                      {/* question row */}
                      <div className="flex items-center justify-between px-5 py-4 gap-4">
                        <span className={`font-sans text-sm tracking-wide transition-colors duration-300 ${isOpen ? "text-white" : "text-stone-300"
                          }`}>
                          {f.q}
                        </span>
                        <motion.span
                          animate={{ rotate: isOpen ? 45 : 0 }}
                          transition={{ duration: 0.25, ease: "easeInOut" }}
                          className="text-[#bc9e65] text-2xl leading-none shrink-0 font-light select-none"
                        >
                          +
                        </motion.span>
                      </div>
                      {/* answer — smooth height animation */}
                      <AnimatePresence initial={false}>
                        {isOpen && (
                          <motion.div
                            key="answer"
                            initial={{ height: 0, opacity: 0 }}
                            animate={{ height: "auto", opacity: 1 }}
                            exit={{ height: 0, opacity: 0 }}
                            transition={{ duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}
                            style={{ overflow: "hidden" }}
                          >
                            <p className="font-sans text-stone-300 text-sm leading-relaxed px-5 pb-5 tracking-wide">
                              {f.a}
                            </p>
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </div>
                  );
                })}
              </div>
            </AnimatedSection>
          </div>
        </div>

        {/* ── RIGHT: photo full height ── */}
        <div className="relative w-full lg:w-[42%] min-h-[280px] lg:min-h-0">
          <Image
            src="/images/my_dosa_place_interior.png"
            alt="My Dosa Place interior"
            fill
            className="object-cover object-center"
          />
          {/* warm dark fade on the left edge blending into green panel */}
          <div className="absolute inset-0 bg-gradient-to-r from-[#050f08]/50 via-transparent to-transparent" />
        </div>

      </div>

      {/* ══════════════════════════════════════════
          SECTION 4 — CTA  (sandstone bg)
      ══════════════════════════════════════════ */}
      <div className="relative w-full">
        <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" />
        </div>
        <div className="absolute inset-0 bg-[#f5e9d0]/30 pointer-events-none" />

        <div className="relative z-10 max-w-3xl mx-auto px-6 py-20 sm:py-24 text-center">
          <AnimatedSection variant="scaleUp" delay={0}>
            <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-3xl sm:text-4xl lg:text-5xl text-[#1a3a25] tracking-wide leading-tight mb-4">
              Experience the Taste of Tradition
            </h2>
            <div className="w-16 h-[1.5px] bg-[#bc9e65] mx-auto mb-6" />
            <p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-10 max-w-xl 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-10 py-4 bg-[#1a3a25] hover:bg-[#0c2419] text-[#bc9e65] font-sans font-bold text-sm tracking-widest uppercase transition-all duration-300 shadow-lg hover:shadow-xl rounded-sm"
            >
              Reserve a Table
            </Link>
          </AnimatedSection>
        </div>
      </div>

    </SubpageLayout>
  );
}
