// Booking — calendar embed placeholder + clear CTA
const { useState } = React;

function Booking() {
  const [weekIdx, setWeekIdx] = useState(0);
  const [selectedDay, setSelectedDay] = useState(0);

  const days = ['mon', 'tue', 'wed', 'thu', 'fri'];
  
  const today = new Date();
  const dayOfWk = today.getDay(); 
  const diffToMonday = (dayOfWk === 0 || dayOfWk === 6) ? (dayOfWk === 0 ? 1 : 2) : 1 - dayOfWk;
  
  const monday = new Date();
  monday.setDate(monday.getDate() + diffToMonday + (weekIdx * 7));
  
  const dates = [];
  for (let i = 0; i < 5; i++) {
    const d = new Date(monday);
    d.setDate(d.getDate() + i);
    dates.push(d.getDate());
  }

  const dummySlots = [
    ['10:00', '14:30', 'busy', '16:00'],
    ['busy', '11:00', '13:00', '15:30'],
    ['09:00', '10:30', '14:00', 'busy'],
    ['11:30', '12:00', '15:00', '17:00'],
    ['10:00', 'busy', '14:00', '16:00']
  ];
  const slots = dummySlots[(selectedDay + weekIdx) % dummySlots.length];

  return (
    <section id="booking" className="section booking-section" style={{ background: 'var(--ink)', color: 'var(--bg)', borderTop: 0 }}>
      <style>{`
        .booking-section .booking-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
        @media (max-width: 1024px) {
          .booking-section .booking-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <div className="container booking-grid" style={{ display: 'grid', gap: 56, alignItems: 'center' }}>
        <Reveal>
          <div className="label" style={{ color: '#a8a394', marginBottom: 24 }}>// booking</div>
          <h2 className="display display--lg" style={{ color: 'var(--bg)' }}>
            twenty<br/>
            <span className="italic-em" style={{ color: 'var(--accent)' }}>minutes.</span>
          </h2>
          <p style={{ marginTop: 24, fontSize: 19, lineHeight: 1.55, color: '#d8d3c2', maxWidth: 480, textWrap: 'pretty' }}>
            no pitch. no script. tell me what’s slowing you down — i’ll tell you, honestly, if i can help. if i can’t, i’ll point you to someone who can.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'grid', gap: 12 }}>
            {[
              'free, obviously',
              'zoom or whatever you prefer',
              'a real plan in your inbox the next day',
            ].map(x => (
              <li key={x} className="mono" style={{ fontSize: 13, color: '#d8d3c2', display: 'flex', gap: 12 }}>
                <span style={{ color: 'var(--accent)' }}>›</span>{x}
              </li>
            ))}
          </ul>
        </Reveal>

        <Reveal delay={2}>
          <div style={{
            background: '#1B1A15',
            border: '1px solid #2C2A23',
            borderRadius: 14,
            padding: 24,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
              <div>
                <div className="mono" style={{ fontSize: 11, color: '#8a8576' }}>// calendar.next</div>
                <div className="serif" style={{ fontSize: 22, color: 'var(--bg)', marginTop: 4 }}>
                  {weekIdx === 0 ? 'this week' : `+${weekIdx} week${weekIdx > 1 ? 's' : ''}`}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={{...navBtn, opacity: weekIdx === 0 ? 0.5 : 1, cursor: weekIdx === 0 ? 'not-allowed' : 'pointer'}} onClick={() => setWeekIdx(Math.max(0, weekIdx - 1))} disabled={weekIdx === 0}>‹</button>
                <button style={{...navBtn, cursor: 'pointer'}} onClick={() => setWeekIdx(weekIdx + 1)}>›</button>
              </div>
            </div>

            <div className="booking-cal-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 20 }}>
              {days.map((d, i) => (
                <button key={d}
                  onClick={() => setSelectedDay(i)}
                  style={{
                    textAlign: 'center',
                    cursor: 'pointer',
                    padding: '8px 0',
                    borderRadius: 8,
                    background: selectedDay === i ? '#2C2A23' : 'transparent',
                    border: selectedDay === i ? '1px solid var(--accent)' : '1px solid transparent',
                    color: 'var(--bg)',
                    fontFamily: 'inherit',
                    transition: 'all 0.2s ease',
                  }}
                >
                  <div className="mono" style={{ fontSize: 11, color: selectedDay === i ? 'var(--accent)' : '#8a8576' }}>{d}</div>
                  <div className="serif" style={{ fontSize: 22, color: selectedDay === i ? 'var(--bg)' : '#a8a394', marginTop: 4 }}>{dates[i]}</div>
                </button>
              ))}
            </div>

            <div style={{ display: 'grid', gap: 8 }}>
              {slots.map((s, i) => (
                <button key={i} style={{
                  width: '100%',
                  padding: '14px 16px',
                  borderRadius: 10,
                  background: s === 'busy' ? 'transparent' : '#252319',
                  border: '1px solid #2C2A23',
                  color: s === 'busy' ? '#5a5749' : 'var(--bg)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  gap: 12,
                  fontFamily: 'var(--mono)', fontSize: 13,
                  cursor: s === 'busy' ? 'not-allowed' : 'pointer',
                  textAlign: 'left',
                  whiteSpace: 'nowrap',
                  transition: 'background .2s ease, border-color .2s ease',
                }}
                onMouseEnter={(e)=>{ if(s!=='busy'){ e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-ink)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}}
                onMouseLeave={(e)=>{ if(s!=='busy'){ e.currentTarget.style.background = '#252319'; e.currentTarget.style.color = 'var(--bg)'; e.currentTarget.style.borderColor = '#2C2A23'; }}}
                onClick={() => { if (s !== 'busy') alert(`Selected time: ${days[selectedDay]} ${dates[selectedDay]} at ${s}`); }}
                >
                  <span>{days[selectedDay]} · {dates[selectedDay]} · {s === 'busy' ? 'booked' : s}</span>
                  {s !== 'busy' && <span style={{ whiteSpace: 'nowrap' }}>book ›</span>}
                </button>
              ))}
            </div>

            <div className="mono" style={{ fontSize: 11, color: '#8a8576', marginTop: 16, textAlign: 'center' }}>
              all times shown in your local timezone · 20 min · zoom
            </div>
            
            <div style={{ marginTop: 24, textAlign: 'center' }}>
              <a href="mailto:hadi@example.com?subject=Let's%20Talk" className="mono" style={{
                fontSize: 12, color: 'var(--ink-2)', textDecoration: 'none',
                padding: '8px 16px', borderRadius: 8, border: '1px solid #2C2A23',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                transition: 'all 0.2s ease', background: 'transparent'
              }}
              onMouseEnter={(e)=>{ e.currentTarget.style.background = '#1E1D17'; e.currentTarget.style.color = 'var(--bg)'; }}
              onMouseLeave={(e)=>{ e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-2)'; }}
              >
                or just send an email ›
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const navBtn = {
  width: 32, height: 32,
  borderRadius: 8,
  background: 'transparent',
  border: '1px solid #2C2A23',
  color: '#d8d3c2',
  fontFamily: 'var(--mono)',
};

Object.assign(window, { Booking });