/* ============================================================
   SAYRU — site-content.jsx
   Live CMS-driven sections: Testimonials, Blog/Duyurular, FAQ.
   Each self-hides when empty. Reads window.__SAYRU_* from the
   bridge; re-renders on 'sayru-live-update'.
   ============================================================ */

function pickLang(obj, lang) {
  if (!obj) return {};
  const o = obj[lang] && Object.values(obj[lang]).some(v => v && String(v).trim()) ? obj[lang] : obj.tr;
  return o || {};
}

/* ---------------- Testimonials ---------------- */
function TestimonialsSection() {
  const { t, lang } = useT();
  const list = (window.__SAYRU_TESTIMONIALS || []);
  if (!list.length) return null;
  return (
    <section className="section section--tm" id="yorumlar">
      <div className="wrap">
        <div className="section-head center reveal">
          <div className="kicker">{t('tm.kick')}</div>
          <h2>{t('tm.title')}</h2>
        </div>
        <div className="tm-wall">
          {list.map((tm, n) => {
            const c = pickLang(tm, lang);
            return (
              <figure className={'tmw reveal d' + ((n % 3) + 1)} key={tm.id}>
                <div className="tmw__stars">{'★'.repeat(tm.rating || 5)}<span className="tmw__off">{'★'.repeat(5 - (tm.rating || 5))}</span></div>
                <blockquote className="tmw__quote">{c.quote}</blockquote>
                <figcaption className="tmw__who">
                  <span className="tmw__avatar">{(tm.name || '?').slice(0, 1)}</span>
                  <span className="tmw__meta"><b>{tm.name}</b><i>{tm.role}{tm.company ? ' · ' + tm.company : ''}</i></span>
                </figcaption>
              </figure>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Blog / Duyurular ---------------- */
function BlogSection() {
  const { t, lang } = useT();
  const list = (window.__SAYRU_BLOG || []).filter(b => b.status === 'published');
  if (!list.length) return null;
  const media = (window.__SAYRU_MEDIA || {});
  return (
    <section className="section section--blog" id="blog">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker">{t('blog.kick')}</div>
          <h2>{t('blog.title')}</h2>
          <p className="lead">{t('blog.lead')}</p>
        </div>
        <div className="blog-grid">
          {list.slice(0, 6).map((b, n) => {
            const c = pickLang(b, lang);
            const cover = b.coverUrl || (media[b.cover] && media[b.cover].url);
            return (
              <article className={'blogc reveal d' + ((n % 3) + 1)} key={b.id}>
                <div className="blogc__cover">
                  {cover ? <img src={cover} alt={c.title} /> : <span className="blogc__ph"><Icon name="iz" size={26} /></span>}
                </div>
                <div className="blogc__body">
                  <time className="blogc__date mono">{new Date(b.ts).toLocaleDateString(lang === 'en' ? 'en-GB' : 'tr-TR', { day: '2-digit', month: 'short', year: 'numeric' })}</time>
                  <h3 className="blogc__title">{c.title}</h3>
                  <p className="blogc__excerpt">{c.excerpt}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQSection() {
  const { t, lang } = useT();
  const list = (window.__SAYRU_FAQ || []);
  const [open, setOpen] = React.useState(0);
  if (!list.length) return null;
  return (
    <section className="section section--faqs" id="sss">
      <div className="wrap sfaq__in">
        <div className="sfaq__head reveal">
          <div className="kicker">{t('faq.kick')}</div>
          <h2>{t('faq.title')}</h2>
          <p className="lead" style={{ marginTop: 14 }}>{t('faq.lead')}</p>
        </div>
        <div className="sfaq__list reveal d1">
          {list.map((f, n) => {
            const c = pickLang(f, lang);
            return (
              <div className={'sfaq__item' + (open === n ? ' open' : '')} key={f.id}>
                <button className="sfaq__q" onClick={() => setOpen(open === n ? -1 : n)} aria-expanded={open === n}>
                  <span>{c.q}</span>
                  <span className="sfaq__ic"><Icon name="plus" size={18} /></span>
                </button>
                <div className="sfaq__a"><div className="sfaq__a-in">{c.a}</div></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TestimonialsSection, BlogSection, FAQSection, pickLang });