// screens-a.jsx — Vandaag & Recepten (overhaul: no gamification, bigger type, Thirza present)

const mintTheme = () => window.__mintTheme || {};
const serif = () => mintTheme().serif || "'Playfair Display', serif";

// ─────────── Shared small components ───────────
function Card({ children, style, pad = 18 }) {
  return (
    <div style={{
      background: '#fff', borderRadius: 14, padding: pad,
      marginBottom: 14, boxShadow: '0 2px 8px rgba(47,79,79,0.08)',
      ...style,
    }}>{children}</div>
  );
}
function Eyebrow({ children, color = '#6B8F84', style }) {
  return <div style={{ fontSize: 11.5, fontWeight: 500, color, letterSpacing: '0.03em', marginBottom: 8, ...style }}>{children}</div>;
}
// Geüniformeerde sectiekop met gekleurd staafje + serif titel + optionele subtitel
function SectionHead({ title, sub, accent = '#82A898', style }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      marginTop: 18, marginBottom: 10, ...style,
    }}>
      <div style={{ width: 4, height: 20, background: accent, borderRadius: 2, flexShrink: 0 }}/>
      <div style={{
        fontFamily: serif(), fontSize: 19, color: '#2F4F4F',
        letterSpacing: '-0.01em', lineHeight: 1.15, minWidth: 0,
      }}>
        {title}
        {sub && <span style={{ color: '#a59f95', fontStyle: 'italic', fontSize: 16 }}> — {sub}</span>}
      </div>
    </div>
  );
}
function H1({ children, style }) {
  return (
    <h1 style={{
      fontFamily: serif(), fontWeight: 400, fontSize: 30,
      color: '#2F4F4F', marginBottom: 4, lineHeight: 1.18,
      letterSpacing: '-0.01em', ...style,
    }}>{children}</h1>
  );
}
function H2({ children, style }) {
  return (
    <h2 style={{
      fontFamily: serif(), fontWeight: 400, fontSize: 20,
      color: '#2F4F4F', lineHeight: 1.25, ...style,
    }}>{children}</h2>
  );
}
function Sub({ children }) {
  return <div style={{ fontSize: 13, color: '#82A898', marginBottom: 24 }}>{children}</div>;
}
function Body({ children, style }) {
  return <div style={{ fontSize: 14, color: '#2F4F4F', lineHeight: 1.65, ...style }}>{children}</div>;
}
function ThirzaLine({ style }) {
  return (
    <div style={{ fontSize: 11, color: '#a59f95', fontStyle: 'italic', lineHeight: 1.5, ...style }}>
      Door Thirza Wondergem · natuurgeneeskundig therapeut bij Mint
    </div>
  );
}
function Checkbox({ on, onClick, size = 24 }) {
  return (
    <div onClick={onClick} style={{
      width: size, height: size, borderRadius: 7,
      border: on ? 'none' : '1.5px solid #9BBAB3',
      background: on ? '#82A898' : 'transparent',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer', flexShrink: 0, transition: 'all .15s',
    }}>
      {on && <IconCheck size={Math.round(size*0.6)} color="#fff" stroke={2.5}/>}
    </div>
  );
}
function Toggle({ on, onClick }) {
  return (
    <div onClick={onClick} style={{
      width: 44, height: 25, borderRadius: 13,
      background: on ? '#82A898' : '#d8d8d8',
      position: 'relative', cursor: 'pointer', flexShrink: 0,
      transition: 'background .2s',
    }}>
      <div style={{
        position: 'absolute', top: 2.5, left: on ? 21.5 : 2.5,
        width: 20, height: 20, borderRadius: '50%', background: '#fff',
        boxShadow: '0 1px 3px rgba(0,0,0,0.15)', transition: 'left .2s',
      }}/>
    </div>
  );
}

// Thirza avatar/quote card — recurring identity element
function ThirzaQuote({ children, style, eyebrow }) {
  return (
    <div style={{
      background: '#F4F1EA', borderRadius: 14, padding: 18,
      display: 'flex', gap: 14, alignItems: 'flex-start',
      marginBottom: 14, ...style,
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: '50%',
        background: '#D9937A', flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: serif(), fontSize: 19, color: '#fff',
      }}>T</div>
      <div style={{ flex: 1 }}>
        {eyebrow && (
          <div style={{
            fontFamily: "'Montserrat', sans-serif", fontWeight: 500,
            fontSize: 10, color: '#D9937A', letterSpacing: '0.06em',
            textTransform: 'uppercase', marginBottom: 6,
          }}>{eyebrow}</div>
        )}
        <div style={{ fontSize: 13, color: '#2F4F4F', lineHeight: 1.65, marginBottom: 8 }}>
          {children}
        </div>
        <div style={{ fontSize: 11, color: '#a59f95', fontStyle: 'italic' }}>
          Thirza · natuurgeneeskundig therapeut
        </div>
      </div>
    </div>
  );
}

