// Classes section
function Classes({ theme, t }) {
  const [hoveredLvl, setHoveredLvl] = 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>
      </div>
    </section>
  );
}

window.Classes = Classes;