// Marquee, Newsletter, Footer, Cookie-Banner — alle i18n-fähig

function Marquee() {
  const { t } = useT();
  const slogans = t('marquee') || [];
  // Live-Preise aus DEALS — Produktnamen via t('deals.<key>.name')
  const prices = (typeof DEALS !== 'undefined' ? DEALS : []).slice(0,6).map(d => {
    const name = t(`deals.${d.key}.name`);
    const unit = t(`units.${d.unitKey}`);
    return `${name} · ${d.price} € / ${unit}`;
  });
  const items = [];
  const max = Math.max(slogans.length, prices.length);
  for (let i=0; i<max; i++){
    if (prices[i]) items.push(prices[i]);
    if (slogans[i]) items.push(slogans[i]);
  }
  const all = [...items, ...items, ...items];
  return (
    <React.Fragment>
      <div className="scallop"></div>
      <div className="marquee">
        <div className="marquee-track">
          {all.map((s,i)=>(
            <span key={i}>{s} <em>✦</em></span>
          ))}
        </div>
      </div>
      <div className="scallop-top"></div>
    </React.Fragment>
  );
}

function Newsletter() {
  const { t } = useT();
  const [done, setDone] = React.useState(false);
  const headline = t('newsletter.headline');
  const headlineEm = t('newsletter.headlineEm');
  // Headline mit Hand-Akzent: split vor 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="newsletter" className="nl-sec">
      <div className="container nl-grid">
        <div>
          <span className="eyebrow">{t('newsletter.eyebrow')}</span>
          <h2 style={{ marginTop:8 }}>
            {before}
            {idx >= 0 && (
              <><br/><span className="hand" style={{ color:'var(--brick)', fontSize:'1.15em', display:'inline-block', transform:'rotate(-2deg)' }}>{headlineEm}</span></>
            )}
            {after}
          </h2>
          <p style={{ marginTop:18, color:'var(--ink-2)', maxWidth:440 }}>{t('newsletter.body')}</p>
        </div>
        <form onSubmit={(e)=>{e.preventDefault(); setDone(true)}} style={{ display:'flex', gap:0, background:'var(--paper)', border:'1px solid var(--line)', borderRadius:999, padding:6, alignItems:'center' }}>
          <Icon name="phone" size={18}/>
          <input className="nl-input" type="tel" inputMode="tel" autoComplete="tel" pattern="[0-9 +()\-]{6,}" placeholder={done ? t('newsletter.placeholderDone') : t('newsletter.placeholder')} required disabled={done}/>
          <button className="btn" type="submit" style={{ borderRadius:999, padding:'12px 22px', fontSize:13 }}>{done ? '✓' : t('newsletter.submit')}</button>
        </form>
      </div>
      <style>{`
        .nl-sec{ padding-block:48px; }
        .nl-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
        @media (min-width: 600px){ .nl-sec{ padding-block:64px; } .nl-grid{ gap:32px; } }
        @media (min-width: 900px){ .nl-sec{ padding-block:88px; } .nl-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
      `}</style>
    </section>
  );
}

