// Hero section
function Hero({ theme, t, onBook, onSocial }) {
  const todayIdx = (() => { const d = new Date().getDay(); return d === 0 ? 6 : d - 1; })();
  const today = t.social.week[todayIdx];
  const [beat, setBeat] = React.useState(0);
  const [status, setStatus] = React.useState({ label: t.ui.statusOpen, color: '#2fd16a' });
  React.useEffect(() => {
    const iv = setInterval(() => setBeat((b) => (b + 1) % 4), 600);
    return () => clearInterval(iv);
  }, []);
  React.useEffect(() => {
    const update = () => {
      // Buenos Aires = UTC-3
      const now = new Date();
      const utcH = now.getUTCHours();
      const utcM = now.getUTCMinutes();
      const utcDay = now.getUTCDay(); // 0=Sun
      // BA time with wraparound
      let baTotal = utcH * 60 + utcM - 180;
      let baDay = utcDay;
      if (baTotal < 0) { baTotal += 1440; baDay = (baDay + 6) % 7; }
      const minOfDay = baTotal;

      // Real schedule (matches the weekly agenda). Values in minutes from 00:00.
      // Closings past midnight are expressed as 1440 + minutes (next day).
      // day index: 0=Sun ... 6=Sat
      //  Sun  20:00 – 23:00
      //  Mon  20:00 – 22:00
      //  Tue  20:00 – 22:00
      //  Wed  20:00 – 01:00 (next day)
      //  Thu  20:00 – 05:00 (next day) — "Se Picó"
      //  Fri  19:00 – 04:00 (next day)
      //  Sat  20:00 – 05:00 (next day)
      const openByDay    = { 0: 1200, 1: 1200, 2: 1200, 3: 1200, 4: 1200, 5: 1140, 6: 1200 };
      const closingsByDay = { 0: 1380, 1: 1320, 2: 1320, 3: 1440 + 60, 4: 1440 + 300, 5: 1440 + 240, 6: 1440 + 300 };

      let isOpen = false;
      let closesAt = null;
      let opensAt = openByDay[baDay];

      // Are we in today's shift?
      const todayOpen = openByDay[baDay];
      const todayClose = closingsByDay[baDay];
      if (minOfDay >= todayOpen && minOfDay < todayClose) {
        isOpen = true;
        closesAt = todayClose;
      } else {
        // check if we're in yesterday's late-night shift (closing after midnight)
        const prevDay = (baDay + 6) % 7;
        const prevClose = closingsByDay[prevDay];
        if (prevClose > 1440 && minOfDay < (prevClose - 1440)) {
          isOpen = true;
          closesAt = prevClose - 1440;
        }
      }

      if (isOpen) {
        const minsLeft = closesAt - minOfDay;
        if (minsLeft <= 60) {
          setStatus({ label: t.ui.statusClosing.replace('{n}', minsLeft), color: theme.accent2 });
        } else {
          setStatus({ label: t.ui.statusOpen, color: '#2fd16a' });
        }
      } else {
        const until = (opensAt - minOfDay + 1440) % 1440;
        const hUntil = Math.floor(until / 60);
        if (hUntil === 0) {
          setStatus({ label: t.ui.statusOpeningMin.replace('{n}', until), color: theme.accent2 });
        } else if (hUntil <= 3) {
          setStatus({ label: t.ui.statusOpeningHrs.replace('{n}', hUntil), color: theme.accent2 });
        } else {
          setStatus({ label: t.ui.statusOpensToday, color: theme.ink2 });
        }
      }
    };
    update();
    const iv = setInterval(update, 60000);
    return () => clearInterval(iv);
  }, [theme, t]);

  return (
    <section id="top" style={{
      minHeight: '100vh',
      background: theme.bg,
      color: theme.ink,
      padding: '120px 28px 40px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="ls-hero-coords" style={{
        position: 'absolute', top: '140px', right: '28px',
        fontFamily: theme.mono, fontSize: '12px', letterSpacing: '0.14em',
        color: status.color, textTransform: 'uppercase',
        transition: 'color 0.3s',
        zIndex: 5,
      }}>
        ● {status.label}
      </div>

      <div style={{ maxWidth: '1400px', margin: '0 auto', paddingTop: '40px' }}>
        <div style={{
          fontFamily: theme.mono, fontSize: '12px', letterSpacing: '0.14em',
          textTransform: 'uppercase', color: theme.ink2, marginBottom: '40px',
        }}>
          <a
            href="https://share.google/9LRPnmvKFrEF8Y82M"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              color: 'inherit',
              textDecoration: 'none',
              borderBottom: `1px solid ${theme.ink2}`,
              paddingBottom: '2px',
              transition: 'color 0.2s ease, border-color 0.2s ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.color = theme.accent;
              e.currentTarget.style.borderColor = theme.accent;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.color = 'inherit';
              e.currentTarget.style.borderColor = theme.ink2;
            }}
          >
            {t.hero.eyebrow} ↗
          </a>
        </div>

        <h1 style={{
          fontFamily: theme.display,
          fontStyle: theme.displayItalic ? 'italic' : 'normal',
          fontWeight: theme.displayWeight,
          fontSize: 'clamp(56px, 10.5vw, 184px)',
          lineHeight: 0.9,
          letterSpacing: theme.displayItalic ? '-0.01em' : '-0.045em',
          margin: 0,
        }}>
          <div>{t.hero.title[0]}</div>
          <div style={{ color: theme.accent, display: 'flex', alignItems: 'baseline', gap: '0.3em', flexWrap: 'wrap' }}>
            <span>{t.hero.title[1]}</span>
            <MusicBars color={theme.accent2} height={46} count={5} />
          </div>
          <div style={{ color: theme.accent, fontStyle: theme.displayItalic ? 'normal' : 'italic', fontWeight: theme.displayWeight === 800 ? 400 : theme.displayWeight }}>
            {t.hero.title[2]}
          </div>
          <div>{t.hero.title[3]}</div>
        </h1>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) 420px',
          gap: '60px',
          marginTop: '60px',
          alignItems: 'end',
        }} className="ls-hero-grid">
          <p style={{
            fontFamily: theme.body, fontSize: '20px', lineHeight: 1.45,
            maxWidth: '640px', margin: 0, color: theme.ink, textWrap: 'pretty',
          }}>
            {t.hero.lead}
          </p>

          <div className="ls-hero-ctas" style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
            <button onClick={onBook} style={{
              padding: '22px 24px',
              background: theme.ink, color: theme.bg,
              border: 'none', borderRadius: theme.radius,
              fontFamily: theme.body, fontSize: '16px', fontWeight: 600,
              cursor: 'pointer', textAlign: 'left',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              {t.hero.primaryCta}
              <span>→</span>
            </button>
            <button onClick={onSocial} style={{
              padding: '22px 24px',
              background: 'transparent', color: theme.ink,
              border: `1px solid ${theme.ink}`, borderRadius: theme.radius,
              fontFamily: theme.body, fontSize: '16px', fontWeight: 500,
              cursor: 'pointer', textAlign: 'left',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              {t.hero.secondaryCta}
              <span>●</span>
            </button>
          </div>
        </div>

        {/* Image row */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 0.8fr 1fr',
          gap: '14px', marginTop: '60px',
        }} className="ls-hero-imgs">
          <div style={{ aspectRatio: '5/6', borderRadius: theme.radius, overflow: 'hidden', position: 'relative' }}>
            <img src="assets/pista-noche.jpg" alt={t.alt.heroMain} style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
            <div style={{ aspectRatio: '1/1', borderRadius: theme.radius, overflow: 'hidden' }}>
              <img src="assets/clase-1.jpg" alt={t.alt.heroClass} style={{
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              }} />
            </div>
            <div style={{
              padding: '18px',
              background: theme.accent2,
              color: theme.ink,
              borderRadius: theme.radius,
              fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.1em',
              display: 'flex', flexDirection: 'column', gap: '6px',
              flex: 1, minHeight: '80px',
              justifyContent: 'space-between'
            }}>
              <div style={{ textTransform: 'uppercase', opacity: 0.7 }}>● {t.ui.tonight}</div>
              <div style={{
                fontFamily: theme.display,
                fontStyle: theme.displayItalic ? 'italic' : 'normal',
                fontWeight: theme.displayWeight,
                fontSize: '22px', letterSpacing: '-0.02em', lineHeight: 1.05,
              }}>
                {today.theme}
              </div>
              <div style={{
                fontFamily: theme.mono, fontSize: '11px', opacity: 0.75,
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>
                {today.hours}
              </div>
            </div>
          </div>
          <div style={{ aspectRatio: '4/5', borderRadius: theme.radius, overflow: 'hidden' }}>
            <img src="assets/noche-1.jpg" alt={t.alt.heroNight} style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            }} />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;