// Classes section
function Classes({ theme, t }) {
  const [hoveredLvl, setHoveredLvl] = React.useState(null);
  const [openFaq, setOpenFaq] = React.useState(null);

  return (
    <section id="classes" style={{
      background: theme.bg, color: theme.ink,
      padding: '120px 28px',
      borderTop: `1px solid ${theme.line}`,
    }}>
      <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px', alignItems: 'start' }} className="ls-two-col">
          <div>
            <Kicker theme={theme}>{t.classes.kicker}</Kicker>
            <DisplayText theme={theme}>{t.classes.title}</DisplayText>
          </div>
          <div>
            <p style={{
              fontFamily: theme.body, fontSize: '18px', lineHeight: 1.5,
              margin: '12px 0 16px', maxWidth: '480px', textWrap: 'pretty',
            }}>
              {t.classes.lead}
            </p>
            <p style={{
              fontFamily: theme.body, fontSize: '15px', lineHeight: 1.55,
              margin: '0 0 24px', maxWidth: '480px', textWrap: 'pretty',
              color: theme.ink2,
            }}>
              {t.classes.lead2}
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '32px' }}>
              {t.classes.styles.map((s) => (
                <span key={s} style={{
                  padding: '8px 14px',
                  border: `1px solid ${theme.line}`,
                  borderRadius: theme.radius,
                  fontFamily: theme.mono, fontSize: '11px',
                  letterSpacing: '0.1em', textTransform: 'uppercase',
                  color: theme.ink2,
                }}>{s}</span>
              ))}
            </div>
            <a href="https://wa.me/message/LNRZZI7DNWANB1" target="_blank" rel="noopener noreferrer" aria-label={t.classes.guarantee.eyebrow + ': ' + t.classes.guarantee.headline} style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '22px',
              padding: '20px 28px 20px 20px',
              background: theme.accent2,
              color: theme.ink,
              borderRadius: theme.radius,
              transform: 'rotate(-1.5deg)',
              boxShadow: '0 10px 28px rgba(0,0,0,0.12)',
              maxWidth: '480px',
              textDecoration: 'none',
              transition: 'transform 0.25s ease, box-shadow 0.25s ease',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'rotate(-1.5deg) translateY(-3px)';
                e.currentTarget.style.boxShadow = '0 16px 36px rgba(0,0,0,0.16)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'rotate(-1.5deg)';
                e.currentTarget.style.boxShadow = '0 10px 28px rgba(0,0,0,0.12)';
              }}
            >
              <span style={{
                width: '76px', height: '76px',
                background: theme.ink,
                color: theme.accent2,
                borderRadius: '50%',
                display: 'inline-flex',
                alignItems: 'center', justifyContent: 'center',
                fontFamily: theme.display,
                fontStyle: theme.displayItalic ? 'italic' : 'normal',
                fontWeight: theme.displayWeight,
                fontSize: '48px', lineHeight: 1, letterSpacing: '-0.02em',
                flexShrink: 0,
              }}>5</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', minWidth: 0 }}>
                <span style={{
                  fontFamily: theme.mono, fontSize: '11px',
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  opacity: 0.7,
                }}>{t.classes.guarantee.eyebrow}</span>
                <span style={{
                  fontFamily: theme.display,
                  fontStyle: theme.displayItalic ? 'italic' : 'normal',
                  fontWeight: theme.displayWeight,
                  fontSize: '26px', letterSpacing: '-0.025em', lineHeight: 1.1,
                }}>{t.classes.guarantee.headline}</span>
              </div>
            </a>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '2px',
          marginTop: '80px',
          background: theme.line,
          border: `1px solid ${theme.line}`,
          borderRadius: theme.radius,
          overflow: 'hidden',
        }} className="ls-levels-grid">
          {t.classes.levels.map((lvl, i) => {
            const active = hoveredLvl === i;
            return (
              <div key={lvl.tag}
                onMouseEnter={() => setHoveredLvl(i)}
                onMouseLeave={() => setHoveredLvl(null)}
                style={{
                  background: active ? theme.accent : theme.card,
                  color: active ? theme.bg : theme.ink,
                  padding: '28px 24px',
                  minHeight: '280px',
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  cursor: 'pointer',
                  transition: 'background 0.25s ease, color 0.25s ease',
                }}>
                <div>
                  <div style={{
                    fontFamily: theme.mono, fontSize: '11px',
                    letterSpacing: '0.14em', textTransform: 'uppercase',
                    opacity: 0.7, marginBottom: '16px',
                    display: 'flex', justifyContent: 'space-between',
                  }}>
                    <span>{lvl.tag}</span>
                    <span>0{i + 1}</span>
                  </div>
                  <div style={{
                    fontFamily: theme.display,
                    fontStyle: theme.displayItalic ? 'italic' : 'normal',
                    fontWeight: theme.displayWeight,
                    fontSize: '42px', letterSpacing: '-0.03em', lineHeight: 0.95,
                    marginBottom: '14px',
                  }}>{lvl.name}</div>
                  <div style={{ fontFamily: theme.body, fontSize: '14px', lineHeight: 1.45, opacity: 0.9, textWrap: 'pretty' }}>
                    {lvl.desc}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* ── FAQ ──────────────────────────────────────────────── */}
        <div style={{
          marginTop: '110px',
          display: 'grid',
          gridTemplateColumns: '1fr 1.05fr',
          gap: '56px',
          alignItems: 'stretch',
        }} className="ls-two-col">
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <Kicker theme={theme}>{t.classes.faq.kicker}</Kicker>
            <DisplayText theme={theme} size="clamp(40px, 5.5vw, 92px)">{t.classes.faq.title}</DisplayText>
            <div className="ls-faq-img" style={{
              marginTop: '36px',
              flex: 1,
              minHeight: 0,
              position: 'relative',
              borderRadius: theme.radius,
              overflow: 'hidden',
            }}>
              <img src="assets/faq-clase.jpg" alt={t.alt.faqImage} style={{
                position: 'absolute',
                inset: 0,
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                objectPosition: 'center 30%',
                display: 'block',
              }} />
            </div>
          </div>

          <div>
            {/* FAQ accordion */}
            <div style={{
              border: `1px solid ${theme.line}`,
              borderRadius: theme.radius,
              overflow: 'hidden',
            }}>
              {t.classes.faq.items.map((item, i) => {
                const isOpen = openFaq === i;
                return (
                  <div key={i} style={{
                    borderBottom: i < t.classes.faq.items.length - 1 ? `1px solid ${theme.line}` : 'none',
                  }}>
                    <button
                      onClick={() => setOpenFaq(isOpen ? null : i)}
                      aria-expanded={isOpen}
                      style={{
                        width: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        gap: '18px',
                        padding: '22px 24px',
                        background: isOpen ? theme.accent : theme.card,
                        color: isOpen ? theme.bg : theme.ink,
                        border: 'none',
                        cursor: 'pointer',
                        textAlign: 'left',
                        transition: 'background 0.2s, color 0.2s',
                      }}
                      onMouseEnter={(e) => { if (!isOpen) e.currentTarget.style.background = theme.bg2; }}
                      onMouseLeave={(e) => { if (!isOpen) e.currentTarget.style.background = theme.card; }}
                    >
                      <span style={{
                        fontFamily: theme.body,
                        fontSize: '17px',
                        fontWeight: 600,
                        lineHeight: 1.3,
                        textWrap: 'pretty',
                      }}>{item.q}</span>
                      <span style={{
                        fontSize: '15px',
                        flexShrink: 0,
                        display: 'inline-block',
                        transition: 'transform 0.22s ease',
                        transform: isOpen ? 'rotate(180deg)' : 'none',
                        opacity: 0.6,
                      }}>↓</span>
                    </button>
                    {isOpen && (
                      <div style={{
                        padding: '4px 24px 24px',
                        background: theme.bg2,
                      }}>
                        <p style={{
                          fontFamily: theme.body,
                          fontSize: '16px',
                          lineHeight: 1.55,
                          color: theme.ink2,
                          margin: 0,
                          maxWidth: '560px',
                          textWrap: 'pretty',
                        }}>{item.a}</p>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Classes = Classes;
