// "Diese Woche im Markt" — Kreidetafel; Items aus i18n.heute.items
function HeuteAmMarkt() {
  const { t, fmt } = useT();
  const items = t('heute.items') || [];

  const today = new Date();
  const kw = (() => {
    const d = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    return Math.ceil((((d - yearStart)/86400000)+1)/7);
  })();

  const day = today.getDay() || 7;
  const monday = new Date(today); monday.setDate(today.getDate() - day + 1);
  const saturday = new Date(monday); saturday.setDate(monday.getDate() + 5);
  const span = `${fmt.day(monday)}–${fmt.day(saturday)} ${fmt.monthShort(saturday)}`;

  return (
    <section className="heute-sec">
      <div className="container">
        <div className="chalk heute-chalk">
          <div className="heute-kw">
            <div className="heute-eyebrow">{t('heute.eyebrow')}</div>
            <div className="hand heute-week">{t('heute.kw', { n: fmt.weekNum(kw) })}</div>
            <div className="heute-span">{span}</div>
          </div>
          <ul className="heute-list">
            {items.map((it,i)=>(
              <li key={i} className="hand heute-item">
                <span style={{ color:'#d9b566', fontSize:22 }}>✦</span>{it}
              </li>
            ))}
          </ul>
          <div className="heute-tip">
            <div className="heute-tip-icon">
              <Icon name="tray" size={28}/>
            </div>
            <div className="eyebrow" style={{ color:'#d9c97b', opacity:.7, fontSize:9, whiteSpace:'pre-line', textAlign:'center' }}>{t('heute.tip')}</div>
          </div>
        </div>
      </div>
      <style>{`
        .heute-sec{ padding-block:32px; }
        .heute-chalk{ display:grid; grid-template-columns:1fr; gap:14px; padding:22px 20px; }
        .heute-kw{ border-bottom:1px dashed rgba(244,236,216,.3); padding-bottom:14px; }
        .heute-eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#d9c97b; opacity:.85; }
        .heute-week{ font-size:clamp(34px,9vw,46px); color:#f4ecd8; margin-top:6px; line-height:1; }
        .heute-span{ font-family:var(--font-mono); font-size:11px; color:#d9c97b; opacity:.7; margin-top:6px; letter-spacing:.08em; }
        .heute-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
        .heute-item{ font-size:clamp(18px,5vw,26px); color:#f4ecd8; display:flex; align-items:center; gap:12px; }
        .heute-tip{ display:none; }
        @media (min-width: 600px){
          .heute-sec{ padding-block:40px; }
          .heute-chalk{ padding:26px 28px; }
        }
        @media (min-width: 900px){
          .heute-sec{ padding-block:48px; }
          .heute-chalk{ grid-template-columns:auto 1fr auto; gap:36px; align-items:center; padding:30px 36px; }
          .heute-kw{ border-bottom:0; padding-bottom:0; border-inline-end:1px dashed rgba(244,236,216,.3); padding-inline-end:30px; }
          .heute-tip{ display:flex; flex-direction:column; align-items:center; gap:6px; }
          .heute-tip-icon{ width:64px; height:64px; border-radius:50%; border:2px dashed rgba(244,236,216,.4); display:flex; align-items:center; justify-content:center; color:#d9b566; }
        }
      `}</style>
    </section>
  );
}
window.HeuteAmMarkt = HeuteAmMarkt;