// Rezepte-Index — Liste aller veroeffentlichten Rezepte.
// Mountet sich an #app in /rezepte/index.html (statisches Shell-HTML, das alle
// Site-Komponenten laedt). Verwendet damit den gleichen Header/Footer wie der
// Rest der Site.
//
// Datenquelle: GET /api/recipes/list

function RezeptListEntry({ item }) {
  const ts = item.published_at ? new Date(item.published_at) : null;
  const dateLabel = ts && !isNaN(ts.getTime())
    ? ts.toLocaleDateString('de-DE', { year: 'numeric', month: 'long' })
    : '';
  const img = item.image_url || 'uploads/rezept-ghormeh-sabzi.jpg';
  return (
    <a href={`/rezepte/${encodeURIComponent(item.slug)}`} className="rec-card">
      <div className="rec-card-img">
        <ResponsiveImg src={img} alt={item.name_de || item.slug} sizes="(min-width: 900px) 25vw, (min-width: 600px) 33vw, 50vw" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
      </div>
      <div className="rec-card-meta">
        {dateLabel && <span className="eyebrow">{dateLabel}</span>}
        <h2 className="rec-card-title">{item.name_de || item.slug}</h2>
      </div>
    </a>
  );
}

function RezepteIndexPage() {
  const { t } = useT();
  const [items, setItems] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    document.title = `${t('nav.rezept') || 'Rezepte'} — ${t('site.name')}`;
  }, [t]);

  React.useEffect(() => {
    let alive = true;
    fetch('/api/recipes/list', { headers: { Accept: 'application/json' } })
      .then((r) => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)))
      .then((json) => {
        if (!alive) return;
        if (json && json.ok && Array.isArray(json.items)) setItems(json.items);
        else setItems([]);
      })
      .catch((err) => { if (alive) setError(err.message || 'Fehler beim Laden'); });
    return () => { alive = false; };
  }, []);

  const loading = items === null && !error;

  return (
    <React.Fragment>
      <Header/>

      <main id="main">
        <section style={{ background:'var(--paper)' }}>
          <div className="container">
            <a href="/" style={{ fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.08em', color:'var(--ink-2)', textTransform:'uppercase', display:'inline-block', marginBottom:24 }}>
              ← Zur Startseite
            </a>
            <span className="eyebrow">Aus dem Markt — auf den Tisch</span>
            <h1 style={{ marginTop:8 }}>Rezepte aus dem Azra Markt</h1>
            <p style={{ marginTop:18, fontSize:17, color:'var(--ink-2)', maxWidth:640 }}>
              Persische, türkische und mediterrane Hausmannskost — jeden Monat ein neues
              Rezept, das wir in unserer Halal-Metzgerei kochen, schmecken
              und so aufschreiben, dass es bei dir zu Hause genauso gelingt. Alle Zutaten findest du
              direkt bei uns am Markt in Taunusstein.
            </p>
            <p style={{ marginTop:14, fontSize:15, color:'var(--ink-2)', maxWidth:640, lineHeight:1.7 }}>
              Von Ghormeh Sabzi über Lahmacun bis zu Mantı — die Klassiker des östlichen Mittelmeers
              und Vorderasiens, mit ehrlichen Tipps zu Gewürzen, Konsistenz und Servieren. Lamm,
              Rind, Kalb und Hähnchen schneiden wir frisch an der Theke; Granatapfelsirup, Sumach,
              getrocknete Limetten (Limu Omani), Bulgur und Reis halten wir lose oder im Paket
              bereit. Wer ein Rezept nachkochen will, kann uns vorab anrufen — wir packen alles
              zusammen.
            </p>
          </div>
        </section>

        <section style={{ background:'var(--bg)' }}>
          <div className="container">
            {loading && <div className="eyebrow" style={{ textAlign:'center', padding:'40px 0' }}>Lädt…</div>}
            {error && <div style={{ textAlign:'center', padding:'40px 0', color:'var(--brick)' }}>Konnte Rezepte nicht laden: {error}</div>}
            {!loading && !error && items.length === 0 && (
              <div style={{ textAlign:'center', padding:'40px 0', color:'var(--ink-2)' }}>
                Noch keine Rezepte veröffentlicht.
              </div>
            )}
            {!loading && !error && items.length > 0 && (
              <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 150px), 1fr))', gap:12 }}>
                {items.map((r) => <RezeptListEntry key={r.slug} item={r} />)}
              </div>
            )}
          </div>
        </section>
      </main>

      <Footer/>
      <CookieBanner/>
      <LegalModal/>

      <style>{`
        .rec-card{ display:block; background:var(--paper); border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; color:inherit; }
        .rec-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.07); }
        .rec-card-img{ aspect-ratio:1/1; overflow:hidden; background:var(--bg-2); }
        .rec-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
        .rec-card-meta{ padding:12px 14px 16px; }
        .rec-card-meta .eyebrow{ font-size:10px; letter-spacing:.16em; }
        .rec-card-meta .rec-card-title{ margin:6px 0 0; font-size:21px; line-height:1.2; font-weight:700; }
      `}</style>
    </React.Fragment>
  );
}

function RezepteIndexApp() {
  return (
    <I18nProvider>
      <RezepteIndexPage/>
    </I18nProvider>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<RezepteIndexApp/>);