// Compacte inline Thirza-tip — kleinere variant met avatar, voor losse opmerkingen
// in lijsten en kaartranden. Geen rol-ondertitel, om visuele ruis te beperken.
function ThirzaTip({ children, style }) {
  return (
    <div style={{
      display: 'flex', gap: 10, alignItems: 'flex-start',
      padding: '4px 0', ...style,
    }}>
      <div style={{
        width: 24, height: 24, borderRadius: '50%',
        background: '#D9937A', flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: serif(), fontSize: 12, color: '#fff', marginTop: 1,
      }}>T</div>
      <div style={{
        flex: 1, fontSize: 12, color: '#7d7467', lineHeight: 1.55,
        fontStyle: 'italic',
      }}>
        {children}
      </div>
    </div>
  );
}

// ─────────── VANDAAG ───────────
function ScreenVandaag({ state, setState, nav }) {
  const h = new Date().getHours();
  const greeting = h < 12 ? 'Goedemorgen' : h < 18 ? 'Goedemiddag' : 'Goedenavond';
  const dateStr = new Date().toLocaleDateString('nl-NL', { weekday:'long', day:'numeric', month:'long' });

  const toggleSupp = (i) => {
    const supp = suppletie[i];
    const newDone = !supp.done;
    setSuppletie(prev => prev.map((x, j) => j === i ? { ...x, done: newDone } : x));
    if (supp.supabaseId && window.MintDB) {
      window.MintDB.slaatSupplementStatus(supp.supabaseId, supp.afvinkId, newDone)
        .then(nieuweAfvinkId => {
          if (nieuweAfvinkId) {
            setSuppletie(prev => prev.map((x, j) => j === i ? { ...x, afvinkId: nieuweAfvinkId } : x));
          }
        });
    }
  };
  const addGlass = () => setState(s => ({ ...s, waterGlazen: Math.min(12, (s.waterGlazen||0) + 1) }));
  const rmGlass = () => setState(s => ({ ...s, waterGlazen: Math.max(0, (s.waterGlazen||0) - 1) }));

  // Eigen supplement toevoegen
  const [addingSupp, setAddingSupp] = React.useState(false);
  const [newSuppName, setNewSuppName] = React.useState('');
  const [newSuppDose, setNewSuppDose] = React.useState('');
  // Supplementen — geladen vanuit suppletie tabel via protocol
  const [suppletie, setSuppletie] = React.useState([]);
  React.useEffect(() => {
    if (window.MintDB) {
      window.MintDB.laadSuppletie().then(data => {
        console.log('Supplementen geladen:', data);
        setSuppletie((data || []).map(s => ({
          supabaseId: s.id,
          naam: s.naam,
          dose: s.dosering || s.frequentie || '',
          done: false,
          source: 'thirza',
          afvinkId: null,
        })));
      });
    }
  }, []);
  // Dagelijkse tip en persoonlijk bericht uit Supabase
  const [dagTip, setDagTip] = React.useState(null);
  const [persoonlijkBericht, setPersoonlijkBericht] = React.useState(null);
  React.useEffect(() => {
    if (window.MintDB) {
      window.MintDB.laadDagelijkseTip().then(tip => { if (tip) setDagTip(tip); });
      window.MintDB.laadPersoonlijkBericht().then(b => { if (b) setPersoonlijkBericht(b); });
    }
  }, []);

  // Thema-week: uitnodigingen + dagcontent
  const [uitnodigingen, setUitnodigingen] = React.useState([]);
  const [themaWeekDag, setThemaWeekDag]   = React.useState(null);

  React.useEffect(() => {
    if (!window.MintDB) return;
    if (window.MintDB.laadThemaUitnodigingen) {
      window.MintDB.laadThemaUitnodigingen().then(data => setUitnodigingen(data || []));
    }
    if (window.MintDB.laadThemaWeekDag) {
      window.MintDB.laadThemaWeekDag().then(dag => { if (dag) setThemaWeekDag(dag); });
    }
  }, []);

  const [activeUitnodiging, setActiveUitnodiging] = React.useState(null);

  const handleMeldAan = async (themaWeekId) => {
    const ok = await window.MintDB.meldAanVoorThema(themaWeekId);
    if (!ok) return;
    setUitnodigingen(prev => prev.filter(u => u.themaWeekId !== themaWeekId));
    setActiveUitnodiging(null);
    window.MintDB.laadThemaWeekDag().then(dag => { if (dag) setThemaWeekDag(dag); });
  };

  // Reflectie-modal lokaal op Vandaag (niet meer naar Voortgang springen)
  const [reflectOpen, setReflectOpen] = React.useState(false);
  const addSupp = () => {
    const naam = newSuppName.trim();
    if (!naam) return;
    const dose = newSuppDose.trim() || 'Zelf toegevoegd';
    setSuppletie(prev => [...prev, { naam, dose, done: false, source: 'self' }]);
    if (window.MintDB) {
      window.MintDB.voegSupplementToe(naam, dose, 'self').then(result => {
        if (result && result.id) {
          setSuppletie(prev => prev.map(x =>
            x.naam === naam && x.source === 'self' && !x.supabaseId
              ? { ...x, supabaseId: result.id }
              : x
          ));
        }
      });
    }
    setNewSuppName(''); setNewSuppDose(''); setAddingSupp(false);
  };
  const removeSupp = (i) => {
    const supp = suppletie[i];
    setSuppletie(prev => prev.filter((_, j) => j !== i));
    if (supp.supabaseId && window.MintDB) {
      window.MintDB.verwijderSupplement(supp.supabaseId);
    }
  };

  const now = new Date();
  const afternoon = now.getHours() >= 18;

  const glassDoel = Math.round(parseFloat(String(state.waterDoel).replace(',','.')) * 4);

  // Bepaal welke maaltijden vandaag actief zijn én haal het recept uit het weekplan
  const jsDay = new Date().getDay();
  const dayIdx = (jsDay + 6) % 7; // 0=ma..6=zo

  const ICON_BY_CAT = {
    'Ontbijt': IconCup, 'Lunch': IconLeaf, 'Diner': IconFlame,
    'Snacks': IconSeed, 'Feest': IconStar,
  };
  const FALLBACK_BY_CAT = {
    'Ontbijt': { naam: 'Havermout met bosvruchten', tag: 'Glutenvrij · 15 min', Ic: IconCup },
    'Lunch':   { naam: 'Groene salade met kikkererwten', tag: 'Glutenvrij · 10 min', Ic: IconLeaf },
    'Diner':   { naam: 'Wortelsoep met gember', tag: 'Glutenvrij · 30 min', Ic: IconFlame },
    'Snacks':  { naam: 'Appel met amandelpasta', tag: '5 min', Ic: IconSeed },
    'Feest':   { naam: null, tag: 'Niets ingepland', Ic: IconStar },
  };

  const meals = Object.keys(state.meals)
    .filter(k => state.meals[k])
    .map(key => {
      const cat = key.startsWith('Snack') ? 'Snacks' : key;
      const planned = state.weekplan[`${key}_${dayIdx}`];
      const r = planned && window.lookupRecipe ? window.lookupRecipe(planned, state) : null;
      if (planned && r) {
        return { key, naam: planned, tag: r.tag, Ic: window[r.Ic] || ICON_BY_CAT[cat] || IconBowl };
      }
      const fb = FALLBACK_BY_CAT[cat] || { naam: null, tag: 'Niets ingepland', Ic: IconBowl };
      return { key, naam: fb.naam, tag: fb.tag, Ic: fb.Ic };
    });

  const suppDone = suppletie.filter(s => s.done).length;
  const dayNum = state.dagenActief || 49;

  return (
    <div style={{ padding: '24px 20px 32px' }}>
      <Eyebrow>Dag {dayNum} van je traject</Eyebrow>
      <H1>{greeting}, {state.naam ? state.naam.split(' ')[0] : ''}</H1>
      <Sub>{dateStr[0].toUpperCase() + dateStr.slice(1)}</Sub>

      {/* Thema-week uitnodigingen */}
      {uitnodigingen.map(u => (
        <div key={u.themaWeekId} style={{
          background: '#FDF3EE', borderRadius: 12, padding: '13px 16px',
          marginBottom: 12, borderLeft: '3px solid #D9937A',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 10, color: '#D9937A', fontWeight: 600, letterSpacing: '0.06em', marginBottom: 3 }}>
              UITNODIGING
            </div>
            <div style={{ fontSize: 13, color: '#2F4F4F', lineHeight: 1.5 }}>
              Je bent uitgenodigd voor: <strong>{u.naam}</strong>
            </div>
          </div>
          <button
            onClick={() => setActiveUitnodiging(u)}
            style={{
              background: '#D9937A', color: '#fff', border: 'none',
              borderRadius: 8, padding: '7px 13px', fontSize: 12,
              fontFamily: "'Montserrat', sans-serif", fontWeight: 500,
              cursor: 'pointer', flexShrink: 0, whiteSpace: 'nowrap',
            }}
          >
            Meer info
          </button>
        </div>
      ))}

      {/* Uitnodiging detail modal (bottom sheet) */}
      {activeUitnodiging && (
        <div
          onClick={() => setActiveUitnodiging(null)}
          style={{
            position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            zIndex: 200,
          }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{
              background: '#fff', borderRadius: '18px 18px 0 0',
              padding: '28px 24px 44px', width: '100%', maxWidth: 480,
            }}
          >
            <div style={{ width: 36, height: 4, background: '#e0e0e0', borderRadius: 2, margin: '0 auto 22px' }} />
            <div style={{ fontSize: 10, color: '#D9937A', fontWeight: 600, letterSpacing: '0.06em', marginBottom: 6 }}>
              UITNODIGING
            </div>
            <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, color: '#2F4F4F', marginBottom: 14 }}>
              {activeUitnodiging.naam}
            </div>
            {activeUitnodiging.introductie && (
              <div style={{ fontSize: 14, color: '#4a4a4a', lineHeight: 1.75, marginBottom: 28 }}>
                {activeUitnodiging.introductie}
              </div>
            )}
            <button
              onClick={() => handleMeldAan(activeUitnodiging.themaWeekId)}
              style={{
                width: '100%', background: '#D9937A', color: '#fff', border: 'none',
                borderRadius: 12, padding: '14px', fontSize: 14,
                fontFamily: "'Montserrat', sans-serif", fontWeight: 500, cursor: 'pointer',
                marginBottom: 10,
              }}
            >
              Aanmelden
            </button>
            <button
              onClick={() => setActiveUitnodiging(null)}
              style={{
                width: '100%', background: 'transparent', color: '#888', border: 'none',
                padding: '8px', fontSize: 13,
                fontFamily: "'Montserrat', sans-serif", cursor: 'pointer',
              }}
            >
              Sluiten
            </button>
          </div>
        </div>
      )}

      {state.protocol && (
        <div style={{
          background: '#eaf2ef', borderRadius: 12, padding: '14px 16px',
          marginBottom: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 34, height: 34, borderRadius: '50%', background: '#82A898',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <IconFlame size={16} color="#fff"/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 10.5, color: '#6B8F84', letterSpacing: '0.03em', marginBottom: 1 }}>
                {state.protocol.actieve.naam}
              </div>
              <div style={{ fontSize: 13.5, fontWeight: 500, color: '#2F4F4F' }}>
                {state.protocol.actieve.fase_titel}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Bemoediging — alleen tonen als er een match is op dag of fase */}
      {state.bemoediging?.tekst && (
        <div style={{
          background: '#FDF8F2', borderRadius: 12, padding: '14px 16px',
          marginBottom: 14, borderLeft: '3px solid #D9937A',
        }}>
          <div style={{ fontSize: 10.5, color: '#D9937A', fontWeight: 600, letterSpacing: '0.05em', marginBottom: 6 }}>
            {state.bemoediging.auteur || 'Thirza'} · Dag {state.bemoediging.dag ?? dayNum}
          </div>
          <div style={{ fontSize: 13, color: '#2F4F4F', lineHeight: 1.7 }}>
            {state.bemoediging.tekst}
          </div>
        </div>
      )}

      {/* Persoonlijk bericht van therapeut of dagelijkse tip */}
      {persoonlijkBericht ? (
        <ThirzaQuote eyebrow="Persoonlijk bericht van Thirza">
          {persoonlijkBericht.inhoud}
        </ThirzaQuote>
      ) : (
        <ThirzaQuote eyebrow={dagTip ? (dagTip.categorie || 'Tip van de dag') : 'Tip van de dag'}>
          {dagTip
            ? dagTip.inhoud
            : 'Begin je ochtend met een glas lauwwarm water. Dit ondersteunt je spijsvertering en helpt je lichaam op gang.'}
        </ThirzaQuote>
      )}

      {/* Thema-week — dagcontent voor ingeschreven cliënten */}
      {themaWeekDag?.inhoud && (
        <div style={{
          background: '#eaf2ef', borderRadius: 12, padding: '14px 16px',
          marginBottom: 14, borderLeft: '3px solid #6B8F84',
        }}>
          <div style={{ fontSize: 10.5, color: '#6B8F84', fontWeight: 600, letterSpacing: '0.05em', marginBottom: 6 }}>
            {themaWeekDag.themaWeekNaam} · Dag {themaWeekDag.dagNummer}
          </div>
          {themaWeekDag.titel && (
            <div style={{ fontSize: 13.5, fontWeight: 500, color: '#2F4F4F', marginBottom: 6 }}>
              {themaWeekDag.titel}
            </div>
          )}
          <div style={{ fontSize: 13, color: '#2F4F4F', lineHeight: 1.7, whiteSpace: 'pre-line' }}>
            {themaWeekDag.inhoud}
          </div>
        </div>
      )}

      {/* Supplementen — eerste echte actie van de dag */}
      <SectionHead title="Voor vandaag"/>
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
          <H2>Supplementen</H2>
          <div style={{ fontSize: 12, color: '#82A898' }}>{suppDone} van {suppletie.length}</div>
        </div>
        {suppletie.map((s, i) => {
          const isSelf = s.source === 'self';
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '13px 0',
              borderBottom: i < suppletie.length-1 ? '1px solid #F4F1EA' : 'none',
            }}>
              <Checkbox on={s.done} onClick={() => toggleSupp(i)}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap',
                }}>
                  <span style={{
                    fontSize: 14.5, color: s.done ? '#b5b5b5' : '#2F4F4F',
                    textDecoration: s.done ? 'line-through' : 'none',
                    lineHeight: 1.4,
                  }}>{s.naam}</span>
                  {isSelf ? (
                    <span style={{
                      fontSize: 9.5, color: '#a59f95', background: '#F4F1EA',
                      padding: '2px 7px', borderRadius: 10, letterSpacing: '0.04em',
                      textTransform: 'uppercase', fontWeight: 500,
                    }}>Eigen</span>
                  ) : (
                    <span style={{
                      fontSize: 9.5, color: '#6B8F84', background: '#eaf2ef',
                      padding: '2px 7px', borderRadius: 10, letterSpacing: '0.04em',
                      textTransform: 'uppercase', fontWeight: 500,
                    }}>Protocol</span>
                  )}
                </div>
                <div style={{ fontSize: 12, color: s.done ? '#c8c8c8' : '#82A898', marginTop: 2 }}>{s.dose}</div>
              </div>
              {isSelf && (
                <div onClick={() => removeSupp(i)} title="Verwijderen" style={{
                  width: 28, height: 28, borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  cursor: 'pointer', flexShrink: 0,
                }}>
                  <IconClose size={13} color="#c2c2c2" stroke={1.8}/>
                </div>
              )}
            </div>
          );
        })}

        {/* Toevoeg-knop / inline formulier */}
        {!addingSupp ? (
          <div
            onClick={() => setAddingSupp(true)}
            style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '14px 0 4px',
              borderTop: '1px solid #F4F1EA',
              marginTop: 6,
              cursor: 'pointer',
            }}
          >
            <div style={{
              width: 24, height: 24, borderRadius: 7,
              border: '1.5px dashed #9BBAB3',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <IconPlus size={12} color="#6B8F84"/>
            </div>
            <span style={{ fontSize: 13.5, color: '#6B8F84', fontWeight: 500 }}>
              Eigen supplement toevoegen
            </span>
          </div>
        ) : (
          <div style={{
            marginTop: 10, paddingTop: 14,
            borderTop: '1px solid #F4F1EA',
          }}>
            <div style={{ fontSize: 11.5, color: '#82A898', marginBottom: 8, letterSpacing: '0.02em' }}>
              Nieuw supplement
            </div>
            <input
              autoFocus
              placeholder="Naam (bv. Omega-3)"
              value={newSuppName}
              onChange={e => setNewSuppName(e.target.value)}
              style={{
                width: '100%', border: '1px solid #cfe0db', borderRadius: 8,
                padding: '10px 12px', fontSize: 14, color: '#2F4F4F',
                fontFamily: "'Montserrat', sans-serif", outline: 'none',
                marginBottom: 8, background: '#fff',
              }}
            />
            <input
              placeholder="Dosering (bv. 1 capsule bij ontbijt)"
              value={newSuppDose}
              onChange={e => setNewSuppDose(e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter') addSupp(); }}
              style={{
                width: '100%', border: '1px solid #cfe0db', borderRadius: 8,
                padding: '10px 12px', fontSize: 13.5, color: '#2F4F4F',
                fontFamily: "'Montserrat', sans-serif", outline: 'none',
                marginBottom: 12, background: '#fff',
              }}
            />
            <div style={{ display: 'flex', gap: 8 }}>
              <div
                onClick={() => { setAddingSupp(false); setNewSuppName(''); setNewSuppDose(''); }}
                style={{
                  flex: 1, borderRadius: 8, padding: '10px 12px',
                  fontSize: 13, fontWeight: 500, textAlign: 'center',
                  background: '#F4F1EA', color: '#2F4F4F', cursor: 'pointer',
                }}
              >Annuleren</div>
              <div
                onClick={addSupp}
                style={{
                  flex: 1, borderRadius: 8, padding: '10px 12px',
                  fontSize: 13, fontWeight: 500, textAlign: 'center',
                  background: newSuppName.trim() ? '#82A898' : '#d0d0d0',
                  color: '#fff', cursor: newSuppName.trim() ? 'pointer' : 'not-allowed',
                }}
              >Toevoegen</div>
            </div>
            <div style={{ fontSize: 11, color: '#a59f95', lineHeight: 1.55, marginTop: 10 }}>
              Eigen supplementen staan los van je protocol. Bespreek grote wijzigingen met Thirza.
            </div>
          </div>
        )}
      </Card>

      {/* Water — eigen tracker met glaasjes */}
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
          <H2>Water</H2>
          <div style={{ fontSize: 12, color: '#82A898' }}>
            {((state.waterGlazen||0) * 0.25).toFixed(2).replace('.',',')} van {state.waterDoel} l
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 14 }}>
          {Array.from({ length: glassDoel }).map((_, i) => {
            const filled = i < (state.waterGlazen || 0);
            return (
              <div key={i} onClick={() => setState(s => ({ ...s, waterGlazen: i + 1 }))} style={{
                width: 24, height: 32, borderRadius: '3px 3px 7px 7px',
                border: '1.5px solid #9BBAB3',
                background: filled ? '#82A898' : 'transparent',
                cursor: 'pointer', transition: 'background .15s',
              }}/>
            );
          })}
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div onClick={rmGlass} style={smallBtn}>
            <IconMinus size={14} color="#2F4F4F"/>
          </div>
          <div onClick={addGlass} style={{ ...smallBtn, background: '#82A898', borderColor: '#82A898', color: '#fff' }}>
            <IconPlus size={14} color="#fff"/>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: '#fff' }}>Glas erbij</span>
          </div>
          <div style={{ flex: 1 }}/>
          <div style={{ fontSize: 11, color: '#aaa', alignSelf: 'center' }}>
            Op basis van {state.gewicht} kg
          </div>
        </div>
      </Card>

      {/* Reflectie-entrypoint — opent modal op deze pagina */}
      <div
        onClick={() => setReflectOpen(true)}
        style={{
          background: '#F4F1EA', borderRadius: 14, padding: 16,
          marginBottom: 14, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 14,
        }}
      >
        <div style={{
          width: 40, height: 40, borderRadius: '50%', background: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <IconChart size={19} color="#6B8F84"/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, color: '#2F4F4F', fontWeight: 500, marginBottom: 2 }}>
            {state.reflecties?.[(() => { const d=new Date(); return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; })()]
              ? 'Reflectie van vandaag bijwerken'
              : 'Reflecteer op je dag'}
          </div>
          <div style={{ fontSize: 11.5, color: '#a59f95', lineHeight: 1.5 }}>
            Een paar steekwoorden over hoe je je voelt — Thirza leest mee.
          </div>
        </div>
        <IconArrow size={15} color="#6B8F84"/>
      </div>

      {/* Menu */}
      <div style={{ marginTop: 12 }}>
        <SectionHead title="Wat je vandaag eet" sub="jouw menu"/>
        {meals.map((m, i) => (
          <div key={m.key} style={{
            background: '#fff', borderRadius: 12, padding: 14, marginBottom: 10,
            boxShadow: '0 2px 8px rgba(47,79,79,0.08)',
            display: 'flex', gap: 14, alignItems: 'center',
          }}>
            <div style={{
              width: 52, height: 52, background: '#F4F1EA', borderRadius: 11,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <m.Ic size={26} color="#6B8F84"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11.5, color: '#82A898', marginBottom: 2 }}>{m.key.startsWith('Snack') && Object.keys(state.meals).filter(k => k.startsWith('Snack') && state.meals[k]).length === 1 ? 'Snack' : m.key}</div>
              <div style={{ fontSize: 14.5, fontWeight: 500, color: m.naam ? '#2F4F4F' : '#a59f95', marginBottom: 3, fontStyle: m.naam ? 'normal' : 'italic' }}>{m.naam || 'Nog niets ingepland'}</div>
              <div style={{ fontSize: 11.5, color: '#a0a0a0' }}>{m.tag}</div>
            </div>
            <div onClick={() => {
              // Open Recepten met direct de SwapSheet voor deze maaltijd vandaag
              const jsDay = new Date().getDay(); // 0=zo..6=za
              const dayIdx = (jsDay + 6) % 7;    // 0=ma..6=zo
              setState(s => ({ ...s, swapIntent: { meal: m.key, day: dayIdx }, tab: 'recepten' }));
            }} title="Wissel recept" style={{
              width: 36, height: 36, borderRadius: '50%', background: '#F4F1EA',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', flexShrink: 0,
            }}>
              <IconPen size={14} color="#6B8F84"/>
            </div>
          </div>
        ))}
      </div>

      {reflectOpen && (
        <ReflectieModal
          state={state}
          setState={setState}
          onClose={() => setReflectOpen(false)}
        />
      )}
    </div>
  );
}

