// Tudo Incluído + Calendário
const Included = () => {
  const { t, dict } = useI18n();
  const items = [
  { icon: 'certificate' },
  { icon: 'chat' },
  { icon: 'slides' },
  { icon: 'video' },
  { icon: 'users' },
  { icon: 'folder' },
  { icon: 'mentor' },
  { icon: 'clock' }].map((it, i) => ({ ...it, ...((dict.included && dict.included[i]) || {}) }));

  return (
    <section className="section">
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 80, alignItems: 'center'
      }} id="included-grid">
        <div className="reveal">
          <h2 style={{
            fontSize: 'clamp(36px, 4.5vw, 60px)', fontWeight: 700, lineHeight: 1.05,
            letterSpacing: '-0.02em', margin: '0 0 20px'
          }}>
            {t('included.titlePre')}<span className="grad-text">{t('included.titleGrad')}</span>
          </h2>
          <a href="inscricao.html" className="btn btn-primary" style={{ marginTop: 28, fontSize: 15, padding: '14px 26px' }}>
            {t('cta.applyLong')} <Icon name="arrow-right" size={14} />
          </a>
          <div style={{
            position: 'relative', marginTop: 48,
            width: 'min(135px, 30%)', aspectRatio: '1 / 1'
          }}>
            <div aria-hidden="true" style={{
              position: 'absolute', inset: '-20%',
              borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(124,92,255,0.55) 0%, rgba(124,92,255,0.22) 35%, transparent 70%)',
              filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0
            }} />
            <img
              src="assets/finger-capsule.png"
              alt="AI Capsule"
              style={{
                position: 'relative', zIndex: 1,
                width: '100%', height: '100%', objectFit: 'contain',
                borderRadius: '50%',
                animation: 'capsuleFloat 7s ease-in-out infinite'
              }} />
            
            <style>{`
              @keyframes capsuleFloat {
                0%, 100% { transform: translateY(0) rotate(0deg); }
                50% { transform: translateY(-10px) rotate(-1.5deg); }
              }
            `}</style>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }} className="grid-2">
          {items.map((it, i) =>
          <div key={i} className="card reveal" style={{ padding: 20, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div className="chip-icon"><Icon name={it.icon} size={18} /></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 6, lineHeight: 1.3 }}>{it.title}</div>
                <div style={{ color: 'var(--text-dim)', fontSize: 13, lineHeight: 1.5 }}>{it.desc}</div>
              </div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          #included-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 600px) {
          .grid-2 { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

};

const CAL = [
{ date: '02', month: 'Fev', tag: 'teorica', title: 'Módulo 1', times: ['18h30 às 21h30'], total: '3h', mode: 'Síncrono' },
{ date: '04', month: 'Fev', tag: 'teorica', title: 'Módulo 2', times: ['18h30 às 21h30'], total: '3h', mode: 'Síncrono' },
{ date: '10', month: 'Fev', tag: 'pratica', title: 'Módulo 3', times: ['18h30 às 22h00'], total: '3h30', mode: 'Síncrono' },
{ date: '11', month: 'Fev', tag: 'exploracao', title: 'Módulo 3', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '12', month: 'Fev', tag: 'qa', title: 'Módulo 3', note: 'Esclarecimento de dúvidas', noteSub: '(presença opcional)', times: ['19h00 às 20h30'], total: '1h30', mode: 'Síncrono' },
{ date: '15', month: 'Fev', tag: 'exploracao', title: 'Módulo 3', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '16', month: 'Fev', tag: 'pratica', title: 'Módulo 4', times: ['18h30 às 22h00'], total: '3h30', mode: 'Síncrono' },
{ date: '17', month: 'Fev', tag: 'exploracao', title: 'Módulo 4', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '18', month: 'Fev', tag: 'qa', title: 'Módulo 4', note: 'Esclarecimento de dúvidas', noteSub: '(presença opcional)', times: ['19h00 às 20h30'], total: '1h30', mode: 'Síncrono' },
{ date: '19', month: 'Fev', tag: 'exploracao', title: 'Módulo 4', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '23', month: 'Fev', tag: 'pratica', title: 'Módulo 5', times: ['18h30 às 22h00'], total: '3h30', mode: 'Síncrono' },
{ date: '24', month: 'Fev', tag: 'exploracao', title: 'Módulo 5', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '25', month: 'Fev', tag: 'qa', title: 'Módulo 5', note: 'Esclarecimento de dúvidas', noteSub: '(presença opcional)', times: ['19h00 às 20h30'], total: '1h30', mode: 'Síncrono' },
{ date: '26', month: 'Fev', tag: 'exploracao', title: 'Módulo 5', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '02', month: 'Mar', tag: 'pratica', title: 'Módulo 6', times: ['18h30 às 22h00'], total: '3h30', mode: 'Síncrono' },
{ date: '03', month: 'Mar', tag: 'exploracao', title: 'Módulo 6', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '04', month: 'Mar', tag: 'qa', title: 'Módulo 6', note: 'Esclarecimento de dúvidas', noteSub: '(presença opcional)', times: ['19h00 às 20h30'], total: '1h30', mode: 'Síncrono' },
{ date: '05', month: 'Mar', tag: 'exploracao', title: 'Módulo 6', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '09', month: 'Mar', tag: 'pratica', title: 'Módulo 7', times: ['18h30 às 22h00'], total: '3h30', mode: 'Síncrono' },
{ date: '10', month: 'Mar', tag: 'exploracao', title: 'Módulo 7', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '11', month: 'Mar', tag: 'qa', title: 'Módulo 7', note: 'Esclarecimento de dúvidas', noteSub: '(presença opcional)', times: ['19h00 às 20h30'], total: '1h30', mode: 'Síncrono' },
{ date: '12', month: 'Mar', tag: 'exploracao', title: 'Módulo 7', note: 'Exploração prática', noteSub: '(Gestão)', times: [], total: '2h30', mode: 'Assíncrono' },
{ date: '16', month: 'Mar', tag: 'teorica', title: 'Apresentações', times: ['18h30 às 21h30'], total: '3h', mode: 'Síncrono' }];


const TAG_MAP = {
  teorica: { label: 'Teórica', cls: 'tag-violet', rgb: '124,92,255' },
  pratica: { label: 'Prática', cls: 'tag-blue', rgb: '79,208,255' },
  qa: { label: 'Q&A', cls: 'tag-pink', rgb: '255,110,199' },
  exploracao: { label: 'Exploração', cls: 'tag-green', rgb: '74,222,128' }
};

const DEFAULT_FILTERS = ['teorica', 'pratica', 'qa'];

const Calendar = () => {
  const { t, dict, lang } = useI18n();
  const [filters, setFilters] = React.useState(new Set(DEFAULT_FILTERS));

  const toggleFilter = (k) => {
    setFilters((prev) => {
      const next = new Set(prev);
      if (next.has(k)) next.delete(k);else next.add(k);
      return next;
    });
  };

  const calTitle = (title) => {
    if (title === 'Apresentações') return t('cal.presentations');
    return title.replace('Módulo', t('cal.moduleWord'));
  };
  const fmtTime = (s) => lang === 'en'
    ? s.replace(/(\d{1,2})h(\d{2})/g, '$1:$2').replace(' às ', '–')
    : s;
  const tagLabel = (k) => (dict.calTags && dict.calTags[k]) || k;

  return (
    <section className="section" id="calendario">
    <div className="container">
      <h2 className="h-section reveal">{t('calendar.title')}</h2>
      <p className="section-sub reveal">{t('calendar.sub')}</p>

      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 40 }} className="reveal">
        {Object.entries(TAG_MAP).map(([k, v]) => {
            const active = filters.has(k);
            return (
              <button
                key={k}
                onClick={() => toggleFilter(k)}
                className={`tag ${v.cls}`}
                style={{
                  fontSize: 12,
                  padding: '6px 14px',
                  cursor: 'pointer',
                  opacity: active ? 1 : 0.35,
                  background: active ? `rgba(${v.rgb}, 0.18)` : `rgba(${v.rgb}, 0.05)`,
                  borderColor: active ? `rgba(${v.rgb}, 0.45)` : `rgba(${v.rgb}, 0.15)`,
                  transition: 'all 0.2s ease'
                }}
                aria-pressed={active}>
              <span style={{
                  width: 8, height: 8, borderRadius: '50%',
                  background: active ? 'currentColor' : 'transparent',
                  border: '1px solid currentColor'
                }} />
              {tagLabel(k)}
            </button>);

          })}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="grid-cal">
        {CAL.map((c, i) => {
            const tagMeta = TAG_MAP[c.tag];
            const visible = filters.has(c.tag);
            return (
              <div key={i} className="card reveal" style={{
                padding: 18,
                display: visible ? 'flex' : 'none',
                gap: 14,
                alignItems: 'flex-start',
                background: `linear-gradient(180deg, rgba(${tagMeta.rgb}, 0.08), rgba(${tagMeta.rgb}, 0.02))`,
                borderColor: `rgba(${tagMeta.rgb}, 0.28)`,
                transition: 'border-color 0.2s ease'
              }}>
            <div style={{
                  width: 58, height: 58, borderRadius: 12,
                  background: `rgba(${tagMeta.rgb}, 0.18)`,
                  border: `1px solid rgba(${tagMeta.rgb}, 0.35)`,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0
                }}>
              <div style={{ fontSize: 10, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{(dict.calMonths && dict.calMonths[c.month]) || c.month}</div>
              <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1 }}>{c.date}</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                <span className={`tag ${tagMeta.cls}`}>{tagLabel(c.tag)}</span>
              </div>
              <div style={{ fontWeight: 600, fontSize: 15, marginBottom: c.note ? 2 : 6 }}>{calTitle(c.title)}</div>
              {c.note &&
                  <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 6, lineHeight: 1.3 }}>
                  {(dict.calNotes && dict.calNotes[c.note]) || c.note}
                  {c.noteSub && <span style={{ color: 'var(--text-muted)', display: 'block', fontSize: 11 }}>{(dict.calNoteSubs && dict.calNoteSubs[c.noteSub]) || c.noteSub}</span>}
                </div>
                  }
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2, color: 'var(--text-dim)', fontSize: 12, marginBottom: 6 }}>
                {c.times.map((tm, j) =>
                    <span key={j} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Icon name="clock" size={11} /> {fmtTime(tm)}
                  </span>
                    )}
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 10px', fontSize: 11, color: 'var(--text-muted)' }}>
                <span style={{ color: `rgb(${tagMeta.rgb})`, fontWeight: 500 }}>{t('cal.total')}: {c.total}</span>
                <span>· {(dict.calModes && dict.calModes[c.mode]) || c.mode}</span>
              </div>
            </div>
          </div>);

          })}
      </div>

      <div className="reveal" style={{ textAlign: 'center', marginTop: 48 }}>
        <a href="inscricao.html" className="btn btn-primary" style={{ fontSize: 16, padding: '16px 32px' }}>
          {t('cta.applyLong')} <Icon name="arrow-right" size={14} />
        </a>
        <p style={{ color: 'var(--text-dim)', fontSize: 13, margin: '14px 0 0' }}>
          {t('calendar.note')}
        </p>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) { .grid-cal { grid-template-columns: repeat(2, 1fr) !important; } }
      @media (max-width: 600px) { .grid-cal { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>);

};


const Stat = ({ icon, label }) =>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, color: 'var(--text-dim)' }}>
    <span style={{ color: 'var(--cyan)' }}><Icon name={icon} size={14} /></span>
    {label}
  </div>;


Object.assign(window, { Included, Calendar });