'use client';
import { useState } from 'react';
import styles from './MenuSection.module.css';

const categories = [
  {
    id: 'classics',
    label: 'Classics',
    emoji: '🌅',
    tagline: 'Authentic South Indian Breakfast',
    color: '#e8f5e9',
    accent: '#014d33',
    items: [
      'Idly (2 pcs)', 'Thattu Idly (2 pcs)', 'Ghee Podi Idly (2 pcs)', 'Mini Ghee Podi Idly', 'Mini Sambar Idly', 'Sambar Idly (2pc)', 'Medhu Vada (2 pcs)', 'Sambar Vada (2 pcs)', 'Dahi Vada (2 pcs)', '1 Idly-1 Vada Combo', '2 Idly-1 Vada combo', '1 Idly- 2 vada combo', 'Rasam Vada (2 pcs)', 'Paruppu Vada (2 pcs)'
    ],
  },
  {
    id: 'appetizers',
    label: 'Appetizers',
    emoji: '🍢',
    tagline: 'Crispy bites to begin',
    color: '#fff8e1',
    accent: '#d99c43',
    items: [
      'Gobi/Paneer 65', 'Chilli Parotta', 'Kothu Parotta', 'Chilli Gobi', 'Chilli Paneer', 'Gobi Manchurian', 'Chilli Idly'
    ],
  },
  {
    id: 'tiffin-specials',
    label: 'Tiffin Specials',
    emoji: '🍲',
    tagline: 'Delicious tiffin items',
    color: '#f3e5f5',
    accent: '#8e24aa',
    items: [
      'Ghee Pongal', 'Rava Kichadi', 'Mini Tiffin Combo', 'Mini Tiffin Combo w/t Coffee', 'Onion Pakoda', 'Onion Bhaji(4 pcs)'
    ],
  },
  {
    id: 'dosa-varieties',
    label: 'Dosa Varieties',
    emoji: '🥞',
    tagline: 'Crispy, golden, legendary',
    color: '#e8f5e9',
    accent: '#014d33',
    items: [
      'Plain Dosa', 'Masala Dosa', 'Mysore Dosa', 'Mysore Masala Dosa', 'Ghee Roast', 'Ghee Masala Dosa', 'Onion Dosa', 'Podi Masala Dosa', 'Onion Masala Dosa', 'Ghee Podi Masala Dosa', 'Pav Bhaji Dosa', 'Butter Masala Dosa', 'Cheese Dosa', 'Chettinad Masala Dosa', 'Andhra Kara Dosa', 'Andhra Kara Masala Dosa', 'Kal Dosa', 'Butter Garlic Dosa', 'Butter Garlic Masala Dosa', 'Paneer Butter/Burji Masala Dosa', 'Butter Dosa', 'Kids Cheese Dosa'
    ],
  },
  {
    id: 'rava-specials',
    label: 'Rava Specials',
    emoji: '🥘',
    tagline: 'Crispy semolina crepes',
    color: '#fff3e0',
    accent: '#ef6c00',
    items: [
      'Rava Dosa', 'Rava Masala', 'Onion Rava', 'Onion Rava Masala'
    ],
  },
  {
    id: 'utthappams',
    label: 'Utthappam',
    emoji: '🫔',
    tagline: 'Thick, soft & flavourful',
    color: '#e3f2fd',
    accent: '#1565c0',
    items: [
      'Onion Uttappam', 'Ghee Podi Uttappam', 'Mixed Veg Uttappam', 'Onion Tomato Uttappam', 'Onion-Chilli Uttappam', 'Plain Uttappam'
    ],
  },
  {
    id: 'rice-dishes',
    label: 'Rice Dishes',
    emoji: '🍛',
    tagline: 'Hearty midday meals',
    color: '#fff3e0',
    accent: '#e65100',
    items: [
      'Curd Rice', 'Sambar Rice', 'Puliyodharai', 'Veg Pulao', 'Lemon Rice'
    ],
  },
  {
    id: 'breads',
    label: 'Breads',
    emoji: '🫓',
    tagline: 'Freshly made every day',
    color: '#fce4ec',
    accent: '#c2185b',
    items: [
      'Chappathi Kurma (2 pcs)', 'Parotta Kurma (2 pcs)', 'Poori Masala'
    ],
  },
  {
    id: 'weekend-specials',
    label: 'Weekend Specials',
    emoji: '🎉',
    tagline: 'Saturday & Sunday Exclusives',
    color: '#e8eaf6',
    accent: '#3f51b5',
    items: [
      'South Indian Meals (Limited)', 'Veg fried rice/Noodles', 'Channa Bhatura'
    ],
  },
  {
    id: 'sides',
    label: 'Sides',
    emoji: '🥣',
    tagline: 'Add to your meal',
    color: '#efebe9',
    accent: '#5d4037',
    items: [
      'Sambar', 'Podi', 'Masala', 'Extra'
    ],
  },
  {
    id: 'desserts',
    label: 'Desserts',
    emoji: '🍨',
    tagline: 'Sweet finish',
    color: '#fce4ec',
    accent: '#ad1457',
    items: [
      'Gulab Jamun', 'Rasamalai', 'Pineapple Kesari', 'Payasam'
    ],
  },
  {
    id: 'beverages',
    label: 'Beverages',
    emoji: '☕',
    tagline: 'Cool, warm, refreshing',
    color: '#f3e5f5',
    accent: '#6a1b9a',
    items: [
      'Filter Coffee*', 'Mango Lassi', 'Rose Milk', 'Hot Badam Milk', 'Pop / Water', 'Masala Chai*'
    ],
  },
];

