/* eslint-disable */
// Calendar — grouped by cadence (Weekly · Monthly · Seasonal).
// No times, no day-of-week. The grouping IS the rhythm.

const groups = [
  {
    label: 'Weekly',
    events: [
      'Vibe Coding',
      "The Artist\u2019s Way Book Club",
    ],
  },
  {
    label: 'Monthly',
    events: [
      'In\u2011Between Dinners',
      'Cross\u2011Domain Salons',
    ],
  },
  {
    label: 'Seasonal',
    events: [
      'Hikes upstate',
      'The Hamptons retreat',
    ],
  },
];

function Calendar() {
  return (
    <section style={{ borderTop: '1px solid var(--hairline)' }}>
      <div style={{
        padding: '40px 64px',
        borderBottom: '1px solid var(--hairline)',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(28px, 3.4vw, 40px)',
          margin: 0, color: 'var(--fg)', letterSpacing: '-0.02em',
        }}>
          Calendar
        </h2>
      </div>

      {groups.map((g) => (
        <div key={g.label} style={{ borderBottom: '1px solid var(--hairline)' }}>
          <div style={{
            padding: '20px 64px',
            background: 'oklch(0.95 0.014 82 / 0.5)',
          }}>
            <span className="eyebrow" style={{ fontSize: '11px' }}>{g.label}</span>
          </div>

          <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
            {g.events.map((title) => (
              <li key={title} style={{
                padding: '24px 64px',
                borderTop: '1px solid var(--hairline)',
                transition: 'background-color 320ms',
              }}
                onMouseEnter={(el) => el.currentTarget.style.background = 'oklch(0.93 0.018 80 / 0.4)'}
                onMouseLeave={(el) => el.currentTarget.style.background = 'transparent'}
              >
                <p style={{
                  fontFamily: 'var(--font-display)', fontWeight: 400,
                  fontSize: 'clamp(22px, 2.2vw, 30px)',
                  color: 'var(--fg)', margin: 0, letterSpacing: '-0.02em',
                  lineHeight: 1.1,
                }}>
                  {title}
                </p>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </section>
  );
}

window.Calendar = Calendar;