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

const categories = [
  {
    id: 'breakfast',
    label: 'Breakfast',
    emoji: '🌅',
    tagline: 'Start your morning right',
    color: '#e8f5e9',
    accent: '#014d33',
    items: [
      'Idly (2pcs)',
      'Mini Sambar Idly',
      'Thattu Idly (2pcs)',
      'Ghee Podi Thattu Idly',
      'Mini Ghee Podi Idly',
      'Rava Khichdi',
      'Sambar Idly (2 pcs)',
      'Ghee Pongal',
      'Kuzhi Paniyaram (10 pcs)',
      'Idly with Paya (2 pcs)',
      'Rasam Idly (2 pcs)',
      'South Indian Thali (Weekends Only)',
      'Poori Masala (2 Nos.)',
      'Rasa Vada',
      'Paruppu Vada (2 Nos.)',
      'Pizza Dosa',
      'Thayir Vada / Dhahi Vada',
      'Sambar Vada',
    ],
  },
  {
    id: 'appetizers',
    label: 'Appetizers',
    emoji: '🍢',
    tagline: 'Crispy bites to begin',
    color: '#fff8e1',
    accent: '#d99c43',
    items: [
      'Thayir (Dahi) Vada (2 pcs)',
      'Rasam Vada (2 pcs)',
      'Sambar Vada (2 pcs)',
      'Paruppu Vada (2 pcs)',
      'Medhu Vada (2 pcs)',
      'Chilli Gobi',
      'Gobi Manchurian',
      'Chilli Idly',
      'Kothu Parotta',
      'Chilli Paneer',
      'Gobi / Paneer 65',
      'Chilli Parotta',
    ],
  },
  {
    id: 'breads',
    label: 'Breads',
    emoji: '🫓',
    tagline: 'Freshly made every day',
    color: '#fce4ec',
    accent: '#c2185b',
    items: [
      'Poori Masala',
      'Parotta (2 Nos.)',
      "Chappathy's (2 Nos.)",
    ],
  },
  {
    id: 'speciality-dosa',
    label: 'Speciality Dosa',
    emoji: '🥞',
    tagline: 'Crispy, golden, legendary',
    color: '#e8f5e9',
    accent: '#014d33',
    items: [
      'Onion Rava Dosa',
      'Rava Dosa',
      'Set Masala Dosa',
      'Paneer Butter Masala Dosa',
      'Butter Garlic Dosa',
      'Mysore Masala Dosa',
      'Onion Rava Masala Dosa',
      'Rava Masala Dosa',
      'Cheese Dosa',
      'Chettinad Masala Dosa',
      'Butter Masala Dosa',
    ],
  },
  {
    id: 'lunch',
    label: 'Lunch',
    emoji: '🍛',
    tagline: 'Hearty midday meals',
    color: '#fff3e0',
    accent: '#e65100',
    items: [
      'Sambar Rice',
      'Tamarind Rice',
      'Bagala Bath (Curd Rice)',
      'Rasam',
      'Mini Meals',
      'Lemon Rice',
      'Veg Pulav',
    ],
  },
  {
    id: 'utthappams',
    label: 'Utthappams',
    emoji: '🫔',
    tagline: 'Thick, soft & flavourful',
    color: '#e3f2fd',
    accent: '#1565c0',
    items: [
      'Plain Utthappam',
      'Onion Utthappam',
      'Onion Chilli Utthappam',
      'Mixed Veg Utthappam',
      'Ghee Podi Utthappam',
    ],
  },
  {
    id: 'beverages',
    label: 'Beverages',
    emoji: '☕',
    tagline: 'Cool, warm, refreshing',
    color: '#f3e5f5',
    accent: '#6a1b9a',
    items: [
      'Special Madras Coffee',
      'Special Chai',
    ],
  },
  {
    id: 'combos',
    label: 'Combos',
    emoji: '🎁',
    tagline: 'Best value pairings',
    color: '#e8f5e9',
    accent: '#2e7d32',
    items: [
      '1 Idly & 1 Vada',
      '2 Idly & 1 Vada',
    ],
  },
];

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

  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>
  );
}
