// Vorbestellung — Erklärung + 3-Schritte-Ablauf + Telefon-CTA
function Vorbestellung() {
  const { t } = useT();
  const PHONE = '+4917624846057';
  const PHONE_HUMAN = t('site.phoneHuman');

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

  const benefits = t('vorbestellung.benefits') || [];
  const steps = t('vorbestellung.steps') || [];
  const benefitIcons = ['clock', 'bag', 'tray'];
  const stepIcons = ['phone', 'tray', 'bag'];

  return (
    <section id="vorbestellung" style={{ background:'var(--bg-2)' }}>
      <div className="container">
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, marginBottom:32, flexWrap:'wrap' }}>
          <div>
            <span className="eyebrow">{t('vorbestellung.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:420, color:'var(--ink-2)' }}>{t('vorbestellung.body')}</p>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 220px), 1fr))', gap:14, marginBottom:28 }}>
          {benefits.map((b, i) => (
            <div key={i} style={{ background:'var(--paper)', border:'1px solid var(--line)', borderRadius:8, padding:'20px 22px', display:'flex', gap:14, alignItems:'flex-start' }}>
              <div style={{ color:'var(--brick)', flexShrink:0, marginTop:2 }}>
                <Icon name={benefitIcons[i] || 'star'} size={24}/>
              </div>
              <div>
                <div style={{ fontFamily:'var(--font-display)', fontSize:18, fontWeight:600, color:'var(--ink)' }}>{b.t}</div>
                <div style={{ fontSize:14, color:'var(--ink-2)', marginTop:4, lineHeight:1.45 }}>{b.d}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginBottom:28 }}>
          <div className="eyebrow" style={{ marginBottom:14 }}>{t('vorbestellung.howEyebrow')}</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 220px), 1fr))', gap:14 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ background:'var(--paper)', border:'1px solid var(--line)', borderRadius:8, padding:'22px 24px', position:'relative' }}>
                <div style={{ position:'absolute', top:14, right:18, fontFamily:'var(--font-display)', fontSize:42, fontWeight:600, color:'var(--gold)', opacity:.35, lineHeight:1 }}>{String(i+1).padStart(2,'0')}</div>
                <div style={{ color:'var(--brick)', marginBottom:10 }}>
                  <Icon name={stepIcons[i] || 'arrow'} size={22}/>
                </div>
                <div style={{ fontFamily:'var(--font-display)', fontSize:19, fontWeight:600, color:'var(--ink)' }}>{s.t}</div>
                <div style={{ fontSize:14, color:'var(--ink-2)', marginTop:6, lineHeight:1.5 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding:'22px 26px', background:'var(--paper)', border:'1px dashed var(--line)', borderRadius:8, display:'flex', gap:20, alignItems:'center', flexWrap:'wrap' }}>
          <div style={{ color:'var(--brick)' }}>
            <Icon name="phone" size={26}/>
          </div>
          <div style={{ flex:1, minWidth:220 }}>
            <div className="eyebrow">{t('vorbestellung.callEyebrow')}</div>
            <div style={{ fontFamily:'var(--font-display)', fontSize:24, fontWeight:600, marginTop:4 }} className="ltr">{PHONE_HUMAN}</div>
            <div style={{ fontSize:13, color:'var(--ink-2)', marginTop:4 }}>{t('vorbestellung.callHint')}</div>
          </div>
          <a href={`tel:${PHONE}`} className="btn">{t('common.callNow')}</a>
        </div>
      </div>
    </section>
  );
}
window.Vorbestellung = Vorbestellung;