// Sortiment / Abteilungen — Bento-Grid
function Sortiment() {
  const { t } = useT();
  const layout = [
    { id:'metzgerei', size:'lg' },
    { id:'obst',      size:'wd' },
    { id:'backwaren', size:'sm' },
    { id:'kaese',     size:'sm' },
    { id:'oliven',    size:'wd' },
    { id:'gewuerze',  size:'sm' },
    { id:'sueßes',    size:'sm' },
    { id:'tk',        size:'wd' },
  ];
  const map = Object.fromEntries(DEPARTMENTS.map(d => [d.id, d]));

  const headline = t('sortiment.headline');
  const headlineEm = t('sortiment.headlineEm');
  const idx = headline.indexOf(headlineEm);
  const before = idx >= 0 ? headline.slice(0, idx) : headline;
  const after  = idx >= 0 ? headline.slice(idx + headlineEm.length) : '';

  return (
    <section id="sortiment">
      <div className="container">
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, marginBottom:36, flexWrap:'wrap' }}>
          <div>
            <span className="eyebrow">{t('sortiment.eyebrow')}</span>
            <h2 style={{ marginTop:8 }}>{before}<span className="hand" style={{ color:'var(--brick)', fontSize:'1.15em', display:'inline-block', transform:'rotate(-2deg)' }}>{headlineEm}</span>{after}</h2>
          </div>
          <p style={{ maxWidth:380, color:'var(--ink-2)' }}>{t('sortiment.body')}</p>
        </div>

        <div className="bento">
          {layout.map((cell, i) => {
            const d = map[cell.id];
            if (!d) return null;
            const isLg = cell.size === 'lg';
            const name = t(`depts.${d.id}.name`);
            const tag  = t(`depts.${d.id}.tag`);
            const desc = t(`depts.${d.id}.desc`);
            const cellClass = `tile bento-${cell.size}${isLg ? ' bento-hero' : ''}`;
            return (
              <a key={d.id} href={`#${d.id}`} className={cellClass} style={{ position:'relative' }}>
                {d.image
                  ? <ResponsiveImg src={d.image} alt={name} sizes={isLg ? '(min-width: 900px) 50vw, 100vw' : '(min-width: 900px) 25vw, (min-width: 600px) 50vw, 100vw'} pictureStyle={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }} style={{ width:'100%', height:'100%', objectFit:'cover', borderRadius:6, display:'block' }} />
                  : <div className="ph" data-ph={`${t('sortiment.photoPrefix')}${name}`} style={{ position:'absolute', inset:0, borderRadius:6, aspectRatio:'auto' }}></div>
                }
                <div className="bento-meta">
                  <div style={{ display:'flex', alignItems:'center', gap:8, color:'var(--brick)' }}>
                    <Icon name={d.icon} size={isLg?24:18}/>
                    <span className="eyebrow" style={{ color:'var(--gold-deep)', fontSize:isLg?11:10 }}>{String(i+1).padStart(2,'0')} · {tag}</span>
                  </div>
                  <h3 className="bento-h3">{name}</h3>
                  {isLg && <p className="bento-desc">{desc}</p>}
                </div>
              </a>
            );
          })}
        </div>
      </div>
      <style>{`
        .bento{ display:grid; grid-template-columns:1fr; gap:12px; grid-auto-rows:180px; }
        .bento > a{ grid-column: span 1; grid-row: span 1; }
        .bento-hero{ grid-row: span 2; }
        .bento-meta{ position:relative; margin-top:auto; padding:12px 14px;
          background:linear-gradient(to top, rgba(250,246,234,.95) 60%, rgba(250,246,234,0));
          backdrop-filter:blur(2px); }
        .bento-h3{ font-size:18px; margin-top:6px; }
        .bento-hero .bento-h3{ font-size:clamp(22px,5vw,32px); }
        .bento-hero .bento-meta{ padding:18px 20px; }
        .bento-desc{ color:var(--ink-2); font-size:14px; margin-top:6px; }
        @media (min-width: 600px){
          .bento{ grid-template-columns:repeat(2, 1fr); gap:14px; grid-auto-rows:200px; }
          .bento-hero{ grid-column: span 2; grid-row: span 2; }
        }
        @media (min-width: 900px){
          .bento{ grid-template-columns:repeat(4, 1fr); gap:16px; }
          .bento > a{ grid-column: span 1; grid-row: span 1; }
          .bento-hero{ grid-column: span 2; grid-row: span 2; }
          .bento-wd{ grid-column: span 2; }
        }
      `}</style>
    </section>
  );
}
window.Sortiment = Sortiment;