function Anniversary({ theme, t }) {
  const a = t.anniversary;
  if (!a) return null;
  const disp = {
    fontFamily: theme.display,
    fontStyle: theme.displayItalic ? 'italic' : 'normal',
    fontWeight: theme.displayWeight
  };
  return (
    <section id="aniversario" data-screen-label="Aniversario" style={{
      background: theme.accent, color: theme.bg, padding: '110px 28px',
      position: 'relative', overflow: 'hidden'
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', right: '-120px', top: '-120px',
        width: '420px', height: '420px', borderRadius: '50%',
        background: theme.accent2, opacity: 0.25, pointerEvents: 'none'
      }}></div>
      <div className="ls-anniv-grid" style={{
        maxWidth: '1400px', margin: '0 auto', position: 'relative',
        display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)', gap: '64px', alignItems: 'center'
      }}>
        <div style={{ ...disp, fontSize: 'clamp(160px, 22vw, 340px)', lineHeight: 0.8, letterSpacing: '-0.06em', color: theme.accent2 }}>
          {a.number}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '22px' }}>
          <div style={{
            fontFamily: theme.mono, fontSize: '12px', letterSpacing: '0.18em', textTransform: 'uppercase',
            fontWeight: 700, color: theme.bg
          }}><span style={{ color: theme.accent2 }}>●</span> {a.kicker}</div>
          <div style={{ ...disp, fontSize: 'clamp(40px, 5.4vw, 88px)', lineHeight: 0.95, letterSpacing: '-0.035em', textWrap: 'balance' }}>
            {a.title}
          </div>
          <div style={{
            ...disp, alignSelf: 'flex-start',
            fontSize: 'clamp(24px, 2.6vw, 40px)', letterSpacing: '-0.02em', lineHeight: 1,
            background: theme.accent2, color: theme.ink,
            padding: '12px 20px', borderRadius: theme.radius
          }}>{a.dates}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginTop: '10px', maxWidth: '560px' }}>
            <p style={{ fontFamily: theme.body, fontSize: '19px', lineHeight: 1.45, margin: 0, textWrap: 'pretty' }}>{a.secret}</p>
            <p style={{ fontFamily: theme.body, fontSize: '19px', lineHeight: 1.45, margin: 0, fontWeight: 700, color: theme.bg }}>{a.soon}</p>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Anniversary });