// „Nur bei Azra" — Trend-Produkte, exklusiv im Laden.
// Bilder unter uploads/trend-<slug>.jpg; Namen entweder per i18n
// (trendNames.<key>) oder inline auf dem Eintrag (name).
// Section blendet sich automatisch aus, wenn TRENDS leer ist.
function NurBeiAzra() {
  const { t, lang } = useT();
  if (!Array.isArray(TRENDS) || TRENDS.length === 0) return null;

  const headline = t('trend.headline');
  const headlineEm = t('trend.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 nameOf = (p) => {
    if (p && p.translations && p.translations[lang]) return p.translations[lang];
    if (p && p.translations && p.translations.de) return p.translations.de;
    const k = p && p.key;
    const dict = (t('trendNames') || {});
    if (k && dict[k]) return dict[k];
    return (p && p.name) || '';
  };

  return (
    <section id="nur-bei-azra" className="trend-sec">
      <div className="container">
        <div className="trend-head">
          <span className="eyebrow trend-eyebrow">{t('trend.eyebrow')}</span>
          <h2 className="trend-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>
          <p className="trend-sub">{t('trend.sub')}</p>
        </div>

        <ul className="trend-grid">
          {TRENDS.map((p) => (
            <li key={p.id} className="trend-card">
              <div className="trend-img-wrap">
                {p.image
                  ? <ResponsiveImg src={p.image} alt={nameOf(p)} sizes="(min-width: 900px) 22vw, (min-width: 600px) 32vw, 45vw" style={{ width:'100%', height:'100%', objectFit:'contain', display:'block', padding:8, boxSizing:'border-box' }}/>
                  : <div className="ph" data-ph={nameOf(p)} style={{ aspectRatio:'1 / 2', borderRadius:0 }}></div>
                }
                <div className="trend-stamp" aria-hidden="true">
                  <span>{t('trend.badge')}</span>
                </div>
              </div>
              <div className="trend-name">{nameOf(p)}</div>
              {p.subKey && t('trendSubs.' + p.subKey) && <div className="trend-sub-line">{t('trendSubs.' + p.subKey)}</div>}
              {p.price && (
                <div className="trend-price ltr">
                  {p.oldPrice && <span className="trend-price-old">{p.oldPrice}€</span>}
                  <span className="trend-price-new">{p.price}€</span>
                </div>
              )}
            </li>
          ))}
        </ul>
      </div>

      <style>{`
        .trend-sec{
          background:var(--paper);
          padding-block:48px;
          position:relative;
        }
        .trend-sec::before, .trend-sec::after{
          content:""; position:absolute; left:0; right:0; height:1px;
          background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
        }
        .trend-sec::before{ top:0; }
        .trend-sec::after{ bottom:0; }
        .trend-head{ max-width:680px; margin:0 auto 28px; text-align:center; }
        .trend-eyebrow{ color:var(--brick); }
        .trend-h2{ margin-top:8px; }
        .trend-sub{ color:var(--ink-2); font-size:14px; margin-top:10px; line-height:1.55; }
        .trend-grid{
          list-style:none; margin:0; padding:0;
          display:grid; gap:16px;
          grid-template-columns:repeat(2, minmax(0, 1fr));
        }
        .trend-card{
          display:flex; flex-direction:column; gap:10px;
          transition:transform .25s ease;
        }
        .trend-card:hover{ transform:translateY(-3px); }
        .trend-img-wrap{
          position:relative;
          aspect-ratio:1 / 2;
          overflow:hidden;
          border:1px solid var(--line);
          background:#ffffff;
          border-radius:4px;
        }
        .trend-img-wrap picture{ display:block; width:100%; height:100%; }
        .trend-img-wrap picture img{ width:100%; height:100%; }
        .trend-stamp{
          position:absolute; top:10px; inset-inline-start:10px;
          background:var(--brick); color:var(--paper);
          padding:6px 10px; border-radius:999px;
          font-family:var(--font-mono); font-size:9px; letter-spacing:.16em;
          text-transform:uppercase; line-height:1;
          box-shadow:0 6px 14px rgba(122,46,31,.28);
          transform:rotate(-3deg);
          pointer-events:none;
        }
        .trend-name{
          font-family:var(--font-display);
          font-size:16px; font-weight:600;
          color:var(--ink); line-height:1.25;
          text-align:center;
        }
        .trend-sub-line{
          font-family:var(--font-mono);
          font-size:10px; letter-spacing:.08em; text-transform:uppercase;
          color:var(--ink-2);
          text-align:center;
          margin-top:-6px;
        }
        .trend-price{
          font-family:var(--font-mono);
          font-size:13px; letter-spacing:.04em;
          text-align:center;
          margin-top:-4px;
          font-variant-numeric:tabular-nums;
          display:flex; justify-content:center; align-items:baseline; gap:10px;
        }
        .trend-price-old{ color:var(--ink-2); text-decoration:line-through; opacity:.7; font-size:11px; }
        .trend-price-new{ color:var(--brick); font-weight:700; }
        @media (min-width: 600px){
          .trend-sec{ padding-block:56px; }
          .trend-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
          .trend-stamp{ font-size:10px; padding:7px 12px; top:12px; inset-inline-start:12px; }
          .trend-name{ font-size:17px; }
        }
        @media (min-width: 900px){
          .trend-sec{ padding-block:72px; }
          .trend-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
          .trend-name{ font-size:18px; }
        }
      `}</style>
    </section>
  );
}
window.NurBeiAzra = NurBeiAzra;