"use client";

import { useEffect, useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

export default function RestaurantStory() {
  const sectionRef = useRef<HTMLDivElement>(null);
  const parchmentRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLHeadingElement>(null);
  
  // Framer Motion scroll tracking for simple parallax of background and frames
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start end", "end start"],
  });

  const yBackground = useTransform(scrollYProgress, [0, 1], ["-10%", "10%"]);
  const yImage1 = useTransform(scrollYProgress, [0, 1], ["0%", "-15%"]);
  const yImage2 = useTransform(scrollYProgress, [0, 1], ["10%", "-5%"]);

  useEffect(() => {
    const parchment = parchmentRef.current;
    if (!parchment) return;

    const ctx = gsap.context(() => {
      // Vintage paper reveal: expands vertically like a scroll unrolling
      gsap.fromTo(
        parchment,
        {
          clipPath: "polygon(0 48%, 100% 48%, 100% 52%, 0 52%)",
          scale: 0.95,
        },
        {
          clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
          scale: 1,
          duration: 2,
          ease: "power3.inOut",
          scrollTrigger: {
            trigger: parchment,
            start: "top 80%",
            end: "top 30%",
            scrub: true,
          },
        }
      );

      // Text ink reveal: lines fade and spread slightly on scroll
      const textLines = parchment.querySelectorAll(".ink-reveal");
      textLines.forEach((line) => {
        gsap.fromTo(
          line,
          { opacity: 0.1, filter: "blur(4px)", y: 15 },
          {
            opacity: 1,
            filter: "blur(0px)",
            y: 0,
            duration: 1.2,
            scrollTrigger: {
              trigger: line,
              start: "top 85%",
              end: "top 60%",
              scrub: true,
            },
          }
        );
      });
    }, parchment);

    return () => ctx.revert();
  }, []);

  const timelineEvents = [
    {
      year: "1928",
      title: "The Palace Foundation",
      text: "Our journey began in a grand Chettinad palace. Built with Burmese teak and Italian marble, the mansion served as a sanctuary of hospitality, welcoming royal emissaries and regional chieftains with legendary feasts.",
    },
    {
      year: "1972",
      title: "Preserving Ancient Spices",
      text: "The royal recipes were transcribed from palm leaves. Master spice-blenders preserved the art of hand-pounding cardamoms, cinnamon, and red sun-dried chilies in stone mortars, ensuring the flavors remained pristine.",
    },
    {
      year: "2026",
      title: "The Modern Legacy Sanctuary",
      text: "Today, My Dosa Place brings this heritage into the modern era. We unite century-old cooking methodologies with contemporary culinary presentation, inviting you to dine like royalty in Waterloo.",
    },
  ];

  return (
    <section
      ref={sectionRef}
      className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center items-center overflow-hidden bg-[#f6f3ea]"
    >
      {/* 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="container max-w-6xl relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
        
        {/* Left Side: Vintage Parchment Scroll */}
        <div className="lg:col-span-7 w-full">
          <div
            ref={parchmentRef}
            className="relative w-full py-16 px-8 md:px-12 rounded-lg shadow-xl border border-gold/30 overflow-hidden"
            style={{
              background: "linear-gradient(135deg, #fcf9f2 0%, #f6eeda 100%)",
              boxShadow: "inset 0 0 35px rgba(24, 135, 84, 0.05), 0 20px 40px -10px rgba(28, 45, 36, 0.08)",
            }}
          >
            {/* Distressed Paper Edges and Watermark */}
            <div className="absolute inset-0 bg-[radial-gradient(#cda570_1px,transparent_1px)] [background-size:24px_24px] opacity-10 pointer-events-none" />
            <div className="absolute inset-4 border border-maroon/10 pointer-events-none" />
            <div className="absolute inset-[18px] border-2 border-double border-maroon/20 pointer-events-none" />

            {/* Brass Corner Accents */}
            <div className="absolute top-4 left-4 w-4 h-4 border-t border-l border-maroon/40" />
            <div className="absolute top-4 right-4 w-4 h-4 border-t border-r border-maroon/40" />
            <div className="absolute bottom-4 left-4 w-4 h-4 border-b border-l border-maroon/40" />
            <div className="absolute bottom-4 right-4 w-4 h-4 border-b border-r border-maroon/40" />

            {/* Scroll Header */}
            <div className="text-center mb-12 flex flex-col items-center">
              <span className="font-sans text-[10px] tracking-[0.4em] uppercase text-maroon-light font-bold mb-2">
                O U R   C H R O N I C L E S
              </span>
              <h2
                ref={titleRef}
                className="font-serif text-3xl md:text-5xl font-bold tracking-wide text-maroon uppercase"
              >
                OUR DOSA CHRONICLES
              </h2>
              <div className="w-20 h-[1.5px] bg-maroon/30 mt-3" />
            </div>

            {/* Timeline List */}
            <div className="flex flex-col gap-10 relative pl-4 md:pl-8 border-l border-maroon/15">
              {timelineEvents.map((event, idx) => (
                <div key={idx} className="relative group ink-reveal">
                  {/* Timeline Node Ring */}
                  <div className="absolute -left-[21px] md:-left-[37px] top-1.5 w-[13px] h-[13px] rounded-full bg-[#eae0d0] border-[3px] border-maroon group-hover:scale-125 transition-transform duration-300 shadow-sm" />
                  
                  {/* Event Meta */}
                  <div className="flex flex-col md:flex-row md:items-baseline gap-1 md:gap-4 mb-2">
                    <span className="font-serif text-xl md:text-2xl font-black text-maroon-light tracking-wider">
                      {event.year}
                    </span>
                    <h3 className="font-serif text-base md:text-lg font-bold text-wood uppercase tracking-wider">
                      {event.title}
                    </h3>
                  </div>

                  {/* Event Text */}
                  <p className="font-sans text-sm text-stone-800 leading-relaxed max-w-lg">
                    {event.text}
                  </p>
                </div>
              ))}
            </div>

            {/* Bottom Seal Decoration */}
            <div className="flex justify-center mt-12">
              <div className="w-10 h-10 rounded-full border border-maroon/30 flex items-center justify-center font-serif text-[10px] text-maroon font-bold tracking-wider relative">
                DR
                <div className="absolute inset-1 border border-dashed border-maroon/20 rounded-full" />
              </div>
            </div>

          </div>
        </div>

        {/* Right Side: Vintage Framed Pictures with Parallax */}
        <div className="lg:col-span-5 flex flex-col gap-8 relative items-center justify-center">
          
          {/* Framed Image 1: Mansion Detail */}
          <motion.div
            className="w-72 h-96 relative border-8 border-wood bg-darkbg rounded shadow-[0_15px_35px_rgba(0,0,0,0.6)] p-2 z-10"
            style={{ y: yImage1 }}
          >
            {/* Brass Inner Frame Border */}
            <div className="absolute inset-1 border border-gold-dark/40" />
            <div className="w-full h-full relative overflow-hidden">
              <Image
                src="/images/my_dosa_place_interior_royal.jpg"
                alt="Vintage Teak Columns"
                fill
                sizes="(max-width: 768px) 100vw, 30vw"
                className="object-cover brightness-100 hover:scale-105 transition-transform duration-700"
              />
            </div>
            {/* Title Tag */}
            <div className="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-wood border border-gold/40 px-3 py-1 text-[10px] tracking-widest text-[#188754] uppercase font-serif font-bold">
              Circa 1928
            </div>
          </motion.div>

          {/* Framed Image 2: Gopuram Temple Arch styled layout */}
          <div className="relative self-end lg:-mr-12 -mt-16 z-20 flex flex-col items-center">
            <motion.div
              className="w-56 h-72 relative overflow-hidden shadow-2xl"
              style={{
                y: yImage2,
                clipPath: "url(#gopuram-arch)",
                WebkitClipPath: "url(#gopuram-arch)"
              }}
            >
              <div className="w-full h-full relative">
                <Image
                  src="/images/my_dosa_place_food_royal.png"
                  alt="Traditional Serving"
                  fill
                  sizes="(max-width: 768px) 100vw, 25vw"
                  className="object-cover brightness-100 hover:scale-105 transition-transform duration-700"
                />
              </div>
            </motion.div>
            
            {/* Title Tag (Placed outside the clip-path container so it isn't cropped) */}
            <div className="absolute -bottom-4 bg-wood border border-gold/40 px-3 py-1 text-[9px] tracking-widest text-[#188754] uppercase font-serif z-30 font-bold shadow-md">
              Royal Dining
            </div>
          </div>

          {/* Background Ambient Glow */}
          <div className="absolute w-80 h-80 rounded-full bg-maroon/20 blur-[100px] -z-10 pointer-events-none" />
        </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>

      </div>
    </section>
  );
}