// Metzgerei — dunkel & edel — Mobile-First
function Metzgerei() {
  const { t } = useT();
  const cards = t('metzgerei.cards') || [];
  return (
    <section id="metzgerei" className="dark metz-sec">
      <div className="container-wide">
        <div className="metz-grid">
          <div className="metz-img-wrap">
            <ResponsiveImg
              src="uploads/metzgerei-theke.jpg"
              alt={t('metzgerei.photoCaption')}
              sizes="(min-width: 900px) 50vw, 100vw"
              style={{ width:'100%', aspectRatio:'3/2', objectFit:'cover', borderRadius:6, display:'block', border:'1px solid rgba(244,232,210,.12)' }} />
            <div className="metz-halal">
              <Icon name="halal" size={28}/>
              <div>
                <div className="eyebrow" style={{ color:'var(--gold)', opacity:.7 }}>{t('metzgerei.qualityEyebrow')}</div>
                <div style={{ fontFamily:'var(--font-display)', fontSize:18, color:'var(--gold)' }}>{t('metzgerei.halal')}</div>
              </div>
            </div>
          </div>
          <div>
            <span className="eyebrow" style={{ color:'var(--gold)', opacity:.7 }}>{t('metzgerei.eyebrow')}</span>
            <h2 style={{ marginTop:8, color:'var(--ink)' }}>
              {t('metzgerei.line1')}<br/>{t('metzgerei.line2')}<br/>
              <span className="hand" style={{ color:'var(--gold)', fontSize:'1.2em', display:'inline-block', transform:'rotate(-2deg)' }}>{t('metzgerei.line3')}</span>
            </h2>
            <p className="metz-body">{t('metzgerei.body')}</p>
            <div className="metz-cards">
              {cards.map((x,i)=>(
                <div key={i} style={{ borderTop:'1px solid rgba(244,232,210,.18)', paddingTop:14 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:'clamp(18px,4vw,22px)', fontWeight:600, color:'var(--gold)' }}>{x.t}</div>
                  <div style={{ marginTop:6, color:'var(--ink-2)', fontSize:14 }}>{x.d}</div>
                </div>
              ))}
            </div>
            <div className="metz-ctas">
              <a href="tel:+4917624846057" className="btn" style={{ background:'var(--gold)', borderColor:'var(--gold)', color:'#1A0F0A' }}>
                <Icon name="phone" size={16}/> {t('metzgerei.ctaCall', { phone: t('site.phoneHuman') })}
              </a>
              <a href="#standort" className="btn ghost" style={{ borderColor:'rgba(244,232,210,.4)', color:'var(--ink)' }}>
                {t('common.visit')}
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .metz-sec{ padding-block:64px; }
        .metz-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
        .metz-img-wrap{ position:relative; margin-bottom:14px; }
        .metz-halal{ position:static; inset:auto; margin-top:14px;
          background:#1A0F0A; border:1px solid rgba(217,181,102,.4);
          padding:14px 16px; border-radius:6px; color:var(--gold);
          display:flex; align-items:center; gap:14px; }
        .metz-body{ margin-top:20px; font-size:clamp(15px,4vw,18px); color:var(--ink-2); max-width:560px; line-height:1.65; }
        .metz-cards{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:560px; }
        .metz-ctas{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
        @media (min-width: 600px){
          .metz-sec{ padding-block:88px; }
          .metz-grid{ gap:48px; }
          .metz-body{ margin-top:24px; }
          .metz-cards{ margin-top:36px; gap:24px; }
          .metz-ctas{ margin-top:36px; gap:14px; }
        }
        @media (min-width: 900px){
          .metz-sec{ padding-block:120px; }
          .metz-grid{ grid-template-columns:1fr 1.1fr; gap:64px; }
          .metz-img-wrap{ margin-bottom:0; }
          .metz-halal{ position:absolute; bottom:-28px; inset-inline-end:-28px;
            margin-top:0; padding:18px 22px; }
        }
      `}</style>
    </section>
  );
}
window.Metzgerei = Metzgerei;