"use client";

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

const ChefLotusOrnament = () => (
  <svg className="w-16 h-8 text-[#bc9e65] opacity-90 mb-1" viewBox="0 0 120 40" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M 60,5 C 55,18 57,32 60,35 C 63,32 65,18 60,5 Z" fill="currentColor" fillOpacity="0.1" />
    <path d="M 60,18 C 45,20 44,32 60,35" />
    <path d="M 60,18 C 75,20 76,32 60,35" />
    <path d="M 45,30 C 30,30 25,20 35,15 C 42,12 48,22 38,28 C 35,30 30,26 32,22" />
    <path d="M 75,30 C 90,30 95,20 85,15 C 78,12 72,22 82,28 C 85,30 90,26 88,22" />
    <circle cx="60" cy="35" r="2" fill="currentColor" />
  </svg>
);

const StoryLotusDivider = () => (
  <div className="flex items-center gap-4 my-4 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 ChefShowcase() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Sparks and Embers Canvas Animation (Overlaying chef image)
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animId: number;
    let width = (canvas.width = canvas.parentElement?.clientWidth || 450);
    let height = (canvas.height = canvas.parentElement?.clientHeight || 560);

    const handleResize = () => {
      if (!canvas.parentElement) return;
      width = canvas.width = canvas.parentElement.clientWidth;
      height = canvas.height = canvas.parentElement.clientHeight;
    };
    window.addEventListener("resize", handleResize);

    class Ember {
      x: number;
      y: number;
      vx: number;
      vy: number;
      size: number;
      life: number;
      maxLife: number;
      color: string;

      constructor() {
        // Start near the bottom-center of the cooking thali image
        this.x = width * 0.5 + (Math.random() - 0.5) * 160;
        this.y = height * 0.78 + (Math.random() - 0.5) * 40;
        this.vx = (Math.random() - 0.5) * 1.6;
        this.vy = -Math.random() * 2.8 - 1.2;
        this.size = Math.random() * 2.2 + 1.2;
        this.maxLife = Math.random() * 90 + 50;
        this.life = 0;
        this.color = Math.random() > 0.4 ? "244, 180, 26" : "230, 92, 23"; // Gold or Fire sparks
      }

      update() {
        this.x += this.vx;
        this.y += this.vy;
        this.life++;
        this.vx += (Math.random() - 0.5) * 0.12;
      }

      draw(c: CanvasRenderingContext2D) {
        const opacity = 1 - this.life / this.maxLife;
        c.save();
        c.beginPath();
        c.fillStyle = `rgba(${this.color}, ${opacity})`;
        c.shadowBlur = 6;
        c.shadowColor = `rgb(${this.color})`;
        c.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        c.fill();
        c.restore();
      }
    }

    const embers: Ember[] = [];
    const maxEmbers = 45;

    const render = () => {
      ctx.clearRect(0, 0, width, height);

      if (embers.length < maxEmbers && Math.random() > 0.35) {
        embers.push(new Ember());
      }

      for (let i = embers.length - 1; i >= 0; i--) {
        const e = embers[i];
        e.update();
        e.draw(ctx);

        if (e.life >= e.maxLife || e.y < 0) {
          embers.splice(i, 1);
        }
      }

      animId = requestAnimationFrame(render);
    };

    render();

    return () => {
      window.removeEventListener("resize", handleResize);
      cancelAnimationFrame(animId);
    };
  }, []);

  return (
    <section
      ref={containerRef}
      id="chef"
      className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden z-20"
    >
      {/* Backdrop Chef Showcase Background Image */}
      <div className="absolute inset-0 z-0 pointer-events-none select-none">
        <Image
          src="/images/home/chef/chef-bg.webp"
          alt="Chef Showcase Background"
          fill
          priority
          className="object-cover object-bottom"
        />
      </div>

      <div className="container max-w-7xl mx-auto relative z-10 flex flex-col gap-12 sm:gap-16">

        {/* Main 2-Column Info & Portrait Header */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">

          {/* Left Column: Chef Details */}
          <motion.div
            initial={{ opacity: 0, x: -45 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="lg:col-span-7 flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text"
          >

            <div className="flex flex-col items-center lg:items-start mb-2">
              <ChefLotusOrnament />
              <span className="font-sans text-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
                — OUR MASTER CHEF —
              </span>
            </div>

            <h2 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-bold tracking-wider text-white uppercase leading-tight mb-4 select-text">
              CHEF <br />
              Mendia <br />
              <span className="text-[#bc9e65] flex items-center justify-center lg:justify-start gap-3">
                Juxef
                <svg className="w-7 h-7 text-[#bc9e65]/80 inline-block" viewBox="0 0 30 20" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                  <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>
              </span>
            </h2>

            <span className="font-sans text-[#bc9e65] text-sm sm:text-lg tracking-[0.3em] font-bold block mb-6 uppercase">
              Heritage. Passion. Perfection.
            </span>

            <StoryLotusDivider />

            <p className="font-sans text-sm sm:text-base text-stone-200 leading-relaxed tracking-wider max-w-2xl mb-8">
              With three decades of culinary devotion, Chef Mendia Juxef has traversed the villages of Tamil Nadu, uncovering regional temple recipes and masterfully blending heritage masalas. He believes that true gastronomy is a spiritual act, uniting soil, tradition, and warm wood fire.
            </p>

            {/* Cursive Signature */}
            <div className="mt-2 h-12 flex items-center">
              <span
                className="text-[#bc9e65] text-3xl md:text-4xl pointer-events-none select-none"
                style={{ fontFamily: '"Playball", "Great Vibes", "Brush Script MT", cursive' }}
              >
                Mendia Juxef
              </span>
            </div>

          </motion.div>

          {/* Right Column: Chef Cooking Portrait with Overlay Badge */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 30 }}
            whileInView={{ opacity: 1, scale: 1, y: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.85, ease: "easeOut" }}
            className="lg:col-span-5 flex justify-center relative"
          >

            {/* 30+ Years Experience Badge Overlay */}
            <div className="absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
              <div className="absolute inset-1.5 border border-[#bc9e65]/35 rounded-full pointer-events-none" />
              {/* Gold Flower Icon */}
              <svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10 2L11.5 7L16 8L11.5 9L10 14L8.5 9L4 8L8.5 7Z" />
              </svg>
              <span className="font-serif text-lg sm:text-[18px] font-bold text-[#bc9e65] leading-none">30+</span>
              <span className="font-sans text-[7px] sm:text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mt-0.5">Years</span>
              <span className="font-sans text-[6px] sm:text-[7px] tracking-[0.1em] text-[#e4d7bc] uppercase font-semibold leading-relaxed mt-0.5 max-w-[80px]">Of Culinary Excellence</span>
            </div>

            {/* Seamless Image Wrapper */}
            <div className="relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">

              {/* Portrait Image */}
              <Image
                src="/images/home/chef/chef-right-img.webp"
                alt="Chef Mendia Juxef Cooking with Fire"
                fill
                priority
                sizes="(max-width: 768px) 100vw, 35vw"
                className="object-cover group-hover:scale-103 transition-transform duration-[2s] brightness-[0.9] contrast-[1.03]"
              />

              {/* Sparks/Embers Canvas Overlay */}
              <canvas
                ref={canvasRef}
                className="absolute inset-0 z-20 pointer-events-none mix-blend-screen"
              />
            </div>

          </motion.div>

        </div>

        {/* Middle Highlights Card Section */}
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7, delay: 0.1, ease: "easeOut" }}
          className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text"
        >

          {/* Feature 1: Authentic Recipes */}
          <div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
            <Image src="/images/home/chef/icons/chef-authentic.webp" alt="Authentic Recipes" width={45} height={45} className="object-contain mb-2.5" />
            <h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Authentic Recipes</h5>
            <p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">Traditional recipes passed down through generations.</p>
          </div>

          {/* Feature 2: Pure Vegetarian */}
          <div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
            <Image src="/images/home/chef/icons/chef-pure-veg.webp" alt="Pure Vegetarian" width={45} height={45} className="object-contain mb-2.5" />
            <h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Pure Vegetarian</h5>
            <p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">100% pure veg, made with the finest natural ingredients.</p>
          </div>

          {/* Feature 3: Wood Fire Cooking */}
          <div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
            <Image src="/images/home/chef/icons/chef-wood.webp" alt="Wood Fire Cooking" width={45} height={45} className="object-contain mb-2.5" />
            <h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Wood Fire Cooking</h5>
            <p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">Infused with the aroma of wood fire and heritage.</p>
          </div>

          {/* Feature 4: Cooked With Love */}
          <div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
            <Image src="/images/home/chef/icons/chef-love.webp" alt="Cooked With Love" width={45} height={45} className="object-contain mb-2.5" />
            <h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Cooked With Love</h5>
            <p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
          </div>

        </motion.div>

        {/* Bottom Section: Quote on the Left & Spices Parchment Card on the Right */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center mt-6">

          {/* Bottom Left: Gopuram Sketch Background & Large Narrative Quote */}
          <motion.div
            initial={{ opacity: 0, x: -35 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="lg:col-span-5 relative flex flex-col justify-center min-h-[160px] pl-4 sm:pl-6 select-text"
          >
            {/* Quote details */}
            <div className="relative z-10 select-text text-left">
              <span className="text-[#c62828] text-7xl font-serif leading-none select-none block -mb-4">“</span>
              <p className="font-sans text-stone-200 text-sm sm:text-base lg:text-lg leading-relaxed tracking-wider font-semibold italic max-w-[85%]">
                Food is not just to satisfy hunger, it is to honor our roots, our culture and the land that nourishes us.
              </p>

              {/* Gold Ornament Divider */}
              <div className="flex items-center gap-3 w-32 mt-4 select-none pointer-events-none">
                <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
                <svg className="w-5 h-4 text-[#bc9e65] opacity-75" 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-[#bc9e65] to-transparent" />
              </div>
            </div>
          </motion.div>

          {/* Bottom Right: Spices Parchment Card */}
          <motion.div
            initial={{ opacity: 0, x: 35 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="lg:col-span-7 flex justify-end"
          >
            <div className="w-full max-w-[620px] relative bg-[#fdfcf7]/95 border border-[#d8c396]/55 rounded-none p-5 sm:p-8 min-h-[160px] shadow-[0_15px_30px_rgba(0,0,0,0.5)] flex flex-col justify-center overflow-visible select-text text-left">

              {/* Inner border line overlay */}
              <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />

              {/* Notched corners masks matching vignette border bg-[#0a1c12] */}
              <div className="absolute -top-[1px] -left-[1px] w-3 h-3 bg-[#0a1c12] rounded-br-full border-r border-b border-[#d8c396]/55 z-20 pointer-events-none" />
              <div className="absolute -top-[1px] -right-[1px] w-3 h-3 bg-[#0a1c12] rounded-bl-full border-l border-b border-[#d8c396]/55 z-20 pointer-events-none" />
              <div className="absolute -bottom-[1px] -left-[1px] w-3 h-3 bg-[#0a1c12] rounded-tr-full border-r border-t border-[#d8c396]/55 z-20 pointer-events-none" />
              <div className="absolute -bottom-[1px] -right-[1px] w-3 h-3 bg-[#0a1c12] rounded-tl-full border-l border-t border-[#d8c396]/55 z-20 pointer-events-none" />

              {/* Text content details */}
              <div className="relative z-10 flex flex-col gap-1.5 pl-2 max-w-[95%]">
                <span className="font-sans text-sm sm:text-base tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none">
                  — THE ESSENCE OF —
                </span>

                <h4 className="font-serif text-lg sm:text-lg font-bold text-[#a83232] tracking-wider uppercase mb-1">
                  Heritage Spices
                </h4>

                <p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed max-w-[85%]">
                  Handpicked spices from the best regions of India, blended with time-honored techniques to create unforgettable flavors.
                </p>

                {/* Explorer Button */}
                <div className="mt-3 select-none">
                  <a
                    href="#menu"
                    className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-[#0a4a2b] border border-[#d8c396]/80 text-base font-sans font-bold text-[#fcfaf2] tracking-[0.15em] uppercase hover:bg-[#0c5030] hover:border-[#bc9e65] transition-all duration-300 shadow-md"
                  >
                    Explore Our Menu →
                  </a>
                </div>
              </div>



            </div>
          </motion.div>

        </div>

      </div>

      {/* Rooted Traditional Footer Banner */}
      <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-3 pointer-events-none select-none z-10">
        <div className="container max-w-7xl mx-auto px-6 text-center">
          <span className="font-serif text-sm sm:text-base tracking-[0.25em] text-[#bc9e65] font-semibold uppercase flex items-center justify-center gap-2">
            ❧ ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE ☙
          </span>
        </div>
      </div>

    </section>
  );
}