// SceneBook.jsx — Beat 2: month calendar + time slots (matches brand screenshot)
// Time window: 3.2 – 7.2s

function SceneBook() {
  const { localTime } = useSprite();

  const winOp = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(localTime);
  const winY = interpolate([0, 0.5], [24, 0], Easing.easeOutCubic)(localTime);

  // Cursor path — move to 10:00 slot → click
  // Slot "10:00" sits around x=1140, y=430 within canvas
  const cx = interpolate(
    [0, 0.9, 1.4, 1.55, 2.4, 3.0],
    [1700, 1170, 1140, 1140, 1300, 1300],
    Easing.easeInOutCubic
  )(localTime);
  const cy = interpolate(
    [0, 0.9, 1.4, 1.55, 2.4, 3.0],
    [850, 460, 440, 440, 620, 620],
    Easing.easeInOutCubic
  )(localTime);

  const slotSelected = localTime >= 1.55;
  const slotHover = localTime >= 0.9 && localTime < 1.55;

  // Click ripple
  const ripT = clamp((localTime - 1.55) / 0.5, 0, 1);

  // Confirm appears at 2.4s
  const confirmT = clamp((localTime - 2.4) / 0.5, 0, 1);

  const exitT = clamp((localTime - 3.6) / 0.4, 0, 1);
  const exitOp = 1 - Easing.easeInCubic(exitT);

  // Slot fade-in stagger
  const slotIn = (i) => Easing.easeOutCubic(clamp((localTime - 0.3 - i * 0.05) / 0.35, 0, 1));

  // Month grid: Monday-start May 2026 layout (like screenshot: 1=Fri)
  // Week rows: W1: _, _, _, _, 1, 2, 3 — but screenshot shows W1 ending with 1,2,3,4 in DO/VR/ZA/ZO
  // Let's mirror screenshot pattern exactly.
  const days = ['MA','DI','WO','DO','VR','ZA','ZO'];
  // Rows from screenshot:
  const monthRows = [
    [null,null,null, 1,  2, 3,  4],
    [5,    6, 7,    8,  9,10, 11],
    [12,  13,14,   15, 16,17, 18],
    [19,  20,21,   22, 23,24, 25],
    [26,  27,28,   29, 30, null, null],
  ];
  // Days with availability dots (picked to match screenshot visual density)
  const availDays = new Set([5, 7, 10, 12, 14, 17, 19, 21]);
  const selectedDay = 13; // Wednesday 13 — matches screenshot "Woensdag 13 mei"

  const timeSlots = ['09:00','09:30','10:00','10:30','11:00','13:00','13:30','14:00'];
  const selectedTimeIdx = 2; // "10:00"

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: exitOp,
      background: CAL.bg,
    }}>
      {/* halo background */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 70% 50% at 50% 80%, ${CAL.haloA} 0%, transparent 65%)`,
      }}/>

      <div style={{
        position: 'absolute',
        left: 220, top: 90,
        opacity: winOp,
        transform: `translateY(${winY}px)`,
      }}>
        <BrowserChrome x={0} y={0} width={1480} height={620} url="jouw-site.nl/contact" halo={false}>
          <div style={{ display: 'flex', height: '100%', fontFamily: CAL.font, padding: '36px 48px' }}>
            {/* LEFT: event info + month calendar */}
            <div style={{ flex: 1, paddingRight: 36 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 10,
                  background: CAL.blue,
                  color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em',
                }}>M</div>
                <div>
                  <div style={{ fontSize: 14, color: CAL.inkSoft, fontWeight: 500 }}>Mark de Vries</div>
                  <div style={{ fontSize: 22, fontWeight: 700, color: CAL.ink, letterSpacing: '-0.02em' }}>
                    30-min strategiegesprek
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 18, marginBottom: 24, fontSize: 13, color: CAL.inkSoft, fontWeight: 500 }}>
                <Row icon="clock">30 min</Row>
                <Row icon="video">Google Meet</Row>
              </div>

              {/* Month grid */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(7, 1fr)',
                gap: 0,
                rowGap: 10,
              }}>
                {days.map(d => (
                  <div key={d} style={{
                    textAlign: 'center',
                    fontSize: 11, color: CAL.inkMuted,
                    letterSpacing: '0.12em', fontWeight: 500,
                    paddingBottom: 6,
                  }}>{d}</div>
                ))}
                {monthRows.flat().map((day, i) => {
                  if (day === null) return <div key={i} />;
                  const isSelected = day === selectedDay;
                  const isAvailable = availDays.has(day);
                  const op = slotIn(i);
                  return (
                    <div key={i} style={{
                      textAlign: 'center',
                      fontSize: 14, fontWeight: 500,
                      color: isSelected ? '#fff' : (isAvailable ? CAL.ink : CAL.inkMuted),
                      position: 'relative',
                      opacity: op,
                      padding: '8px 0 14px',
                    }}>
                      <div style={{
                        width: 30, height: 30,
                        borderRadius: 15,
                        background: isSelected ? CAL.blue : 'transparent',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        margin: '0 auto',
                      }}>{day}</div>
                      {isAvailable && !isSelected && (
                        <div style={{
                          position: 'absolute', left: '50%', bottom: 2,
                          width: 3, height: 3, borderRadius: 2,
                          background: CAL.blue,
                          transform: 'translateX(-50%)',
                        }}/>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* RIGHT: time slots */}
            <div style={{ width: 380, paddingLeft: 36, borderLeft: `1px solid ${CAL.lineSoft}` }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: CAL.ink, letterSpacing: '-0.01em', marginBottom: 16 }}>
                Woensdag 13 mei
              </div>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
              }}>
                {timeSlots.map((t, i) => {
                  const isTarget = i === selectedTimeIdx;
                  const active = isTarget && (slotHover || slotSelected);
                  const selected = isTarget && slotSelected;
                  const op = slotIn(monthRows.flat().length + i);
                  return (
                    <div key={t} style={{
                      height: 44,
                      border: `1px solid ${active ? CAL.blue : CAL.line}`,
                      background: selected ? CAL.blue : (active ? CAL.blueSoft : '#fff'),
                      color: selected ? '#fff' : CAL.ink,
                      borderRadius: 8,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 14, fontWeight: 500,
                      fontFamily: CAL.font,
                      transition: 'border-color 180ms, background 180ms',
                      position: 'relative',
                      opacity: op,
                    }}>
                      {t}
                      {isTarget && ripT > 0 && ripT < 1 && (
                        <div style={{
                          position: 'absolute', inset: 0,
                          borderRadius: 8,
                          border: `2px solid ${CAL.blue}`,
                          transform: `scale(${1 + ripT * 0.4})`,
                          opacity: 1 - ripT,
                          pointerEvents: 'none',
                        }}/>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </BrowserChrome>
      </div>

      {/* Confirmation toast */}
      {confirmT > 0 && (
        <div style={{
          position: 'absolute',
          right: 150, top: 300,
          transform: `translateY(${(1 - confirmT) * 20}px)`,
          opacity: Easing.easeOutCubic(confirmT),
          background: '#fff',
          border: `1px solid ${CAL.line}`,
          borderRadius: 14,
          padding: '18px 22px',
          boxShadow: '0 20px 50px -10px rgba(47,107,255,0.2)',
          display: 'flex', alignItems: 'center', gap: 14,
          fontFamily: CAL.font,
          minWidth: 300,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 20,
            background: CAL.greenSoft,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M5 12l5 5 10-11"
                stroke={CAL.green} strokeWidth="2.5"
                strokeLinecap="round" strokeLinejoin="round"
                strokeDasharray="30"
                strokeDashoffset={30 - clamp((localTime - 2.6)/0.5, 0, 1) * 30}
              />
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, color: CAL.ink, letterSpacing: '-0.01em' }}>Ingepland · wo 13 mei</div>
            <div style={{ fontSize: 13, color: CAL.inkSoft, marginTop: 2 }}>10:00 – 10:30 · Google Meet</div>
          </div>
        </div>
      )}

      <Cursor x={cx} y={cy} />
    </div>
  );
}

function Row({ icon, children }) {
  const icons = {
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    video: <><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3"/></>,
  };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
        {icons[icon]}
      </svg>
      {children}
    </div>
  );
}

window.SceneBook = SceneBook;