// Accessibility statement page
function PageAcessibilidade({ setPage }) {
  useReveal();
  const t = useT();

  const sections = [
    { id: 'compromisso',  label: t('ac.toc1') },
    { id: 'padroes',      label: t('ac.toc2') },
    { id: 'como',         label: t('ac.toc3') },
    { id: 'testes',       label: t('ac.toc4') },
    { id: 'limitacoes',   label: t('ac.toc5') },
    { id: 'feedback',     label: t('ac.toc6') },
    { id: 'trabalho',     label: t('ac.toc7') },
  ];

  const scrollTo = (id) => {
    const el = document.getElementById('ac-' + id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <>
      {/* Hero */}
      <section style={{ padding: '80px 0 48px', position: 'relative', overflow: 'hidden' }}>
        <div className="tick-grid" />
        <div className="shell" style={{ position: 'relative' }}>
          <Eyebrow>{t('ac.ey')}</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 7vw, 100px)', margin: '24px 0 16px', maxWidth: '16ch', lineHeight: 0.98 }}>
            {t('ac.h1a')} <em className="display-italic" style={{ color: 'var(--crimson)' }}>{t('ac.h1em')}</em>
          </h1>
          <p style={{ fontSize: 17, opacity: 0.6, fontFamily: 'var(--mono)', marginTop: 8 }}>
            {t('ac.date')}
          </p>
        </div>
      </section>

      <div className="divider" />

      {/* Body: TOC sidebar + content */}
      <section className="section-pad">
        <div className="shell">
          <div className="ac-layout" style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 80, alignItems: 'flex-start' }}>

            {/* Sticky TOC */}
            <nav style={{ position: 'sticky', top: 100 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{t('ac.toc_title')}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
                {sections.map(s => (
                  <li key={s.id}>
                    <button
                      onClick={() => scrollTo(s.id)}
                      style={{
                        background: 'none', border: 'none', padding: '6px 0',
                        fontSize: 14, color: 'var(--ink)', cursor: 'pointer',
                        opacity: 0.65, textAlign: 'left', display: 'block', width: '100%',
                        transition: 'opacity 0.2s',
                        fontFamily: 'var(--sans)',
                      }}
                      onMouseEnter={e => e.currentTarget.style.opacity = 1}
                      onMouseLeave={e => e.currentTarget.style.opacity = 0.65}
                    >
                      {s.label}
                    </button>
                  </li>
                ))}
              </ul>
            </nav>

            {/* Main content */}
            <div style={{ maxWidth: 720 }}>

              {/* WCAG badge */}
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 14,
                padding: '18px 24px', borderRadius: 16,
                border: '1px solid var(--line)', background: 'var(--bg-2)',
                marginBottom: 56,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10,
                  background: 'var(--crimson)', display: 'flex',
                  alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <span style={{ color: '#fff', fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.05em' }}>WCAG</span>
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{t('ac.badge_title')}</div>
                  <div style={{ fontSize: 13, opacity: 0.65, fontFamily: 'var(--mono)', marginTop: 2 }}>{t('ac.badge_sub')}</div>
                </div>
              </div>

              <AcSection id="compromisso" eyebrow={t('ac.toc1')} title={t('ac.s1_h2')}>
                <AcP>{t('ac.s1_p1')}</AcP>
                <AcP>{t('ac.s1_p2')}</AcP>
              </AcSection>

              <AcSection id="padroes" eyebrow={t('ac.toc2')} title={t('ac.s2_h2')}>
                <AcP>{t('ac.s2_p1')}</AcP>
                <div style={{
                  margin: '28px 0',
                  padding: '24px 28px',
                  borderLeft: '3px solid var(--crimson)',
                  background: 'var(--bg-2)', borderRadius: '0 12px 12px 0',
                  fontSize: 16, lineHeight: 1.6, fontFamily: 'var(--serif)', fontStyle: 'italic',
                }}>
                  {t('ac.s2_quote')}
                </div>
                <AcP>{t('ac.s2_p2')}</AcP>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 20 }}>
                  {[t('ac.cr1'), t('ac.cr2'), t('ac.cr3'), t('ac.cr4')].map(c => (
                    <span key={c} style={{
                      padding: '7px 14px', borderRadius: 999, fontSize: 13,
                      border: '1px solid var(--line)', fontFamily: 'var(--mono)',
                      background: 'var(--bg-2)',
                    }}>{c}</span>
                  ))}
                </div>
              </AcSection>

              <AcSection id="como" eyebrow={t('ac.toc3')} title={t('ac.s3_h2')}>
                <AcP>{t('ac.s3_intro')}</AcP>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 28, border: '1px solid var(--line)', borderRadius: 16, overflow: 'hidden' }}>
                  {[
                    { n: '01', t: t('ac.s3_i1t'), d: t('ac.s3_i1d') },
                    { n: '02', t: t('ac.s3_i2t'), d: t('ac.s3_i2d') },
                    { n: '03', t: t('ac.s3_i3t'), d: t('ac.s3_i3d') },
                    { n: '04', t: t('ac.s3_i4t'), d: t('ac.s3_i4d') },
                  ].map((item, i) => (
                    <div key={item.n} style={{
                      display: 'flex', gap: 20, padding: '22px 24px',
                      borderBottom: i < 3 ? '1px solid var(--line)' : 'none',
                      background: i % 2 === 0 ? 'var(--bg-2)' : 'var(--bg)',
                    }}>
                      <div className="eyebrow" style={{ fontSize: 11, color: 'var(--crimson)', flexShrink: 0, paddingTop: 2 }}>{item.n}</div>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>{item.t}</div>
                        <div style={{ fontSize: 14, opacity: 0.72, lineHeight: 1.55 }}>{item.d}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </AcSection>

              <AcSection id="testes" eyebrow={t('ac.toc4')} title={t('ac.s4_h2')}>
                <AcP>{t('ac.s4_p1')}</AcP>
                <AcP>{t('ac.s4_p2')}</AcP>
              </AcSection>

              <AcSection id="limitacoes" eyebrow={t('ac.toc5')} title={t('ac.s5_h2')}>
                <AcP>{t('ac.s5_p1')}</AcP>
                <AcP>{t('ac.s5_p2')}</AcP>
              </AcSection>

              <AcSection id="feedback" eyebrow={t('ac.toc6')} title={t('ac.s6_h2')}>
                <AcP>{t('ac.s6_p1')}</AcP>
                <div style={{
                  marginTop: 24, padding: '24px 28px', borderRadius: 16,
                  background: 'var(--crimson)', color: 'var(--cream)',
                }}>
                  <div style={{ fontSize: 13, opacity: 0.75, fontFamily: 'var(--mono)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{t('ac.s6_contact_label')}</div>
                  <a href="mailto:acessibilidade@atomforge.com.br" className="m-link" style={{
                    fontSize: 17, fontWeight: 600, color: 'inherit',
                  }}>acessibilidade@atomforge.com.br</a>
                  <p style={{ fontSize: 13, opacity: 0.72, marginTop: 10, lineHeight: 1.55, fontFamily: 'var(--mono)' }}>
                    {t('ac.s6_note')}
                  </p>
                </div>
              </AcSection>

              <AcSection id="trabalho" eyebrow={t('ac.toc7')} title={t('ac.s7_h2')}>
                <AcP>{t('ac.s7_p1')}</AcP>
                <AcP>{t('ac.s7_p2')}</AcP>
                <div style={{ marginTop: 24 }}>
                  <button className="btn btn-primary" onClick={() => setPage('carreiras')} style={{ fontSize: 14, padding: '14px 24px' }}>
                    {t('ac.s7_cta')} <ArrowIcon />
                  </button>
                </div>
              </AcSection>

            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 860px) {
          .ac-layout { grid-template-columns: 1fr !important; }
          .ac-layout > nav { position: relative !important; top: 0 !important; display: none; }
        }
      `}</style>
    </>
  );
}

function AcSection({ id, eyebrow, title, children }) {
  return (
    <Reveal>
      <div id={'ac-' + id} style={{ marginBottom: 64, scrollMarginTop: 100 }}>
        <Eyebrow style={{ marginBottom: 8 }}>{eyebrow}</Eyebrow>
        <h2 className="display" style={{ fontSize: 'clamp(24px, 3vw, 36px)', margin: '10px 0 24px', lineHeight: 1.1 }}>{title}</h2>
        {children}
      </div>
    </Reveal>
  );
}

function AcP({ children }) {
  return (
    <p style={{ fontSize: 16, lineHeight: 1.75, opacity: 0.82, marginBottom: 16 }}>{children}</p>
  );
}

Object.assign(window, { PageAcessibilidade });