function Events({ theme, t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="events" style={{
      background: theme.bg, color: theme.ink,
      padding: '120px 28px',
      borderTop: `1px solid ${theme.line}`
    }}>
      <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
        <div style={{ marginBottom: '80px' }}>
          <Kicker theme={theme}>{t.events.kicker}</Kicker>
          <DisplayText theme={theme}>{t.events.title}</DisplayText>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', borderTop: `1px solid ${theme.ink}` }}>
          {t.events.items.map((ev, i) => {
            const isOpen = i === open;
            return (
              <div key={i} style={{ borderBottom: `1px solid ${theme.ink}` }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', background: 'transparent', border: 'none',
                  padding: '32px 0', textAlign: 'left', color: 'inherit', cursor: 'pointer',
                  display: 'grid', gridTemplateColumns: '180px 1fr auto 40px', gap: '40px',
                  alignItems: 'center'
                }} className="ls-event-row">
                  <div style={{ fontFamily: theme.mono, fontSize: '13px', letterSpacing: '0.12em', color: theme.ink2 }}>
                    {ev.date}
                  </div>
                  <div style={{
                    fontFamily: theme.display,
                    fontStyle: theme.displayItalic ? 'italic' : 'normal',
                    fontWeight: theme.displayWeight,
                    fontSize: 'clamp(28px, 3.4vw, 56px)', letterSpacing: '-0.03em', lineHeight: 1.02
                  }}>{ev.name}</div>
                  <span style={{
                    padding: '6px 12px',
                    border: `1px solid ${theme.ink}`,
                    borderRadius: theme.radius,
                    fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.1em',
                    textTransform: 'uppercase'
                  }}>{ev.tag}</span>
                  <span style={{
                    fontSize: '28px', transition: 'transform 0.25s ease',
                    transform: isOpen ? 'rotate(45deg)' : 'none'
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? '480px' : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.35s ease'
                }}>
                  <div className="ls-event-expand" style={{
                    display: 'grid', gridTemplateColumns: '180px 1fr', gap: '40px',
                    paddingBottom: '32px'
                  }}>
                    <div />
                    <div className="ls-event-expand-inner" style={{
                      display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: '32px', alignItems: 'start',
                      maxWidth: '900px', textAlign: "left"
                    }}>
                      <p style={{
                        fontFamily: theme.body, fontSize: '17px', lineHeight: 1.5,
                        margin: 0, textWrap: 'pretty', whiteSpace: 'pre-line'
                      }}>{ev.desc}</p>
                      <a href="https://wa.me/message/LNRZZI7DNWANB1" target="_blank" rel="noopener noreferrer" style={{
                        padding: '14px 20px',
                        background: theme.accent, color: theme.bg, border: 'none',
                        borderRadius: theme.radius, fontFamily: theme.body, fontSize: '14px',
                        fontWeight: 600, cursor: 'pointer', justifySelf: 'start', textAlign: "center",
                        textDecoration: 'none', display: 'inline-block',
                      }}>{t.ui.inquire} →</a>
                    </div>
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

function About({ theme, t }) {
  return (
    <section id="about" style={{
      background: theme.bg2, color: theme.ink,
      padding: '120px 28px'
    }}>
      <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: '80px', alignItems: 'start' }} className="ls-two-col">
          <div>
            <Kicker theme={theme}>{t.about.kicker}</Kicker>
            <DisplayText theme={theme}>{t.about.title}</DisplayText>
            <div style={{ marginTop: '32px', maxWidth: '560px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {t.about.paragraphs.map((p, i) =>
              <p key={i} style={{
                fontFamily: theme.body, fontSize: '18px', lineHeight: 1.55,
                margin: 0, textWrap: 'pretty', color: theme.ink
              }}>{p}</p>
              )}
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px'
          }}>
            <div style={{ aspectRatio: '3/4', borderRadius: theme.radius, overflow: 'hidden' }}>
              <img src="assets/neon-1988.jpg" alt={t.alt.neonSign} style={{
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              }} />
            </div>
            <div style={{ aspectRatio: '3/4', borderRadius: theme.radius, overflow: 'hidden' }}>
              <img src="assets/social-rojo.jpg" alt={t.alt.socialRed} style={{
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              }} />
            </div>
            <div className="ls-about-stats" style={{
              gridColumn: '1 / -1',
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '14px',
              padding: '28px', background: theme.ink, color: theme.bg,
              borderRadius: theme.radius
            }}>
              {t.about.stats.map((s, i) =>
              <div key={i}>
                  <div style={{
                  fontFamily: theme.display,
                  fontStyle: theme.displayItalic ? 'italic' : 'normal',
                  fontWeight: theme.displayWeight,
                  fontSize: 'clamp(32px, 3.4vw, 52px)', letterSpacing: '-0.03em', lineHeight: 1,
                  color: theme.accent2
                }}>{s.n}</div>
                  <div style={{
                  fontFamily: theme.mono, fontSize: '10.5px',
                  letterSpacing: '0.1em', textTransform: 'uppercase',
                  opacity: 0.75, marginTop: '6px'
                }}>{s.label}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Events, About });