// Hero — drei Layouts, umschaltbar via Tweaks: 'editorial' | 'split' | 'stamp'

function useWeekLabel() {
  const { lang, t, fmt } = useT();
  const today = new Date();
  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 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 span = `${fmt.day(monday)}–${fmt.day(saturday)} ${fmt.monthShort(saturday)}`;
  return `${t('hero.kw', { n: fmt.weekNum(kw) })} · ${span}`;
}

function HeroEditorial() {
  const { t } = useT();
  const week = useWeekLabel();
  const ed = t('hero.editorial');
  return (
    <section id="top" className="hero-ed-sec">
      <div className="container-wide">
        <div className="hero-ed-grid">
          <div>
            <div className="hero-ed-eyebrow">
              <span className="eyebrow">{t('hero.week', { week })}</span>
              <span className="rule" style={{ flex:1 }}></span>
            </div>
            <h1>
              {ed.line1}<br/>
              {ed.line2}<br/>
              <span className="hand" style={{ color:'var(--brick)', fontSize:'1.2em', display:'inline-block', transform:'rotate(-3deg)' }}>{ed.line3}</span>
            </h1>
            <p className="hero-ed-body">{ed.body}</p>
            <div className="hero-ed-ctas">
              <a href="#angebote" className="btn"><Icon name="tray" size={16}/> {ed.ctaDeals}</a>
              <a href="#standort" className="btn ghost"><Icon name="pin" size={16}/> {ed.ctaLocation}</a>
            </div>
            <div className="hero-ed-stats">
              {(ed.stats || []).map((s,i)=>(
                <div key={i} style={{ borderTop:'1px solid var(--line)', paddingTop:14 }}>
                  <div className="eyebrow" style={{ marginBottom:6 }}>{s.k}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:18 }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="hero-ed-img">
            <ResponsiveImg
              src="uploads/hero-storefront.jpg"
              alt={ed.photoCaption}
              sizes="(min-width: 900px) 50vw, 100vw"
              loading="eager"
              fetchpriority="high"
              style={{ width:'100%', aspectRatio:'3/2', objectFit:'cover', borderRadius:6, display:'block', border:'1px solid var(--line)' }} />
            <div className="hero-ed-stamp">
              <img src="assets/logo.png" alt="" width="128" height="128" style={{ filter:'drop-shadow(0 10px 30px rgba(0,0,0,.18))' }} />
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .hero-ed-sec{ padding-top:32px; padding-bottom:40px; }
        .hero-ed-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:end; }
        .hero-ed-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
        .hero-ed-eyebrow .rule{ display:none; }
        .hero-ed-body{ margin-top:20px; font-size:clamp(15px,4vw,18px); color:var(--ink-2); max-width:520px; }
        .hero-ed-ctas{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
        .hero-ed-stats{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; }
        .hero-ed-stats > div:nth-child(3){ grid-column:1 / -1; }
        .hero-ed-img{ position:relative; }
        .hero-ed-stamp{ position:absolute; bottom:-14px; inset-inline-start:-10px; transform:rotate(-6deg); }
        .hero-ed-stamp img{ width:84px; height:84px; }
        @media (min-width: 600px){
          .hero-ed-sec{ padding-top:40px; padding-bottom:56px; }
          .hero-ed-stamp img{ width:104px; height:104px; }
          .hero-ed-stamp{ bottom:-18px; }
          .hero-ed-body{ margin-top:28px; }
          .hero-ed-ctas{ margin-top:32px; gap:14px; }
        }
        @media (min-width: 900px){
          .hero-ed-sec{ padding-top:48px; padding-bottom:64px; }
          .hero-ed-grid{ grid-template-columns:1.15fr .85fr; gap:48px; }
          .hero-ed-eyebrow{ flex-wrap:nowrap; gap:14px; margin-bottom:24px; }
          .hero-ed-eyebrow .rule{ display:block; }
          .hero-ed-stats{ grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
          .hero-ed-stats > div:nth-child(3){ grid-column:auto; }
          .hero-ed-stamp img{ width:128px; height:128px; }
          .hero-ed-stamp{ bottom:-22px; inset-inline-start:-22px; }
        }
      `}</style>
    </section>
  );
}

function HeroSplit() {
  const { t } = useT();
  const sp = t('hero.split');
  const headline = sp.headline; const headlineEm = sp.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="top" style={{ padding:0 }}>
      <div className="hero-split-grid">
        <div className="hero-split-pad">
          <span className="eyebrow" style={{ marginBottom:18 }}>{sp.eyebrow}</span>
          <h1>{sp.line1}<br/>{sp.line2}<br/><span className="hand" style={{ color:'var(--brick)', fontSize:'1.2em', display:'inline-block', transform:'rotate(-2deg)' }}>{sp.line3}</span></h1>
          <p style={{ marginTop:20, fontSize:'clamp(15px,4vw,18px)', color:'var(--ink-2)', maxWidth:480 }}>{sp.body}</p>
          <div style={{ marginTop:24, display:'flex', gap:12, flexWrap:'wrap' }}>
            <a href="#angebote" className="btn"><Icon name="tray" size={16}/> {sp.ctaDeals}</a>
          </div>
        </div>
        <div className="hero-split-pad-2">
          <div className="eyebrow" style={{ marginBottom:18 }}>{sp.weekEyebrow}</div>
          <h2 style={{ marginBottom:20 }}>{before}<em style={{ fontStyle:'italic', color:'var(--brick)' }}>{headlineEm}</em>{after}</h2>
          <div style={{ display:'grid', gap:12 }}>
            {DEALS.slice(0,3).map(d=>(
              <div key={d.id} style={{ display:'grid', gridTemplateColumns:'56px 1fr auto', gap:12, alignItems:'center', background:'var(--paper)', border:'1px solid var(--line)', borderRadius:6, padding:12 }}>
                <div className="ph" data-ph={t(`deptNames.${d.deptKey}`)} style={{ aspectRatio:'1', borderRadius:4 }}></div>
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:'clamp(16px,4vw,20px)', fontWeight:600 }}>{t(`deals.${d.key}.name`)}</div>
                  <div style={{ color:'var(--ink-2)', fontSize:13, marginTop:2 }}>{t(`deals.${d.key}.sub`)} · {t(`units.${d.unitKey}`)}</div>
                </div>
                <div style={{ textAlign:'end' }}>
                  <div className="ltr" style={{ textDecoration:'line-through', color:'var(--ink-2)', fontSize:12 }}>{d.old} €</div>
                  <div className="ltr" style={{ fontFamily:'var(--font-display)', fontSize:'clamp(18px,4.6vw,24px)', fontWeight:700, color:'var(--brick)' }}>{d.price} €</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .hero-split-grid{ display:grid; grid-template-columns:1fr; }
        .hero-split-pad{ padding:36px 18px; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--line); }
        .hero-split-pad-2{ background:var(--bg-2); padding:32px 18px; display:flex; flex-direction:column; justify-content:center; position:relative; }
        @media (min-width: 600px){
          .hero-split-pad{ padding:48px 28px; }
          .hero-split-pad-2{ padding:44px 28px; }
        }
        @media (min-width: 900px){
          .hero-split-grid{ grid-template-columns:1fr 1fr; min-height:78vh; }
          .hero-split-pad{ padding:72px 56px; border-bottom:0; border-inline-end:1px solid var(--line); }
          .hero-split-pad-2{ padding:56px 56px; }
        }
      `}</style>
    </section>
  );
}

function HeroStamp() {
  const { t } = useT();
  const st = t('hero.stamp');
  return (
    <section id="top" className="hero-stamp-sec" style={{ background:'var(--bg-2)' }}>
      <div className="container" style={{ display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center' }}>
        <div className="hero-stamp-logo">
          <img src="assets/logo.png" alt={t('site.name')} style={{ width:'100%', height:'100%', objectFit:'contain', filter:'drop-shadow(0 16px 40px rgba(42,27,18,.18))' }} />
        </div>
        <span className="eyebrow">{t('site.address')} · {t('site.city')}</span>
        <h1 style={{ marginTop:12, maxWidth:980, textAlign:'center' }}>
          {st.line1}<br/><span className="hand" style={{ color:'var(--brick)', fontSize:'1.2em', display:'inline-block', transform:'rotate(-2deg)' }}>{st.line2}</span> {st.line3}
        </h1>
        <p style={{ marginTop:20, fontSize:'clamp(15px,4vw,18px)', color:'var(--ink-2)', maxWidth:640 }}>{st.body}</p>
        <div style={{ marginTop:24, display:'flex', gap:12, flexWrap:'wrap', justifyContent:'center' }}>
          <a href="#angebote" className="btn"><Icon name="tray" size={16}/> {st.ctaDeals}</a>
          <a href="#metzgerei" className="btn ghost">{st.ctaButchery}</a>
        </div>
        <div className="hero-stamp-stats">
          {(st.stats || []).map((s,i)=>(
            <div key={i} style={{ textAlign:'center' }}>
              <div className="hero-stamp-stat-n">{s.n}</div>
              <div className="eyebrow" style={{ marginTop:6 }}>{s.t}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .hero-stamp-sec{ padding-top:36px; padding-bottom:48px; }
        .hero-stamp-logo{ position:relative; width:140px; height:140px; margin-bottom:16px; }
        .hero-stamp-stats{ margin-top:32px; display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
        .hero-stamp-stat-n{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--brick); }
        @media (min-width: 600px){
          .hero-stamp-sec{ padding-top:48px; padding-bottom:64px; }
          .hero-stamp-logo{ width:180px; height:180px; margin-bottom:20px; }
          .hero-stamp-stats{ gap:36px; margin-top:40px; }
          .hero-stamp-stat-n{ font-size:32px; }
        }
        @media (min-width: 900px){
          .hero-stamp-sec{ padding-top:64px; padding-bottom:80px; }
          .hero-stamp-logo{ width:220px; height:220px; margin-bottom:24px; }
          .hero-stamp-stats{ gap:48px; margin-top:48px; }
          .hero-stamp-stat-n{ font-size:36px; }
        }
      `}</style>
    </section>
  );
}

function Hero({ layout }) {
  if (layout === 'split') return <HeroSplit/>;
  if (layout === 'stamp') return <HeroStamp/>;
  return <HeroEditorial/>;
}

window.Hero = Hero;