/* MealPlanner — "Plan a day of meals." Three meal slots; tap to switch between
   two budget options each. A running daily total compares against a typical
   daily benefit, with a friendly "under budget" payoff. Educational + playful. */
function MealPlanner({ lang }) {
  const { Pill } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  const slots = [
    { key: 'breakfast', icon: 'Sunrise', label: { en: 'Breakfast', es: 'Desayuno' },
      options: [
        { icon: 'Egg', cost: 0.85, en: 'Eggs & toast', es: 'Huevos y pan tostado', items: { en: '2 eggs · 2 slices bread', es: '2 huevos · 2 panes' } },
        { icon: 'Wheat', cost: 0.55, en: 'Oatmeal & banana', es: 'Avena y plátano', items: { en: 'Oats · 1 banana', es: 'Avena · 1 plátano' } },
      ] },
    { key: 'lunch', icon: 'Sun', label: { en: 'Lunch', es: 'Almuerzo' },
      options: [
        { icon: 'Sandwich', cost: 1.20, en: 'Bean & cheese burrito', es: 'Burrito de frijol y queso', items: { en: 'Tortilla · beans · cheese', es: 'Tortilla · frijoles · queso' } },
        { icon: 'Soup', cost: 0.95, en: 'Lentil soup & bread', es: 'Sopa de lentejas y pan', items: { en: 'Lentils · carrot · bread', es: 'Lentejas · zanahoria · pan' } },
      ] },
    { key: 'dinner', icon: 'Moon', label: { en: 'Dinner', es: 'Cena' },
      options: [
        { icon: 'CookingPot', cost: 1.40, en: 'Rice, beans & veggies', es: 'Arroz, frijoles y verduras', items: { en: 'Rice · beans · mixed veg', es: 'Arroz · frijoles · verduras' } },
        { icon: 'Drumstick', cost: 1.75, en: 'Chicken & potatoes', es: 'Pollo y papas', items: { en: 'Chicken leg · potato · veg', es: 'Pierna de pollo · papa · verdura' } },
      ] },
  ];

  const [pick, setPick] = React.useState({ breakfast: 0, lunch: 0, dinner: 0 });
  const total = slots.reduce((sum, s) => sum + s.options[pick[s.key]].cost, 0);
  const budget = 7.0; // illustrative typical daily benefit per person
  const under = total <= budget;
  const pct = Math.min(100, Math.round((total / budget) * 100));

  return (
    <section id="meals" style={{ padding: 'var(--space-20) 0', background: 'var(--cream-50)' }}>
      <div className="oasis-container">
        <SectionHead
          center
          eyebrow={t(lang, 'Eat well for less', 'Come bien por menos')}
          title={t(lang, 'Build a day of meals', 'Arma un día de comidas')}
          intro={t(lang, 'Tap an option in each meal to see how a full, healthy day can cost just a few dollars.', 'Toca una opción en cada comida y ve cómo un día completo y saludable puede costar solo unos dólares.')}
        />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'var(--space-5)', marginBottom: 'var(--space-8)' }}>
          {slots.map((s) => {
            const sel = pick[s.key];
            return (
              <div key={s.key} style={{ background: 'var(--surface-raised)', border: '1.5px solid var(--border-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)', boxShadow: 'var(--shadow-sm)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                  <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--gold-100)', display: 'grid', placeItems: 'center' }}>
                    <Icon name={s.icon} size={22} stroke="var(--gold-500)" strokeWidth={2.3} />
                  </div>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h4)', color: 'var(--text-strong)' }}>{t(lang, s.label.en, s.label.es)}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {s.options.map((o, i) => {
                    const on = sel === i;
                    return (
                      <button key={i} type="button" onClick={() => setPick((p) => ({ ...p, [s.key]: i }))} style={{
                        textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
                        padding: '12px 14px', borderRadius: 'var(--radius-md)',
                        background: on ? 'var(--yes-bg)' : 'var(--surface-sunk)',
                        border: `2px solid ${on ? 'var(--leaf-500)' : 'transparent'}`,
                        transition: 'all var(--dur-fast) var(--ease-out)',
                      }}>
                        <div style={{ width: 38, height: 38, borderRadius: 999, background: on ? 'var(--leaf-500)' : 'var(--cream-200)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                          <Icon name={o.icon} size={20} stroke={on ? '#fff' : 'var(--forest-700)'} strokeWidth={2.3} />
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontWeight: 800, color: 'var(--text-strong)', fontSize: 'var(--fs-small)' }}>{t(lang, o.en, o.es)}</div>
                          <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t(lang, o.items.en, o.items.es)}</div>
                        </div>
                        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 17, color: on ? 'var(--leaf-600)' : 'var(--text-muted)' }}>${o.cost.toFixed(2)}</div>
                      </button>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>

        {/* Running total */}
        <div style={{ maxWidth: 760, margin: '0 auto', background: 'linear-gradient(160deg, var(--forest-700), var(--forest-900))', borderRadius: 'var(--radius-xl)', padding: 'var(--space-8)', color: 'var(--cream-50)', boxShadow: 'var(--shadow-lg)' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <div style={{ color: 'var(--text-on-forest-muted)', fontSize: 'var(--fs-small)', fontWeight: 700 }}>{t(lang, 'Your whole day costs', 'Tu día completo cuesta')}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(48px, 8vw, 68px)', lineHeight: 0.95, color: 'var(--gold-400)' }}>${total.toFixed(2)}</div>
            </div>
            <Pill tone={under ? 'leaf' : 'gold'}>
              <Icon name={under ? 'Check' : 'Info'} size={15} stroke={under ? 'var(--leaf-600)' : 'var(--gold-500)'} />
              {under ? t(lang, 'Under a typical daily benefit', 'Bajo un beneficio diario típico') : t(lang, 'Close to a daily benefit', 'Cerca de un beneficio diario')}
            </Pill>
          </div>
          <div style={{ height: 14, borderRadius: 999, background: 'var(--forest-800)', overflow: 'hidden', margin: '18px 0 8px' }}>
            <div style={{ height: '100%', width: pct + '%', background: under ? 'linear-gradient(90deg, var(--leaf-400), var(--gold-400))' : 'var(--gold-500)', borderRadius: 999, transition: 'width var(--dur-base) var(--ease-out)' }} />
          </div>
          <div style={{ fontSize: 'var(--fs-caption)', color: 'var(--text-on-forest-muted)' }}>
            {t(lang, `Compared to about $${budget.toFixed(2)}/day — a typical SNAP benefit for one person. Amounts are illustrative.`, `Comparado con unos $${budget.toFixed(2)}/día — un beneficio típico de SNAP para una persona. Las cantidades son ilustrativas.`)}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { MealPlanner });