export default function MenuSection() {
  const [activeTab, setActiveTab] = useState('classics');
  const [animating, setAnimating] = useState(false);
  const [displayedTab, setDisplayedTab] = useState('classics');

  const switchTab = (id) => {
    if (id === activeTab || animating) return;
    setAnimating(true);
    setTimeout(() => {
      setDisplayedTab(id);
      setActiveTab(id);
      setAnimating(false);
    }, 200);
  };

  const currentCat = categories.find((c) => c.id === displayedTab);

  return (
    <section className={styles.section}>
      {/* Page header */}
      <div className={styles.pageHeader}>
        <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>✨</span> Explore Our Menu
          </span>
        <h1 className={styles.pageTitle}>
          A Taste of <em>South India</em>
        </h1>
        <p className={styles.pageSubtitle}>
          100% vegetarian · Stone-ground batter · Freshly made daily
        </p>
      </div>

      {/* Mobile tab strip */}
      <div className={styles.mobileTabStrip}>
        {categories.map((cat) => (
          <button
            key={cat.id}
            className={`${styles.mobileTab} ${activeTab === cat.id ? styles.mobileTabActive : ''}`}
            onClick={() => switchTab(cat.id)}
            style={activeTab === cat.id ? { borderColor: cat.accent, color: cat.accent } : {}}
          >
            {/* <span>{cat.emoji}</span> */}
            <span>{cat.label}</span>
          </button>
        ))}
      </div>

      {/* Main layout */}
      <div className={styles.layout}>
        {/* Sidebar */}
        <aside className={styles.sidebar}>
          <p className={styles.sidebarLabel}>Categories</p>
          <nav className={styles.tabNav}>
            {categories.map((cat) => (
              <button
                key={cat.id}
                className={`${styles.tabBtn} ${activeTab === cat.id ? styles.tabActive : ''}`}
                onClick={() => switchTab(cat.id)}
                style={activeTab === cat.id ? { background: cat.accent } : {}}
              >
                {/* <span className={styles.tabEmoji}>{cat.emoji}</span> */}
                <span className={styles.tabText}>
                  <span className={styles.tabLabel}>{cat.label}</span>
                  <span className={styles.tabTagline}>{cat.tagline}</span>
                </span>
                <span className={styles.tabCount}>{cat.items.length}</span>
              </button>
            ))}
          </nav>
          <div className={styles.sidebarDeco} aria-hidden="true">🍃</div>
        </aside>

        {/* Content */}
        <div className={styles.content}>
          {/* Category header */}
          <div
            className={`${styles.catHeader} ${animating ? styles.fadeOut : styles.fadeIn}`}
            style={{ background: currentCat.color, borderLeft: `4px solid ${currentCat.accent}` }}
          >
            {/* <span className={styles.catEmoji}>{currentCat.emoji}</span> */}
            <div>
              <h2 className={styles.catTitle} style={{ color: currentCat.accent }}>
                {currentCat.label}
              </h2>
              <p className={styles.catTagline}>{currentCat.tagline}</p>
            </div>
            <span className={styles.catCount} style={{ background: currentCat.accent }}>
              {currentCat.items.length} items
            </span>
          </div>

          {/* Items grid */}
          <div className={`${styles.itemsGrid} ${animating ? styles.fadeOut : styles.fadeIn}`}>
            {currentCat.items.map((item, i) => (
              <div
                key={item}
                className={styles.itemCard}
                style={{ animationDelay: `${i * 40}ms` }}
              >
                {/* <div className={styles.itemImageWrapper}>
                  <img src="/images/south-indian-thali.png" alt={item} className={styles.itemImage} />
                </div> */}
                <div className={styles.itemContent}>
                  <h3 className={styles.itemName}>{item}</h3>
                  <p className={styles.itemDescription}>Authentic South Indian flavor.</p>
                </div>
              </div>
            ))}
          </div>

          {/* Veg badge */}
          {/* <div className={styles.vegBadge}>
            <span className={styles.vegDot} />
            <span>100% Pure Vegetarian</span>
          </div> */}
        </div>
      </div>
    </section>
  );
}
