// academy-perks.jsx — مزايا أكاديمية المبتكرين: benefits, science-book shelf, one-team exchange

function AcademyPerks({ t, L, go, data }) {
  const wa = (data && data.contact && data.contact.whatsapp) || '';
  const [group, setGroup] = React.useState('all');
  const books = group === 'all' ? INNOVATION_BOOKS : INNOVATION_BOOKS.filter(b => b.group === group);
  const groups = [
    { id: 'all', label: { ar: 'الكل', en: 'All' } },
    { id: 'core', label: { ar: 'أساسيات الابتكار', en: 'Innovation core' } },
    { id: 'method', label: { ar: 'أدوات ومنهجيات', en: 'Methods & tools' } },
    { id: 'health', label: { ar: 'ابتكار صحي', en: 'Health innovation' } },
  ];

  return (
    <React.Fragment>
      {/* benefits */}
      <section className="section" id="acad-perks">
        <div className="wrap">
          <Reveal><Head eyebrow={t('perks_eyebrow')} title={t('perks_title')} sub={t('perks_sub')} icon="award" /></Reveal>
          <div className="grid g3" style={{ marginTop: 32 }}>
            {ACADEMY_PERKS.map((p, i) => {
              const I = Icon[p.icon];
              return (
                <Reveal key={p.id} delay={(i % 3) * 70}>
                  <div className="card card-pad hoverable" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                    <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${p.accent}) 16%, transparent)`, color: `var(--${p.accent})` }}><I s={22} /></span>
                    <b style={{ fontSize: 16.5, display: 'block', marginTop: 14 }}>{L(p.title)}</b>
                    <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.65 }}>{L(p.desc)}</p>
                    <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
                      {p.items.map((x, k) => (
                        <li key={k} style={{ display: 'flex', gap: 9, fontSize: 13.5, lineHeight: 1.6 }}><span style={{ color: `var(--${p.accent})`, flex: 'none' }}><Icon.check s={15} /></span>{L(x)}</li>
                      ))}
                    </ul>
                    {p.cta && (
                      <button className="btn btn-ghost btn-sm" style={{ marginTop: 'auto', alignSelf: 'flex-start', paddingTop: 8 }} onClick={() => { if (p.cta.page) go(p.cta.page); else if (p.cta.hash) { const el = document.getElementById(p.cta.hash); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }}>
                        <Icon.arrow s={15} /> {L(p.cta.label)}
                      </button>
                    )}
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* science library */}
      <section className="section" id="acad-books" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,.02), transparent)' }}>
        <div className="wrap">
          <Reveal><Head eyebrow={t('books_eyebrow')} title={t('books_title')} sub={t('books_sub')} icon="book" /></Reveal>
          <div className="tabs" style={{ marginTop: 26, flexWrap: 'wrap' }}>
            {groups.map(g => <button key={g.id} className={"tab " + (group === g.id ? 'on' : '')} onClick={() => setGroup(g.id)}>{L(g.label)}</button>)}
          </div>
          <div className="grid g3" style={{ marginTop: 24 }}>
            {books.map((b, i) => (
              <Reveal key={b.id} delay={(i % 3) * 60}>
                <div className="card hoverable" style={{ display: 'flex', gap: 14, padding: 18, height: '100%', alignItems: 'flex-start' }}>
                  <span style={{ flex: 'none', width: 46, height: 62, borderRadius: 6, background: `linear-gradient(140deg, color-mix(in srgb, var(--${b.accent}) 34%, transparent), color-mix(in srgb, var(--${b.accent}) 10%, transparent))`, border: '1px solid color-mix(in srgb, var(--' + b.accent + ') 40%, transparent)', display: 'grid', placeItems: 'center', color: `var(--${b.accent})`, boxShadow: 'inset 4px 0 0 -1px color-mix(in srgb, var(--' + b.accent + ') 55%, transparent)' }}><Icon.book s={20} /></span>
                  <div style={{ minWidth: 0 }}>
                    <b style={{ fontSize: 15.5, display: 'block', lineHeight: 1.4 }}>{L(b.title)}</b>
                    <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }} dir="ltr">{b.en}</div>
                    <div style={{ fontSize: 13, marginTop: 7, color: 'var(--accent)', fontWeight: 600 }}>{L(b.author)}{b.year ? ' · ' + b.year : ''}</div>
                    <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.65 }}>{L(b.why)}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <p className="muted" style={{ fontSize: 13.5, marginTop: 20, lineHeight: 1.7 }}>{t('books_note')}</p>
        </div>
      </section>

      {/* one team */}
      <section className="section" id="acad-team">
        <div className="wrap">
          <Reveal>
            <div className="card card-pad" style={{ padding: 34, background: 'color-mix(in srgb, var(--accent) 9%, transparent)', borderColor: 'color-mix(in srgb, var(--accent) 28%, transparent)' }}>
              <div style={{ display: 'flex', gap: 26, flexWrap: 'wrap', alignItems: 'center' }}>
                <div style={{ flex: '1 1 340px' }}>
                  <div className="eyebrow"><Icon.users s={15} /> {t('team_eyebrow')}</div>
                  <h2 style={{ fontSize: 'clamp(24px, 3.4vw, 34px)', marginTop: 12 }}>{t('team_title')}</h2>
                  <p className="muted" style={{ fontSize: 15.5, marginTop: 12, lineHeight: 1.75 }}>{t('team_sub')}</p>
                  <div style={{ display: 'flex', gap: 12, marginTop: 22, flexWrap: 'wrap' }}>
                    {wa && <a className="btn btn-primary" href={'https://wa.me/' + String(wa).replace(/[^\d]/g, '') + '?text=' + encodeURIComponent('أرغب في الانضمام إلى فريق المبتكرين لتبادل الخبرات')} target="_blank" rel="noopener"><Icon.wa s={16} /> {t('team_join')}</a>}
                    <button className="btn btn-ghost" onClick={() => go('ondemand')}><Icon.play s={16} /> {t('nav_ondemand')}</button>
                  </div>
                </div>
                <div style={{ flex: '1 1 300px', display: 'grid', gap: 12 }}>
                  {TEAM_RITUALS.map((r, i) => {
                    const I = Icon[r.icon];
                    return (
                      <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 14px', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)', background: 'var(--surface)' }}>
                        <span style={{ color: 'var(--accent)', flex: 'none', marginTop: 2 }}><I s={18} /></span>
                        <div><b style={{ fontSize: 14.5 }}>{L(r.title)}</b><div className="muted" style={{ fontSize: 13, marginTop: 3, lineHeight: 1.6 }}>{L(r.desc)}</div></div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </React.Fragment>
  );
}

window.AcademyPerks = AcademyPerks;
