// Social week schedule
function Social({ theme, t }) {
  const [selected, setSelected] = React.useState(() => {
    // highlight current day
    const d = new Date().getDay(); // 0=Sun
    // our order: Mon..Sun  -> shift
    return d === 0 ? 6 : d - 1;
  });

  return (
    <section id="social" style={{
      background: theme.ink, color: theme.bg,
      padding: '0'
    }}>
      <Marquee text={t.hero.marquee} theme={theme} />

      <div className="ls-social-body" style={{ padding: '120px 28px', maxWidth: '1400px', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '60px', alignItems: 'end', marginBottom: '60px' }} className="ls-two-col">
          <div>
            <Kicker theme={theme} color={theme.accent2}>{t.social.kicker}</Kicker>
            <DisplayText theme={theme} color={theme.bg}>{t.social.title}</DisplayText>
          </div>
          <p style={{
            fontFamily: theme.body, fontSize: '18px', lineHeight: 1.5,
            color: theme.bg, opacity: 0.8, margin: 0, maxWidth: '460px'
          }}>{t.social.lead}</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '280px 1fr', gap: '40px'
        }} className="ls-social-grid">
          {/* day list */}
          <div style={{ display: 'flex', flexDirection: 'column', borderTop: `1px solid rgba(255,255,255,0.14)` }}>
            {t.social.week.map((d, i) => {
              const active = i === selected;
              return (
                <button key={i} onClick={() => setSelected(i)} style={{
                  background: 'transparent',
                  border: 'none',
                  borderBottom: `1px solid rgba(255,255,255,0.14)`,
                  padding: '18px 0',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  color: active ? theme.accent2 : theme.bg,
                  cursor: 'pointer',
                  textAlign: 'left'
                }}>
                  <span style={{
                    fontFamily: theme.mono, fontSize: '12px',
                    letterSpacing: '0.14em', opacity: active ? 1 : 0.6
                  }}>{d.day}</span>
                  <span style={{
                    fontFamily: theme.display,
                    fontStyle: theme.displayItalic ? 'italic' : 'normal',
                    fontWeight: theme.displayWeight,
                    fontSize: '22px', letterSpacing: '-0.02em', textAlign: "right"
                  }}>{d.theme}</span>
                </button>);

            })}
          </div>

          {/* highlight card */}
          <div className="ls-social-highlight" style={{
            background: theme.accent,
            color: theme.bg,
            borderRadius: theme.radius,
            padding: '40px',
            minHeight: '440px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative', overflow: 'hidden'
          }}>
            <div style={{ position: 'absolute', inset: 0, opacity: 0.08,
              background: `repeating-linear-gradient(45deg, ${theme.bg} 0 1px, transparent 1px 18px)` }} />
            <div style={{ position: 'relative' }}>
              <div style={{
                fontFamily: theme.mono, fontSize: '12px',
                letterSpacing: '0.16em', textTransform: 'uppercase',
                marginBottom: '24px', opacity: 0.8
              }}>
                {t.social.week[selected].day} · {t.ui.thisWeek}
              </div>
              <div style={{
                fontFamily: theme.display,
                fontStyle: theme.displayItalic ? 'italic' : 'normal',
                fontWeight: theme.displayWeight,
                fontSize: 'clamp(40px, 5.4vw, 80px)',
                letterSpacing: '-0.035em', lineHeight: 0.95,
                whiteSpace: 'pre-line'
              }}>
                {t.social.week[selected].detail || t.social.week[selected].theme}
              </div>
            </div>

            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', borderTop: `1px solid rgba(255,255,255,0.25)`, paddingTop: '24px' }}>
              <div>
                <div style={{ fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.75, marginBottom: '6px' }}>{t.ui.classesLabel}</div>
                <div style={{ fontFamily: theme.body, fontSize: '18px', fontWeight: 500 }}>{t.social.week[selected].live}</div>
              </div>
              <div>
                <div style={{ fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.75, marginBottom: '6px' }}>{t.ui.hoursLabel}</div>
                <div style={{ fontFamily: theme.body, fontSize: '18px', fontWeight: 500 }}>{t.social.week[selected].hours}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Marquee text={t.hero.marquee} theme={theme} reverse />
    </section>);

}

window.Social = Social;