// Rezept des Monats — Teaser auf der Startseite.
// Holt das aktuelle Rezept zur Laufzeit von /api/recipes/current
// (Vercel-Function liest aus KV). Faellt auf die in i18n.jsx hardcodierten
// Ghormeh-Sabzi-Daten zurueck, falls die API nicht erreichbar ist oder noch
// kein Rezept im KV liegt.
function Rezept() {
  const { t, lang } = useT();
  const [remote, setRemote] = React.useState(null);
  const [tried, setTried] = React.useState(false);

  React.useEffect(() => {
    let alive = true;
    fetch('/api/recipes/current', { headers: { Accept: 'application/json' } })
      .then((r) => (r.ok ? r.json() : null))
      .then((json) => {
        if (!alive) return;
        if (json && json.ok && json.recipe) setRemote(json.recipe);
      })
      .catch(() => {})
      .finally(() => { if (alive) setTried(true); });
    return () => { alive = false; };
  }, []);

  // Daten-Quelle wählen: live aus API (für aktuelle Sprache) oder i18n-Fallback.
  const live = remote && remote.translations && remote.translations[lang];
  const name = live ? live.name : t('rezept.name');
  const eyebrow = live ? (live.eyebrow || t('rezept.eyebrow')) : t('rezept.eyebrow');
  const desc = live ? live.desc : t('rezept.desc');
  const stamp = live ? (live.stamp || t('rezept.stamp')) : t('rezept.stamp');
  const ingredients = (live ? live.ingredients : t('rezept.ingredients') || []).slice(0, 6);
  const ingredientsTitle = live ? live.ingredients_title : t('rezept.ingredientsTitle');
  const timeLabel = live ? (live.time_label || t('rezept.time')) : t('rezept.time');
  const timeValue = live ? (live.time_value || t('rezept.timeValue')) : t('rezept.timeValue');
  const portionsLabel = live ? (live.portions_label || t('rezept.portions')) : t('rezept.portions');
  const portions = live ? (live.portions || '4') : '4';
  const levelLabel = live ? (live.level_label || t('rezept.level')) : t('rezept.level');
  const level = live ? (live.level || '★★☆') : '★★☆';
  const ctaCook = live ? (live.cta_cook || t('rezept.ctaCook')) : t('rezept.ctaCook');

  const imgSrc = remote && remote.image_url
    ? remote.image_url
    : 'uploads/rezept-ghormeh-sabzi.jpg';
  const slug = remote && remote.slug ? remote.slug : 'ghormeh-sabzi-tehrani';

  return (
    <section id="rezept" style={{ background:'var(--paper)' }}>
      <div className="container">
        <div className="rec-grid">
          <div className="rec-img-wrap">
            <ResponsiveImg
              src={imgSrc}
              alt={name}
              sizes="(min-width: 900px) 40vw, 100vw"
              style={{ width:'100%', aspectRatio:'4/5', objectFit:'cover', borderRadius:6, display:'block', border:'1px solid var(--line)' }} />
            <div className="rec-stamp">
              {stamp}
            </div>
            <div className="rec-meta">
              <div><div style={{ color:'var(--gold-deep)' }}>{timeLabel}</div><div style={{ fontFamily:'var(--font-display)', fontSize:18, marginTop:2 }}>{timeValue}</div></div>
              <div><div style={{ color:'var(--gold-deep)' }}>{portionsLabel}</div><div style={{ fontFamily:'var(--font-display)', fontSize:18, marginTop:2 }}>{portions}</div></div>
              <div><div style={{ color:'var(--gold-deep)' }}>{levelLabel}</div><div style={{ fontFamily:'var(--font-display)', fontSize:18, marginTop:2 }}>{level}</div></div>
            </div>
          </div>

          <div>
            <span className="eyebrow">{eyebrow}</span>
            <h2 style={{ marginTop:8 }}>{name}</h2>
            <p style={{ marginTop:18, fontSize:'clamp(15px,4vw,17px)', color:'var(--ink-2)', maxWidth:520 }}>{desc}</p>

            <div className="rec-ingbox">
              <div className="eyebrow" style={{ marginBottom:14 }}>{ingredientsTitle}</div>
              <ul className="rec-ing-list">
                {ingredients.map((ing, i) => (
                  <li key={i} style={{ display:'flex', flexWrap:'wrap', alignItems:'baseline', columnGap:12, rowGap:2, paddingBottom:8, borderBottom:'1px dashed var(--line)' }}>
                    <span style={{ fontFamily:'var(--font-display)', fontSize:16, flex:'1 1 60%', minWidth:0 }}>{ing.t}</span>
                    <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-2)', whiteSpace:'nowrap', marginInlineStart:'auto', textAlign:'end' }}>{ing.amt}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div style={{ marginTop:28, display:'flex', gap:14, flexWrap:'wrap' }}>
              <a href={`/rezepte/${slug}`} className="btn gold"><Icon name="tray" size={16}/> {ctaCook}</a>
              <a href="/rezepte" className="btn ghost" style={{ borderColor:'var(--line)' }}>{t('rezept.archive')}</a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .rec-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
        .rec-img-wrap{ position:relative; }
        .rec-stamp{ position:absolute; top:10px; inset-inline-start:10px;
          background:var(--brick); color:var(--paper); padding:7px 12px;
          border-radius:999px; font-family:var(--font-mono); font-size:10px;
          letter-spacing:.14em; text-transform:uppercase; transform:rotate(-4deg);
          box-shadow:0 8px 24px rgba(0,0,0,.18); }
        .rec-meta{ position:static; margin-top:14px;
          background:var(--paper); border:1px solid var(--line);
          padding:12px 14px; border-radius:6px;
          display:flex; gap:14px; justify-content:space-between;
          font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
          box-shadow:0 12px 30px rgba(0,0,0,.12); }
        .rec-meta > div > div:last-child{ font-size:15px; }
        .rec-ingbox{ margin-top:24px; padding:18px 20px;
          background:var(--bg-2); border:1px solid var(--line); border-radius:8px; }
        .rec-ing-list{ list-style:none; margin:0; padding:0;
          display:grid; grid-template-columns:1fr; gap:10px 18px; }
        @media (min-width: 600px){
          .rec-meta{ gap:18px; padding:14px 18px; }
          .rec-meta > div > div:last-child{ font-size:18px; }
          .rec-ing-list{ grid-template-columns:1fr 1fr; }
        }
        @media (min-width: 900px){
          .rec-grid{ grid-template-columns:.9fr 1.1fr; gap:48px; }
          .rec-stamp{ top:-18px; inset-inline-start:-18px; padding:10px 18px; font-size:11px; }
          .rec-meta{ position:absolute; bottom:-22px; inset-inline-end:-22px;
            margin-top:0; padding:14px 18px; gap:18px; }
        }
      `}</style>
    </section>
  );
}
window.Rezept = Rezept;