// Recipe Gallery — Greek, Québécois, Lebanese, Indian fusion

const RECIPES = [
{ id: 'r1', name: 'Fasolada', origin: 'Greek', cuisine: 'gr', flag: '🇬🇷', glyph: '◈', photo: 'assets/food-fasolada.jpg',
  desc: 'White bean and tomato soup — Greece\'s national dish. Olive oil, celery, carrots, slow-simmered.',
  course: 'Main', time: '1h 30m', serves: '6',
  ingredients: ['500g dried white beans, soaked overnight', '1 large onion, diced', '3 carrots, sliced', '3 celery stalks, chopped', '4 tomatoes, grated (or 400g tinned)', '4 garlic cloves, minced', '120ml extra virgin olive oil', '2 tbsp tomato paste', '2 bay leaves', 'Salt, pepper, oregano'],
  steps: ['Drain the beans and boil in fresh water for 10 minutes; drain again.', 'In a heavy pot, sweat onion, carrot and celery in olive oil for 8 minutes.', 'Add garlic, tomato paste, and grated tomatoes. Cook 5 minutes.', 'Add the beans, bay leaves, and enough water to cover by 2cm.', 'Simmer gently for 60–75 minutes until beans are creamy.', 'Season with salt, pepper and a generous pour of olive oil. Serve with crusty bread and feta.'] },
{ id: 'r2', name: 'Tourtière aux Champignons', origin: 'Québécois', cuisine: 'qc', flag: '🇨🇦', glyph: '◇', photo: 'assets/food-tourtiere.jpg',
  desc: 'A wild mushroom meat pie — earthy, spiced, under a flaky butter crust. Mémère\'s winter ritual.',
  course: 'Main', time: '2h', serves: '8',
  ingredients: ['500g ground pork', '300g mixed wild mushrooms, finely chopped', '1 large onion, diced', '3 garlic cloves, minced', '1 potato, grated', '1 tsp ground cinnamon', '½ tsp ground cloves', '½ tsp allspice', '250ml beef broth', '2 sheets all-butter pie pastry', '1 egg, beaten (egg wash)'],
  steps: ['Sauté onion in butter until translucent. Add mushrooms; cook until dry, about 10 minutes.', 'Add pork, garlic, and spices. Brown thoroughly, breaking up clumps.', 'Stir in grated potato and broth. Simmer 20 minutes until thick. Cool fully.', 'Line a 9-inch pie dish with one pastry. Fill with cooled mixture.', 'Top with second pastry, crimp edges, cut steam vents, brush with egg wash.', 'Bake at 200°C / 400°F for 35–40 minutes until deep golden.'] },
{ id: 'r3', name: 'Hummus & Manakish', origin: 'Lebanese', cuisine: 'lb', flag: '🇱🇧', glyph: '✦', photo: 'assets/food-hummus.jpg',
  desc: 'Tahini-rich hummus with stone-baked za\'atar flatbread. Olive oil, sumac, sesame.',
  course: 'Mezze', time: '40m + dough', serves: '4',
  ingredients: ['400g cooked chickpeas (skins removed for silky texture)', '120g tahini', 'Juice of 2 lemons', '2 garlic cloves', '4 tbsp ice water', '1 tsp ground cumin', 'For manakish: 500g flour, 7g yeast, 300ml warm water, 2 tbsp olive oil', '4 tbsp za\'atar mixed with 4 tbsp olive oil', 'Salt'],
  steps: ['Whip tahini and lemon juice in a food processor until pale and fluffy, 1 minute.', 'Add garlic, cumin, salt and chickpeas. Blend, drizzling in ice water until silky.', 'Make dough: combine flour, yeast, water, oil and salt. Knead 8 minutes; rest 1 hour.', 'Divide into 8 balls; roll each into a 15cm disc.', 'Spread za\'atar paste on top; bake at 230°C / 450°F for 6–8 minutes.', 'Serve hummus with a swirl of olive oil, sumac, and warm manakish on the side.'] },
{ id: 'r4', name: 'Masoor Dal Tadka', origin: 'Indian', cuisine: 'in', flag: '🇮🇳', glyph: '◉', photo: 'assets/food-masoordal.jpg',
  desc: 'Red lentils tempered with cumin, garlic, and ghee. Comfort in a bowl.',
  course: 'Main', time: '35m', serves: '4',
  ingredients: ['1 cup masoor dal (red lentils), rinsed', '4 cups water', '½ tsp turmeric', '1 tomato, chopped', '1-inch ginger, grated', 'Salt to taste', 'For tadka: 3 tbsp ghee', '1 tsp cumin seeds', '4 garlic cloves, sliced', '2 dried red chilies', '½ tsp Kashmiri chilli powder', 'Fresh coriander, lemon wedges'],
  steps: ['Combine dal, water, turmeric, tomato, ginger and salt in a pot.', 'Bring to a boil, then simmer 20–25 minutes until lentils break down. Whisk smooth.', 'Heat ghee in a small pan. Add cumin seeds; let them crackle.', 'Add garlic and dried chilies; fry until garlic is golden brown.', 'Off heat, stir in chilli powder. Pour the sizzling tadka over the dal.', 'Garnish with coriander and a squeeze of lemon. Serve with rice or chapati.'] },
{ id: 'r5', name: 'Κολοκυθοκεφτέδες', origin: 'Greek', cuisine: 'gr', flag: '🇬🇷', glyph: '◈', photo: 'assets/food-keftedes.jpg',
  desc: 'Zucchini fritters with feta, mint, and dill. Crisp outside, herbaceous inside.',
  course: 'Mezze', time: '40m', serves: '4',
  ingredients: ['750g zucchini, coarsely grated', '200g feta, crumbled', '1 small onion, finely grated', '3 spring onions, chopped', '3 tbsp fresh mint, chopped', '3 tbsp fresh dill, chopped', '2 eggs', '120g flour', 'Salt, pepper', 'Olive oil for frying'],
  steps: ['Toss zucchini with 1 tsp salt; let drain in a colander 20 minutes. Squeeze out all liquid.', 'Combine zucchini with onion, herbs, feta, eggs, and pepper.', 'Stir in flour until you have a thick, scoopable batter.', 'Heat 1cm of olive oil in a skillet over medium heat.', 'Drop heaped tablespoons; flatten gently. Fry 2–3 minutes per side until golden.', 'Drain on paper. Serve hot with tzatziki and lemon.'] },
{ id: 'r6', name: 'Poutine', origin: 'Québécois', cuisine: 'qc', flag: '🇨🇦', glyph: '◇', photo: 'assets/food-poutine.jpg',
  desc: 'Hand-cut fries, squeaky cheese curds, hot gravy. Québec\'s gift to comfort food.',
  course: 'Main', time: '1h', serves: '4',
  ingredients: ['1.2kg russet potatoes, cut into 1cm batons', 'Neutral oil for frying', '300g fresh cheese curds (room temperature)', 'For gravy: 60g butter', '60g flour', '500ml beef stock', '250ml chicken stock', '1 tbsp Worcestershire sauce', 'Black pepper'],
  steps: ['Soak cut potatoes in cold water 30 minutes; pat completely dry.', 'Fry at 150°C / 300°F for 6 minutes; drain. Rest 10 minutes.', 'For gravy: melt butter, whisk in flour, cook 2 minutes to a blond roux.', 'Slowly whisk in stocks; simmer until thickened, about 8 minutes. Season.', 'Fry potatoes again at 190°C / 375°F until crisp and golden.', 'Pile fries in a bowl, scatter curds on top, drown in hot gravy. Eat immediately.'] },
{ id: 'r7', name: 'Fattoush', origin: 'Lebanese', cuisine: 'lb', flag: '🇱🇧', glyph: '✦', photo: 'assets/food-fattoush.jpg',
  desc: 'Crisp pita salad with sumac, mint, pomegranate, and the season\'s best tomatoes.',
  course: 'Mezze', time: '20m', serves: '4',
  ingredients: ['2 pita breads, torn', '4 tomatoes, diced', '2 Lebanese cucumbers, diced', '1 small red onion, sliced', '1 romaine heart, chopped', '1 bunch parsley, chopped', '½ bunch mint, chopped', 'Seeds of ½ pomegranate', 'Dressing: 60ml olive oil, juice of 1 lemon, 1 tbsp pomegranate molasses, 2 tsp sumac, 1 garlic clove, salt'],
  steps: ['Toast or fry torn pita until deeply golden and crisp. Set aside.', 'Whisk all dressing ingredients together until emulsified.', 'In a large bowl combine tomatoes, cucumber, onion, lettuce and herbs.', 'Just before serving, add pita, pomegranate seeds, and dressing.', 'Toss gently — you want the pita to stay crisp.', 'Finish with extra sumac and a drizzle of pomegranate molasses.'] },
{ id: 'r8', name: 'Chapati', origin: 'Indian', cuisine: 'in', flag: '🇮🇳', glyph: '◉', photo: 'assets/food-chapati.jpg',
  desc: 'Whole wheat flatbread, kissed by an open flame. The everyday bread of every Indian home.',
  course: 'Bread', time: '45m', serves: 'makes 10',
  ingredients: ['2 cups atta (whole wheat flour)', '¾ cup warm water (approx)', '½ tsp salt', '1 tsp neutral oil', 'Extra flour for dusting', 'Ghee for brushing'],
  steps: ['Mix flour, salt and oil. Add water gradually, kneading until soft and pliable.', 'Knead vigorously for 8 minutes. Cover and rest 20 minutes.', 'Divide into 10 balls. Roll each into a 15cm disc, keeping it thin and even.', 'Heat a tawa or cast iron pan over medium-high heat.', 'Cook 30 seconds per side, then place directly on open flame — it will puff up.', 'Brush with ghee while warm. Stack in a clean cloth to keep soft.'] }];


