const { useState: useStudioState } = React;

const SLOTS = [
  '9–11 AM', '11–1 PM', '1–3 PM', '3–5 PM',
  '5–7 PM', '7–9 PM', '9–11 PM', '11–1 AM',
];
const TAKEN = new Set([1, 4]);

function Studio() {
  const [knobs, setKnobs] = useStudioState({ gain: 65, lowpass: 80, reverb: 30, drive: 20 });
  const [faders, setFaders] = useStudioState([75, 55, 40, 85]);
  const [slot, setSlot] = useStudioState(null);
  const [date, setDate] = useStudioState('2026-04-24');

  const setKnob = (k, v) => setKnobs(kk => ({ ...kk, [k]: v }));
  const setFader = (i, v) => setFaders(f => f.map((x, idx) => idx === i ? v : x));

  return (
    <section className="container" id="studio">
      <SectionHead
        num="[06] / STUDIO"
        title="Inside <em>Studio B-207.</em>"
        sub="Our treated control room for members. Bookings are paused while we sort out a new calendar — peek around in the meantime."
      />
      <div className="studio-booking">
        <div className="studio-panel">
          <div className="screws"><span/><span/></div>
          <h3>Room tone</h3>
          <p style={{ color: 'rgba(255,255,255,0.75)', marginTop: 8, fontSize: 14 }}>
            Twiddle these. They don't do anything real — but that's the thing about the studio, you'll find out when you book it.
          </p>

          <div className="knob-rack">
            <Knob label="Gain"    value={knobs.gain}    onChange={v => setKnob('gain', v)}    color="var(--c1)" />
            <Knob label="Low-pass" value={knobs.lowpass} onChange={v => setKnob('lowpass', v)} color="var(--c2)" />
            <Knob label="Reverb"  value={knobs.reverb}  onChange={v => setKnob('reverb', v)}  color="var(--c3)" />
            <Knob label="Drive"   value={knobs.drive}   onChange={v => setKnob('drive', v)}   color="var(--c4)" />
          </div>

          <div className="fader-bank">
            {['DRUMS', 'BASS', 'KEYS', 'VOX'].map((lbl, i) => (
              <Fader key={lbl} label={lbl} value={faders[i]} onChange={(v) => setFader(i, v)} color={['var(--c1)','var(--c2)','var(--c3)','var(--c4)'][i]} />
            ))}
          </div>

          <p className="mono" style={{ color: 'var(--c3)', marginTop: 18 }}>
            STATUS · ROOM AVAILABLE · 6 SLOTS THIS WEEK
          </p>
        </div>

        <div className="booking-form">
          <h3>Reserve a slot</h3>
          <div className="grid">
            <div className="field">
              <label>Name</label>
              <input type="text" defaultValue="Mia Rodriguez" />
            </div>
            <div className="field">
              <label>Student ID</label>
              <input type="text" defaultValue="0042-XXXX" />
            </div>
            <div className="field">
              <label>Date</label>
              <input type="date" value={date} onChange={e => setDate(e.target.value)} />
            </div>
            <div className="field">
              <label>Session type</label>
              <select defaultValue="Produce">
                <option>Produce</option>
                <option>Mix/Master</option>
                <option>Record vocals</option>
                <option>Rehearse</option>
                <option>Other</option>
              </select>
            </div>
            <div className="field full">
              <label>Pick a time slot</label>
              <div className="slot-grid">
                {SLOTS.map((s, i) => (
                  <div
                    key={s}
                    className={"slot" + (TAKEN.has(i) ? " taken" : "") + (slot === i ? " selected" : "")}
                    onClick={() => !TAKEN.has(i) && setSlot(i)}
                  >{s}</div>
                ))}
              </div>
            </div>
            <div className="field full">
              <label>Notes</label>
              <textarea rows={2} placeholder="Anything the next person should know?" />
            </div>
          </div>
          <button
            className="btn primary"
            disabled
            aria-disabled="true"
            title="Bookings paused — check back soon"
            style={{ width: '100%', marginTop: 18, justifyContent: 'center', opacity: 0.45, cursor: 'not-allowed', pointerEvents: 'none' }}
          >
            Bookings paused — back soon
          </button>
        </div>
      </div>
    </section>
  );
}

window.Studio = Studio;