// Grilla Semanal — Schedule section
function Schedule({ theme, t }) {
  const todayIdx = (() => {
    const d = new Date().getDay(); // 0 = Dom
    return d === 0 ? 6 : d - 1;   // Lun=0 … Dom=6
  })();

  const [openIdx, setOpenIdx] = React.useState(todayIdx);

  const toggle = (i) => setOpenIdx(openIdx === i ? null : i);

  const styleColor = (style) => {
    const s = style.toLowerCase();
    if (s.includes('bachatalambazouk'))                    return 'oklch(52% 0.20 268)'; // blue-purple
    if (s.includes('bachata fem'))                         return 'oklch(58% 0.20 340)'; // pink
    if (s.includes('bachata'))                             return 'oklch(50% 0.21 355)'; // deep pink-red
    if (s.includes('salsa la') || s.includes('salsa l.a')) return 'oklch(62% 0.21 48)';  // orange
    if (s.includes('salsa cubana'))                        return 'oklch(54% 0.23 32)';  // orange-red
    if (s.includes('rueda'))                               return 'oklch(64% 0.19 72)';  // amber
    if (s.includes('salsa'))                               return 'oklch(50% 0.27 18)';  // true red
    if (s.includes('tango'))                               return 'oklch(36% 0.08 36)';  // dark brown
    if (s.includes('cha-cha') || s.includes('chacha'))     return 'oklch(62% 0.16 80)';  // yellow-green
    return theme.accent;
  };

  const days = t.schedule.days;

  return (
    <section id="schedule" style={{
      background: theme.bg2,
      color: theme.ink,
      padding: '100px 28px',
      borderTop: `1px solid ${theme.line}`,
    }}>
      <div style={{ maxWidth: '1000px', margin: '0 auto' }}>

        {/* ── Header ──────────────────────────────────────────── */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: '40px',
          alignItems: 'start',
          marginBottom: '56px',
        }} className="ls-two-col">
          <div>
            <Kicker theme={theme}>{t.schedule.kicker}</Kicker>
            <DisplayText theme={theme} size="clamp(40px, 5vw, 88px)">
              {t.schedule.title}
            </DisplayText>
          </div>
          <div style={{ paddingTop: '8px' }}>
            <p style={{
              fontFamily: theme.body,
              fontSize: '18px',
              lineHeight: 1.5,
              color: theme.ink,
              margin: '0 0 16px',
              textWrap: 'pretty',
            }}>{t.schedule.lead}</p>
            <p style={{
              fontFamily: theme.mono,
              fontSize: '11px',
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: theme.ink2,
              margin: 0,
            }}>{t.schedule.note}</p>
          </div>
        </div>

        {/* ── Accordion ────────────────────────────────────────── */}
        <div style={{
          border: `1px solid ${theme.line}`,
          borderRadius: theme.radius,
          overflow: 'hidden',
        }}>
          {days.map((day, i) => {
            const isOpen  = openIdx === i;
            const isToday = todayIdx === i;
            const hasSocial = !!day.social;

            return (
              <div key={day.short} style={{
                borderBottom: i < days.length - 1 ? `1px solid ${theme.line}` : 'none',
              }}>

                {/* — Row header — */}
                <button
                  onClick={() => toggle(i)}
                  aria-expanded={isOpen}
                  style={{
                    width: '100%',
                    display: 'grid',
                    gridTemplateColumns: '44px 1fr auto auto auto',
                    alignItems: 'center',
                    gap: '14px',
                    padding: '18px 24px',
                    background: isOpen ? theme.accent : theme.card,
                    color: isOpen ? theme.bg : theme.ink,
                    border: 'none',
                    cursor: 'pointer',
                    textAlign: 'left',
                    transition: 'background 0.2s, color 0.2s',
                  }}
                  onMouseEnter={e => { if (!isOpen) e.currentTarget.style.background = theme.bg; }}
                  onMouseLeave={e => { if (!isOpen) e.currentTarget.style.background = theme.card; }}
                >
                  {/* Short abbrev */}
                  <span style={{
                    fontFamily: theme.mono,
                    fontSize: '11px',
                    letterSpacing: '0.14em',
                    textTransform: 'uppercase',
                    opacity: 0.55,
                  }}>{day.short}</span>

                  {/* Day name + HOY badge */}
                  <span style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <span style={{
                      fontFamily: theme.display,
                      fontWeight: theme.displayWeight,
                      fontStyle: theme.displayItalic ? 'italic' : 'normal',
                      fontSize: 'clamp(17px, 2.2vw, 28px)',
                      letterSpacing: '-0.025em',
                      lineHeight: 1,
                    }}>{day.name}</span>
                    {isToday && (
                      <span style={{
                        fontFamily: theme.mono,
                        fontSize: '9px',
                        letterSpacing: '0.14em',
                        textTransform: 'uppercase',
                        padding: '3px 7px',
                        background: isOpen ? theme.bg : theme.accent,
                        color: isOpen ? theme.accent : theme.bg,
                        borderRadius: '2px',
                        flexShrink: 0,
                      }}>{t.schedule.today}</span>
                    )}
                  </span>

                  {/* Social badge */}
                  {hasSocial ? (
                    <span style={{
                      fontFamily: theme.mono,
                      fontSize: '9px',
                      letterSpacing: '0.12em',
                      textTransform: 'uppercase',
                      padding: '3px 8px',
                      background: isOpen ? 'rgba(255,255,255,0.18)' : theme.line,
                      borderRadius: '2px',
                      whiteSpace: 'nowrap',
                      opacity: 0.9,
                    }}>+ Social</span>
                  ) : <span />}

                  {/* Hours */}
                  <span style={{
                    fontFamily: theme.mono,
                    fontSize: '12px',
                    letterSpacing: '0.05em',
                    opacity: 0.65,
                    whiteSpace: 'nowrap',
                  }}>{day.hours}</span>

                  {/* Chevron */}
                  <span style={{
                    fontSize: '13px',
                    opacity: 0.55,
                    display: 'inline-block',
                    transition: 'transform 0.22s ease',
                    transform: isOpen ? 'rotate(180deg)' : 'none',
                  }}>↓</span>
                </button>

                {/* — Expanded panel — */}
                {isOpen && (
                  <div style={{
                    padding: '20px 24px',
                    background: theme.bg,
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '12px',
                  }}>

                    {/* Class cards grid */}
                    <div style={{
                      display: 'grid',
                      gridTemplateColumns: 'repeat(auto-fill, minmax(230px, 1fr))',
                      gap: '8px',
                    }}>
                      {day.classes.map((cls, j) => (
                        <div key={j} style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '12px',
                          padding: '11px 14px',
                          background: theme.card,
                          border: `1px solid ${theme.line}`,
                          borderRadius: theme.radius,
                        }}>
                          {/* Time */}
                          <span style={{
                            fontFamily: theme.mono,
                            fontSize: '11px',
                            letterSpacing: '0.06em',
                            color: theme.ink2,
                            flexShrink: 0,
                            minWidth: '36px',
                          }}>{cls.time}</span>

                          {/* Color dot */}
                          <span style={{
                            width: '7px',
                            height: '7px',
                            borderRadius: '50%',
                            background: styleColor(cls.style),
                            flexShrink: 0,
                          }} />

                          {/* Style + level */}
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{
                              fontFamily: theme.body,
                              fontSize: '14px',
                              fontWeight: 600,
                              color: theme.ink,
                              lineHeight: 1.15,
                              whiteSpace: 'nowrap',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                            }}>{cls.style}</div>
                            <div style={{
                              fontFamily: theme.mono,
                              fontSize: '10px',
                              letterSpacing: '0.1em',
                              textTransform: 'uppercase',
                              color: theme.ink2,
                              marginTop: '3px',
                              whiteSpace: 'pre-line',
                            }}>{cls.level}</div>
                            {/* Teacher name */}
                            <div style={{
                              fontFamily: theme.mono,
                              fontSize: '10px',
                              letterSpacing: '0.06em',
                              color: theme.ink2,
                              marginTop: '3px',
                              opacity: 0.55,
                              fontStyle: 'italic',
                            }}>{cls.teacher || '.....'}</div>
                          </div>
                        </div>
                      ))}
                    </div>

                    {/* Social event strip(s) */}
                    {(() => {
                      const socials = day.social
                        ? (Array.isArray(day.social) ? day.social : [day.social])
                        : [];
                      return socials.map((s, k) => (
                        <div key={k} style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '14px',
                          padding: '14px 16px',
                          background: theme.accent,
                          color: theme.bg,
                          borderRadius: theme.radius,
                        }}>
                          <span style={{
                            fontFamily: theme.mono,
                            fontSize: '11px',
                            letterSpacing: '0.08em',
                            opacity: 0.8,
                            flexShrink: 0,
                          }}>{s.time}</span>
                          <MusicBars color={theme.bg} height={13} count={4} />
                          <div>
                            <div style={{
                              fontFamily: theme.body,
                              fontSize: '15px',
                              fontWeight: 700,
                              lineHeight: 1.1,
                            }}>{s.name}</div>
                            <div style={{
                              fontFamily: theme.mono,
                              fontSize: '10px',
                              letterSpacing: '0.1em',
                              textTransform: 'uppercase',
                              opacity: 0.75,
                              marginTop: '3px',
                            }}>{s.desc}</div>
                          </div>
                        </div>
                      ));
                    })()}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* ── WhatsApp CTA ──────────────────────────────────────── */}
        <div style={{
          marginTop: '32px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: '16px',
          flexWrap: 'wrap',
        }}>
          <p style={{
            fontFamily: theme.mono,
            fontSize: '11px',
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            color: theme.ink2,
            margin: 0,
          }}>{t.schedule.note}</p>
          <a
            href="https://wa.me/message/LNRZZI7DNWANB1"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '8px',
              padding: '10px 18px',
              background: theme.accent,
              color: theme.bg,
              borderRadius: theme.radius,
              textDecoration: 'none',
              fontFamily: theme.body,
              fontSize: '13px',
              fontWeight: 600,
              whiteSpace: 'nowrap',
            }}
          >{t.schedule.cta}</a>
        </div>
      </div>
    </section>
  );
}

window.Schedule = Schedule;