function FooterLangList() {
  const { lang, setLang } = useT();
  return (
    <div>
      <div className="eyebrow" style={{ color:'var(--gold)', opacity:.8, marginBottom:14 }}>
        {/* mehrsprachiger Section-Titel, damit Nicht-DE-Lesende erkennen, was hier wählbar ist */}
        Sprache · زبان · Dil · اللغة
      </div>
      <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:8, fontSize:14 }}>
        {LANGS.map(l => {
          const active = l.code === lang;
          return (
            <li key={l.code}>
              <button onClick={() => setLang(l.code)}
                aria-pressed={active}
                style={{
                  background:'transparent', border:0, padding:0, cursor:'pointer',
                  color: active ? 'var(--gold)' : 'rgba(255,255,255,.78)',
                  display:'flex', alignItems:'center', gap:10,
                  textDecoration: active ? 'underline' : 'none', textUnderlineOffset:4,
                  font:'inherit', fontWeight: active ? 600 : 400
                }}>
                <span style={{ fontSize:16 }}>{l.flag}</span>
                <span dir={l.dir} style={{ fontFamily: (l.code==='fa'||l.code==='ar') ? '"Vazirmatn","Noto Naskh Arabic",sans-serif' : 'inherit' }}>{l.native}</span>
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

function Footer() {
  const { t } = useT();
  return (
    <footer className="ft-root">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <img src="assets/logo.png" alt="" width="52" height="52" style={{ width:52, height:52, objectFit:'contain' }}/>
              <div style={{ fontFamily:'var(--font-display)', fontSize:24, fontWeight:700 }}>{t('site.name')}</div>
            </div>
            <p style={{ marginTop:14, color:'rgba(255,255,255,.65)', maxWidth:340, fontSize:14 }}>{t('footer.tagline')}</p>
          </div>
          <div>
            <div className="eyebrow" style={{ color:'var(--gold)', opacity:.8, marginBottom:14 }}>{t('footer.contact')}</div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:10, fontSize:14, color:'rgba(255,255,255,.78)' }}>
              <li>{t('site.address')}<br/>{t('site.city')}</li>
              <li><a href="tel:+4917624846057" className="ltr">{t('site.phoneHuman')}</a></li>
              <li><a href="mailto:info@azra-markt.de" className="ltr">info@azra-markt.de</a></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ color:'var(--gold)', opacity:.8, marginBottom:14 }}>{t('footer.market')}</div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:10, fontSize:14, color:'rgba(255,255,255,.78)' }}>
              <li><a href="#sortiment">{t('footer.links.sortiment')}</a></li>
              <li><a href="#angebote">{t('footer.links.angebote')}</a></li>
              <li><a href="#rezept">{t('footer.links.rezept')}</a></li>
              <li><a href="#metzgerei">{t('footer.links.metzgerei')}</a></li>
              <li><a href="#stimmen">{t('footer.links.stimmen')}</a></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ color:'var(--gold)', opacity:.8, marginBottom:14 }}>{t('footer.legal')}</div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:10, fontSize:14, color:'rgba(255,255,255,.78)' }}>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); window.openLegal && window.openLegal('impressum');}}>{t('footer.links.impressum')}</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); window.openLegal && window.openLegal('datenschutz');}}>{t('footer.links.datenschutz')}</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault(); window.openLegal && window.openLegal('agb');}}>{t('footer.links.agb')}</a></li>
            </ul>
          </div>
          <FooterLangList/>
        </div>
        <div style={{ marginTop:48, paddingTop:24, borderTop:'1px solid rgba(255,255,255,.1)', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:14, color:'rgba(255,255,255,.5)', fontSize:12, fontFamily:'var(--font-mono)', letterSpacing:'.06em' }}>
          <span>{t('footer.copyright')}</span>
          <span>{t('footer.slogan')}</span>
        </div>
      </div>
      <style>{`
        .ft-root{ background:var(--ink); color:var(--paper); padding-block:48px; }
        .footer-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
        .ft-root ul a, .ft-root ul li > a{ display:inline-flex; align-items:center; min-height:36px; padding-block:4px; }
        .ft-root ul button{ min-height:40px; }
        @media (min-width: 600px){
          .ft-root{ padding-block:56px; }
          .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
        }
        @media (min-width: 980px){
          .ft-root{ padding-block:64px; }
          .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:36px; }
          .ft-root ul a, .ft-root ul li > a{ min-height:0; padding-block:0; }
        }
      `}</style>
    </footer>
  );
}

function CookieBanner() {
  const { t } = useT();
  const [open, setOpen] = React.useState(() => {
    try { return !localStorage.getItem('azra_consent'); } catch(e) { return true; }
  });

  const decide = (level) => {
    try { localStorage.setItem('azra_consent', level); } catch(e) {}
    if (level === 'all' && typeof window.loadAnalytics === 'function') {
      window.loadAnalytics();
    }
    setOpen(false);
  };

  if (!open) return null;
  return (
    <div className="cookie">
      <div style={{ flex:1, fontSize:13, color:'var(--ink-2)' }}>
        {t('cookie.text')}{' '}
        <a href="#" onClick={(e)=>{e.preventDefault(); window.openLegal && window.openLegal('datenschutz');}} style={{ textDecoration:'underline' }}>{t('cookie.linkLabel')}</a>.
      </div>
      <div style={{ display:'flex', gap:8 }}>
        <button className="btn ghost" style={{ padding:'10px 14px', fontSize:13 }} onClick={()=>decide('essential')}>{t('cookie.onlyEssential')}</button>
        <button className="btn" style={{ padding:'10px 14px', fontSize:13 }} onClick={()=>decide('all')}>{t('cookie.acceptAll')}</button>
      </div>
    </div>
  );
}

Object.assign(window, { Marquee, Newsletter, Footer, FooterLangList, CookieBanner });