const FILTERS = [
{ id: 'all', label: 'Everything' },
{ id: 'gr', label: 'Greek' },
{ id: 'qc', label: 'Québécois' },
{ id: 'lb', label: 'Lebanese' },
{ id: 'in', label: 'Indian' }];


const Recipes = () => {
  const [filter, setFilter] = React.useState('all');
  const [open, setOpen] = React.useState(null);
  const visible = filter === 'all' ? RECIPES : RECIPES.filter((r) => r.cuisine === filter);

  return (
    <section className="section recipes-section" id="recipes">
      <div className="section-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>04 — Cultural Recipe Gallery</div>
          <h2 className="title">A long table of <em>four kitchens</em></h2>
        </div>
        <div className="meta">
          Greek · Québécois<br />Lebanese · Indian
        </div>
      </div>

      <p className="recipes-intro">
        We are unrepentant foodies, and we feel lucky to share in so many beautiful cultures, Greek, Québécois, Lebanese, and Indian. So we wanted to give every guest a small taste of each kitchen to take home. 

        <em>This is not the wedding menu</em>, just a few recipes,
        from grandmothers and aunties on both sides, to cook before or after you join us in Patras.
      </p>

      <div className="venue-strip">
        <figure className="venue-img"><img src="assets/venue-aerial.jpg" alt="Ktima Panagiotopoulou aerial" /></figure>
        <figure className="venue-img"><img src="assets/venue-night.jpg" alt="Ktima Panagiotopoulou at night" /></figure>
      </div>

      <div className="recipe-filters">
        {FILTERS.map((f) =>
        <button
          key={f.id}
          className={`filter-chip ${filter === f.id ? 'on' : ''}`}
          onClick={() => setFilter(f.id)}>
          {f.label}<span className="filter-count">{f.id === 'all' ? RECIPES.length : RECIPES.filter((r) => r.cuisine === f.id).length}</span></button>
        )}
      </div>

      <div className="recipe-grid">
        {visible.map((r) =>
        <article key={r.id} className={`recipe-card recipe-${r.cuisine}`} onClick={() => setOpen(r)}>
            <div className="recipe-photo">
              <img src={r.photo} alt={r.name} loading="lazy" />
            </div>
            <div className="recipe-meta-row">
              <span className="recipe-flag">{r.flag}</span>
              <span className="eyebrow">{r.origin} · {r.course}</span>
              <span className="recipe-glyph">{r.glyph}</span>
            </div>
            <h3 className="recipe-name">{r.name}</h3>
            <p className="recipe-desc">{r.desc}</p>
            <div className="recipe-foot">
              <span className="mono">{r.course} · {r.time}</span>
              <span className="recipe-link">Read recipe →</span>
            </div>
          </article>
        )}
      </div>

      {open &&
      <div className="reco-overlay" onClick={() => setOpen(null)}>
          <div className="recipe-detail" onClick={(e) => e.stopPropagation()}>
            <button className="reco-close" onClick={() => setOpen(null)} aria-label="Close">×</button>
            <div className="recipe-detail-photo">
              <img src={open.photo} alt={open.name} />
              <div className="recipe-detail-photo-overlay">
                <span className={`recipe-detail-flag`}>{open.flag}</span>
                <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}>{open.origin} · {open.course}</span>
              </div>
            </div>
            <div className="recipe-detail-body">
              <h3 className="recipe-detail-title">{open.name}</h3>
              <p className="recipe-detail-desc">{open.desc}</p>

              <div className="recipe-detail-stats">
                <div><span className="eyebrow">Time</span><span className="stat-val">{open.time}</span></div>
                <div><span className="eyebrow">Serves</span><span className="stat-val">{open.serves}</span></div>
                <div><span className="eyebrow">Origin</span><span className="stat-val stat-chef">{open.origin}</span></div>
              </div>

              <div className="recipe-section">
                <span className="eyebrow recipe-section-label">Ingredients</span>
                <ul className="recipe-ingredients">
                  {open.ingredients.map((ing, i) => (
                    <li key={i}><span className="ing-bullet">◦</span>{ing}</li>
                  ))}
                </ul>
              </div>

              <div className="recipe-section">
                <span className="eyebrow recipe-section-label">Method</span>
                <ol className="recipe-steps">
                  {open.steps.map((s, i) => (
                    <li key={i}>
                      <span className="step-num">{String(i + 1).padStart(2, '0')}</span>
                      <span className="step-text">{s}</span>
                    </li>
                  ))}
                </ol>
              </div>
            </div>
          </div>
        </div>
      }
    </section>);

};

window.Recipes = Recipes;