const smallBtn = {
  display: 'flex', alignItems: 'center', gap: 6,
  padding: '9px 14px', borderRadius: 8,
  border: '1px solid #cfe0db', background: '#fff',
  cursor: 'pointer',
};

// ScreenRecepten is nu verplaatst naar screens-recepten.jsx
function _LegacyScreenRecepten_unused({ state, setState }) {
  const [tab, setTab] = React.useState('Ontbijt');
  const [query, setQuery] = React.useState('');
  const tabs = ['Ontbijt', 'Lunch', 'Diner', 'Snacks'];
  const activeFilters = Object.entries(state.dieet).filter(([,v]) => v).map(([k]) => k);

  const recepten = {
    Ontbijt: [
      { n: 'Havermout met bosvruchten', tag: 'Glutenvrij · 15 min', Ic: IconBowl, prem: false },
      { n: 'Roerei met spinazie', tag: 'Zuivelvrij · 10 min', Ic: IconEgg, prem: false },
      { n: 'Boekweit pannenkoeken', tag: '25 min', Ic: IconPancake, prem: true },
      { n: 'Smoothiebowl bessen', tag: '10 min', Ic: IconBerries, prem: true },
    ],
    Lunch: [
      { n: 'Groene salade met kikkererwten', tag: 'Glutenvrij · 10 min', Ic: IconSalad, prem: false },
      { n: 'Pompoensoep', tag: '25 min', Ic: IconSoup, prem: false },
      { n: 'Quinoa kom met groenten', tag: '20 min', Ic: IconBowl, prem: true },
      { n: 'Gestoomde vis met kruiden', tag: '30 min', Ic: IconLeaf, prem: true },
    ],
    Diner: [
      { n: 'Wortelsoep met gember', tag: 'Glutenvrij · 30 min', Ic: IconSoup, prem: false },
      { n: 'Kip met zoete aardappel', tag: '40 min', Ic: IconBowl, prem: false },
      { n: 'Linzen curry', tag: '35 min', Ic: IconLeaf, prem: true },
      { n: 'Gebakken zalm met groenten', tag: '30 min', Ic: IconSalad, prem: true },
    ],
    Snacks: [
      { n: 'Appel met amandelpasta', tag: '5 min', Ic: IconApple, prem: false },
      { n: 'Handje walnoten', tag: 'Geen bereiding', Ic: IconSeed, prem: false },
      { n: 'Chia-pudding', tag: '10 min + rusttijd', Ic: IconBerries, prem: true },
      { n: 'Energiebolletjes', tag: '15 min', Ic: IconSeed, prem: true },
    ],
  };

  const filtered = recepten[tab].filter(r =>
    !query || r.n.toLowerCase().includes(query.toLowerCase())
  );

  const toggleFav = (key) => setState(s => ({
    ...s, favs: { ...s.favs, [key]: !s.favs[key] },
  }));
  const toggleFilter = (f) => setState(s => ({
    ...s, dieet: { ...s.dieet, [f]: !s.dieet[f] },
  }));

  return (
    <div style={{ padding: '24px 20px 32px' }}>
      <H1>Recepten</H1>
      <Sub>Afgestemd op jouw protocol</Sub>

      {/* Zoekveld */}
      <div style={{
        background: '#fff', borderRadius: 10, padding: '11px 14px',
        display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14,
        boxShadow: '0 2px 8px rgba(47,79,79,0.05)',
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9BBAB3" strokeWidth="1.8" strokeLinecap="round">
          <circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/>
        </svg>
        <input
          placeholder="Zoek op naam…"
          value={query}
          onChange={e => setQuery(e.target.value)}
          style={{
            flex: 1, border: 'none', outline: 'none', background: 'transparent',
            fontSize: 14, color: '#2F4F4F', fontFamily: "'Montserrat', sans-serif",
          }}
        />
      </div>

      {/* Actieve filters — tikbaar */}
      {activeFilters.length > 0 && (
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 11.5, color: '#a59f95', marginBottom: 8 }}>
            Actieve filters — tik om tijdelijk uit te zetten
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {activeFilters.map(f => (
              <div key={f} onClick={() => toggleFilter(f)} style={{
                display: 'flex', alignItems: 'center', gap: 6,
                background: '#eaf2ef', border: '1px solid #82A898',
                color: '#6B8F84', borderRadius: 20,
                padding: '5px 11px', fontSize: 12, cursor: 'pointer',
              }}>
                {f}
                <IconClose size={11} color="#6B8F84" stroke={2}/>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
        {tabs.map(t => (
          <div key={t} onClick={() => setTab(t)} style={{
            fontSize: 13, padding: '8px 16px', borderRadius: 22,
            background: tab === t ? '#82A898' : '#fff',
            color: tab === t ? '#fff' : '#6B8F84',
            cursor: 'pointer', transition: 'all .15s',
            boxShadow: tab === t ? 'none' : '0 1px 4px rgba(47,79,79,0.05)',
            fontWeight: tab === t ? 500 : 400,
          }}>{t}</div>
        ))}
      </div>

      {/* Recepten grid */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20,
      }}>
        {filtered.map((r, i) => {
          const key = tab + '_' + i;
          const fav = !!state.favs[key];
          return (
            <div key={i} style={{
              background: '#fff', borderRadius: 12, overflow: 'hidden',
              boxShadow: '0 2px 8px rgba(47,79,79,0.08)',
              position: 'relative',
            }}>
              {r.prem && (
                <div style={{
                  position: 'absolute', top: 9, left: 9,
                  background: 'rgba(255,255,255,0.92)', color: '#D9937A',
                  fontSize: 10, padding: '3px 8px', borderRadius: 10, fontWeight: 500,
                  display: 'flex', alignItems: 'center', gap: 4,
                }}><IconStar size={10} color="#D9937A" stroke={2}/> Premium</div>
              )}
              <div onClick={() => toggleFav(key)} style={{
                position: 'absolute', top: 7, right: 7,
                width: 28, height: 28, borderRadius: '50%',
                background: 'rgba(255,255,255,0.85)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer',
              }}>
                <IconHeart size={14} color={fav ? '#D9937A' : '#9BBAB3'} stroke={fav ? 2 : 1.6}
                  style={{ fill: fav ? '#D9937A' : 'none' }}/>
              </div>
              <div style={{
                height: 104, background: '#EAF2EF',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <r.Ic size={42} color="#6B8F84"/>
              </div>
              <div style={{ padding: 12 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#2F4F4F', lineHeight: 1.3, marginBottom: 4 }}>{r.n}</div>
                <div style={{ fontSize: 11, color: '#82A898' }}>{r.tag}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Premium unlock — zachter */}
      <div style={{
        background: '#F4F1EA', borderRadius: 14, padding: 22, textAlign: 'center',
      }}>
        <div style={{ fontFamily: serif(), fontSize: 18, color: '#2F4F4F', marginBottom: 6 }}>
          Meer dan 120 recepten
        </div>
        <div style={{ fontSize: 13, color: '#7d7467', lineHeight: 1.65, marginBottom: 14 }}>
          Premium geeft je toegang tot alle seizoensrecepten die Thirza samenstelt,
          afgestemd op jouw fase en aanpassingen.
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 7,
          background: '#82A898', color: '#fff',
          borderRadius: 8, padding: '11px 22px', fontSize: 14, fontWeight: 500,
          cursor: 'pointer',
        }}>
          Bekijk Premium
          <IconArrow size={14} color="#fff"/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Card, Eyebrow, SectionHead, H1, H2, Sub, Body, ThirzaLine, ThirzaQuote, ThirzaTip,
  Checkbox, Toggle, serif,
  ScreenVandaag,
});