// Soulforce Arts — modals
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

// ─── "How did you hear about me?" — discreet one-tap chips on success screens ─
// Shown AFTER a signup, so it never adds friction to the conversion. One tap
// writes the answer to the existing EmailOctopus contact's attribution field
// (via /api/hear) and quietly thanks them. Renders nothing without an email.
const HEAR_OPTIONS = ['Word of mouth', 'Internet search', 'YouTube video', 'Social media conversation', 'Other'];
function HearChips({ email, source, onDark }) {
  const [picked, setPicked] = useStateM(null);
  if (!email) return null;
  const choose = (v) => {
    if (picked) return;
    setPicked(v);
    fetch('/api/hear', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, value: v, source: source || '' }),
    }).catch(() => {});
  };
  const muted = onDark ? 'rgba(255,255,255,0.55)' : 'rgba(24,30,27,0.5)';
  const q = { fontSize: '12px', letterSpacing: '0.02em', color: muted, margin: '0 0 10px' };
  if (picked) return <p style={{ ...q, marginTop: '20px' }}>Thanks — good to know. 🙏</p>;
  const chip = {
    font: 'inherit', fontSize: '11.5px', letterSpacing: '0.03em',
    color: onDark ? 'rgba(255,255,255,0.72)' : 'rgba(24,30,27,0.62)',
    background: 'transparent',
    border: `1px solid ${onDark ? 'rgba(255,255,255,0.22)' : 'rgba(24,30,27,0.18)'}`,
    borderRadius: '999px', padding: '5px 12px', cursor: 'pointer', lineHeight: 1.3,
  };
  return (
    <div style={{ marginTop: '20px', textAlign: 'center' }}>
      <p style={q}>One quick thing — how did you find me?</p>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '7px', justifyContent: 'center' }}>
        {HEAR_OPTIONS.map((o) => <button key={o} type="button" style={chip} onClick={() => choose(o)}>{o}</button>)}
      </div>
    </div>
  );
}

function ModalShell({ onClose, children }) {
  useEffectM(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);
  return (
    <div className="modal-scrim" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="close" onClick={onClose} aria-label="Close">×</button>
        {children}
      </div>
    </div>
  );
}

function FreeChapterModal({ onClose }) {
  const [step, setStep] = useStateM('gate'); // gate | read | done
  const [email, setEmail] = useStateM('');
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    const firstName = ((e.target.querySelector('#fc-name') || {}).value || '').trim();
    const instrument = ((e.target.querySelector('#fc-inst') || {}).value || '').trim();
    fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim(), firstName, instrument, source: 'Chapter modal' }) }).catch(() => {});
    setStep('read');
  };

  if (step === 'read') {
    return (
      <ModalShell onClose={onClose}>
        <div className="reader">
          <div className="ch-num">About the Book</div>
          <h2 className="ch-title">Your art matters more than you know</h2>
          <p className="dropcap">
            <span className="dropcap-letter">M</span>any artists, musicians, and creatives share a secret fear: that their art
            doesn&rsquo;t really matter — that it isn&rsquo;t practical or useful enough to make a
            tangible contribution to a world in need. <strong>This couldn&rsquo;t be further from the truth.</strong>
          </p>
          <p>
            The purpose of art is to bring us more alive, to connect us with something bigger
            than our individual selves, to inspire, heal, and bring us together. These are
            universal human needs &mdash; and without them, life becomes a dry, dusty bone.
          </p>
          <p>
            <em>Soulforce</em> examines how the transformative energy that comes from facing
            creative challenges from a place of wholeness, aliveness, and connection can breathe
            new life into your work &mdash; and empower you to experience your art, your community,
            and the world anew.
          </p>
          <p>
            A must-read for fans of Julia Cameron and Alex Grey, it&rsquo;s a primer for a new
            generation of artists ready to claim their true potential as creative forces for change.
          </p>
          <div className="gate">
            <p>Your free first chapter is on its way to <strong>{email}</strong> &mdash; check your inbox.</p>
            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}>
              <a className="btn sm" href="https://a.co/d/0gpcNaOG" target="_blank" rel="noopener noreferrer">Get the book</a>
              <button className="btn outline sm" onClick={onClose}>Close</button>
            </div>
            <HearChips email={email} source="Book chapter" />
          </div>
        </div>
      </ModalShell>
    );
  }

  return (
    <ModalShell onClose={onClose}>
      <div className="kicker" style={{marginBottom:'16px'}}>The First Chapter</div>
      <h2 className="h-section">Where would you like it sent?</h2>
      <p className="lead">
        One chapter, no obligation. Read on the train, in the green room, between
        students. If it resonates, the rest of the book is waiting.
      </p>
      <form className="form" onSubmit={submit}>
        <div className="field">
          <label htmlFor="fc-name">Your name</label>
          <input id="fc-name" type="text" placeholder="Alex Renfro" />
        </div>
        <div className="field">
          <label htmlFor="fc-email">Email</label>
          <input id="fc-email" type="email" required placeholder="you@example.com"
            value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="field">
          <label htmlFor="fc-inst">Your instrument (optional)</label>
          <select id="fc-inst" defaultValue="">
            <option value="" disabled>Choose one…</option>
            <option>Violin - Viola</option>
            <option>Cello - Bass</option>
            <option>Piano</option>
            <option>Guitar - Plucked Strings</option>
            <option>Voice</option>
            <option>Winds - Brass</option>
            <option>Percussion</option>
            <option>Other</option>
          </select>
        </div>
        <button type="submit" className="btn">Send me the chapter</button>
        <p className="fine">No spam. One thoughtful note a month, easy to unsubscribe.</p>
      </form>
    </ModalShell>
  );
}

function ExploratoryCallModal({ onClose }) {
  const calRef = useRefM(null);
  const CAL_URL = 'https://calendly.com/jarnold84/soulforce-arts-call';
  useEffectM(() => {
    const styled = CAL_URL + '?hide_gdpr_banner=1&background_color=fbfaf5&primary_color=bb8326&text_color=181e1b';
    const init = () => {
      if (window.Calendly && calRef.current) {
        calRef.current.innerHTML = '';
        window.Calendly.initInlineWidget({ url: styled, parentElement: calRef.current });
      }
    };
    const id = 'calendly-widget-js';
    let sc = document.getElementById(id);
    if (!sc) {
      sc = document.createElement('script');
      sc.id = id;
      sc.src = 'https://assets.calendly.com/assets/external/widget.js';
      sc.async = true;
      sc.onload = init;
      document.body.appendChild(sc);
    } else {
      init();
    }
    const t = setTimeout(init, 500);
    return () => clearTimeout(t);
  }, []);
  return (
    <ModalShell onClose={onClose}>
      <div className="kicker" style={{ marginBottom: '16px' }}>Talk with Joseph</div>
      <h2 className="h-section">A 30-minute conversation.</h2>
      <p className="lead">
        Not a sales call. We&rsquo;ll talk about what you&rsquo;re working on, what&rsquo;s
        in the way, and whether this work is right for you. If it is, I&rsquo;ll tell you
        the most useful next step. If it isn&rsquo;t, I&rsquo;ll tell you that too.
      </p>
      <div className="calendly-host" ref={calRef} aria-label="Scheduling calendar" />
      <p className="fine" style={{ marginTop: '14px' }}>
        Trouble loading the calendar?{' '}
        <a href={CAL_URL} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--gold-warm)', borderBottom: '1px solid currentColor' }}>Open the scheduling page</a>.
        {' '}By video. No charge. No pitch.
      </p>
    </ModalShell>
  );
}

function StudioTeaserModal({ onClose, onCallCTA }) {
  return (
    <ModalShell onClose={onClose}>
      <div className="kicker" style={{marginBottom:'16px'}}>The Soulforce Arts Studio</div>
      <h2 className="h-section">A studio for serious musicians.</h2>
      <p className="lead">
        Ongoing weekly study with Joseph, in a small community of musicians on the
        same path. Live classes, working tools, guided practice — and the kind of
        attention you can&rsquo;t get from a course.
      </p>
      <div style={{
        display:'grid', gap:'14px', margin: '20px 0 24px',
        gridTemplateColumns: '1fr 1fr',
      }}>
        <div style={{padding:'18px', border:'1px solid rgba(26,31,29,0.12)'}}>
          <div className="kicker" style={{color:'var(--gold-warm)', marginBottom:'8px'}}>Weekly</div>
          <div style={{fontFamily:'var(--serif)', fontSize:'1.2rem'}}>Live class with Joseph</div>
          <div className="fine">Recorded if you can&rsquo;t make it live.</div>
        </div>
        <div style={{padding:'18px', border:'1px solid rgba(26,31,29,0.12)'}}>
          <div className="kicker" style={{color:'var(--gold-warm)', marginBottom:'8px'}}>20+</div>
          <div style={{fontFamily:'var(--serif)', fontSize:'1.2rem'}}>Tools for ease</div>
          <div className="fine">Growing library you&rsquo;ll use immediately.</div>
        </div>
        <div style={{padding:'18px', border:'1px solid rgba(26,31,29,0.12)'}}>
          <div className="kicker" style={{color:'var(--gold-warm)', marginBottom:'8px'}}>Always</div>
          <div style={{fontFamily:'var(--serif)', fontSize:'1.2rem'}}>A small circle</div>
          <div className="fine">Cohorts kept intentionally small.</div>
        </div>
        <div style={{padding:'18px', border:'1px solid rgba(26,31,29,0.12)'}}>
          <div className="kicker" style={{color:'var(--gold-warm)', marginBottom:'8px'}}>Month to month</div>
          <div style={{fontFamily:'var(--serif)', fontSize:'1.2rem'}}>No fixed term</div>
          <div className="fine">Stay as long as you&rsquo;re growing.</div>
        </div>
      </div>
      <p className="fine" style={{marginBottom:'14px'}}>
        Full details and pricing live on the Studio page. The shortest path in is
        a conversation.
      </p>
      <div style={{display:'flex', gap:'12px', flexWrap:'wrap'}}>
        <button className="btn" onClick={() => { onClose(); onCallCTA(); }}>
          Talk with Joseph        </button>
        <a className="linkish" href="/studio">Visit the Studio page</a>
      </div>
    </ModalShell>
  );
}

// ─── Intake — real "Find Your Path" form: stores to Notion + emails Joseph ──
// Submissions POST to a Make.com webhook, which fans out to the Notion
// "Website Intake — Find Your Path" database and a notification email.
// Paste the Make custom-webhook URL below to go live.
const INTAKE_ENDPOINT = '/api/intake'; // same-origin Vercel function → Notion + email relay

const INTAKE_IN_THE_WAY = [
  'Pain or physical tension',
  'Tension under pressure',
  'Performance anxiety',
  'Repetitive strain or injury',
  'Stuck — practicing more / enjoying less',
  'Something else',
];
const INTAKE_TRIED = [
  'Stretching / strengthening / PT',
  'Changed my setup',
  'Took time off',
  'Alexander Technique',
  'Performance coach or therapist',
  'Books or videos',
  'Nothing yet',
];
const INTAKE_INTEREST = [
  'Something free',
  'Self-paced course',
  'Weekly group class',
  'Private coaching',
  'Not sure yet',
];
function intakeRoute(interest) {
  switch (interest) {
    case 'Something free':     return 'Tension Reset Lab / Chapter 1';
    case 'Self-paced course':  return 'Webinar / Foundation Course';
    case 'Weekly group class': return 'The Studio';
    case 'Private coaching':   return 'Discovery Call';
    default:                   return 'Joseph judgment';
  }
}

function IntakeModal({ onClose, onChapter, source = 'Section 6.5' }) {
  const [step, setStep] = useStateM('form'); // form | done
  const [sending, setSending] = useStateM(false);
  const [firstName, setFirstName] = useStateM('');
  const [email, setEmail] = useStateM('');
  const [instrument, setInstrument] = useStateM('');
  const [inTheWay, setInTheWay] = useStateM([]);
  const [somethingElse, setSomethingElse] = useStateM('');
  const [tried, setTried] = useStateM([]);
  const [interest, setInterest] = useStateM('');
  const [website, setWebsite] = useStateM(''); // honeypot
  const [err, setErr] = useStateM('');

  const toggle = (setArr, val) =>
    setArr((prev) => prev.includes(val) ? prev.filter((x) => x !== val) : [...prev, val]);

  const valid = firstName.trim() && email.includes('@') && instrument.trim()
    && inTheWay.length > 0 && interest;

  const subLabel = (text) => (
    <span style={{ color: 'var(--ink-soft)', fontWeight: 400, opacity: 0.7 }}> {text}</span>
  );

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    if (!valid) { setErr('Please add your instrument, at least one thing in the way, a preference, your name, and email.'); return; }
    if (website) { setStep('done'); return; } // honeypot tripped — silently drop
    const payload = {
      firstName: firstName.trim(),
      email: email.trim(),
      instrument: instrument.trim(),
      inTheWay,
      somethingElse: inTheWay.includes('Something else') ? somethingElse.trim() : '',
      tried,
      interest,
      suggestedRoute: intakeRoute(interest),
      source,
      submittedAt: new Date().toISOString(),
    };
    setSending(true);
    try {
      await Promise.all([
        fetch(INTAKE_ENDPOINT, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        }),
        fetch('/api/subscribe', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email: email.trim(), firstName: firstName.trim(), tag: 'Find Your Path', source: 'Find Your Path' }),
        }),
      ]);
    } catch (ex) {
      console.error('[intake] submit failed', ex);
    }
    setSending(false);
    setStep('done');
  };

  if (step === 'done') {
    return (
      <ModalShell onClose={onClose}>
        <div className="modal-success">
          <div className="check">✓</div>
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>Got it</div>
          <h2 className="h-section" style={{ marginTop: '12px' }}>
            Thanks, {firstName.trim() || 'friend'}.
          </h2>
          <p className="lead" style={{ margin: '0 auto 24px' }}>
            I&rsquo;ll take a look at what you shared and get back to you within a day or
            two with a recommendation. In the meantime, if you haven&rsquo;t read the first
            chapter of <em>Soulforce</em>, it&rsquo;s a good place to start.
          </p>
          <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', justifyContent: 'center' }}>
            <button className="btn" onClick={() => { onClose(); if (onChapter) onChapter(); }}>
              Read Chapter 1 free
            </button>
            <button className="btn outline" onClick={onClose}>Close</button>
          </div>
          <HearChips email={email} source="Find Your Path" />
        </div>
      </ModalShell>
    );
  }

  return (
    <ModalShell onClose={onClose}>
      <div className="kicker" style={{ marginBottom: '16px' }}>Where To Begin</div>
      <h2 className="h-section">Not sure where to start? I&rsquo;ll point you in the right direction.</h2>
      <p className="lead">
        Tell me a little about yourself and what you&rsquo;re dealing with. I&rsquo;ll
        personally recommend the right next step — something free, a class, or a
        conversation. No pitch, no pressure. Just a musician who&rsquo;s been where you are.
      </p>
      <form className="form" onSubmit={submit}>
        <div className="field">
          <label htmlFor="in-inst">What do you play?</label>
          <input id="in-inst" type="text" required placeholder="e.g., violin, guitar, piano, voice, cello…"
            value={instrument} onChange={(e) => setInstrument(e.target.value)} />
        </div>

        <div className="field">
          <label>What&rsquo;s the main thing getting in the way of your playing right now?{subLabel('(select all that apply)')}</label>
          <div className="choice-grid">
            {INTAKE_IN_THE_WAY.map((o) => (
              <button type="button" key={o}
                className={`choice ${inTheWay.includes(o) ? 'active' : ''}`}
                onClick={() => toggle(setInTheWay, o)}>{o}</button>
            ))}
          </div>
          {inTheWay.includes('Something else') && (
            <input type="text" style={{ marginTop: '8px' }} placeholder="Tell me more…"
              value={somethingElse} onChange={(e) => setSomethingElse(e.target.value)} />
          )}
        </div>

        <div className="field">
          <label>Have you tried anything to address this?{subLabel('(optional — check any)')}</label>
          <div className="choice-grid">
            {INTAKE_TRIED.map((o) => (
              <button type="button" key={o}
                className={`choice ${tried.includes(o) ? 'active' : ''}`}
                onClick={() => toggle(setTried, o)}>{o}</button>
            ))}
          </div>
        </div>

        <div className="field">
          <label>What sounds most appealing right now?</label>
          <div className="choice-grid">
            {INTAKE_INTEREST.map((o) => (
              <button type="button" key={o}
                className={`choice ${interest === o ? 'active' : ''}`}
                onClick={() => setInterest(o)}>{o}</button>
            ))}
          </div>
        </div>

        <div className="field">
          <label htmlFor="in-name">Your first name</label>
          <input id="in-name" type="text" required placeholder="Alex"
            value={firstName} onChange={(e) => setFirstName(e.target.value)} />
        </div>
        <div className="field">
          <label htmlFor="in-email">Email</label>
          <input id="in-email" type="email" required placeholder="you@example.com"
            value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>

        <input type="text" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true"
          value={website} onChange={(e) => setWebsite(e.target.value)}
          style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', opacity: 0 }} />

        {err && <p className="fine" style={{ color: '#b23b3b' }}>{err}</p>}
        <button type="submit" className="btn" disabled={sending}>
          {sending ? 'Sending…' : 'Send it my way'}
        </button>
        <p className="fine">Goes straight to me. I read every one. No spam, ever.</p>
      </form>
    </ModalShell>
  );
}

// ─── Tension Reset Lab — reserve a free seat, or get notified ───────────────
function LabModal({ onClose }) {
  const [step, setStep] = useStateM('form'); // form | done
  const [mode, setMode] = useStateM('reserve'); // reserve | notify
  const [email, setEmail] = useStateM('');
  // Next Lab = the third Saturday of the month, rolling to next month once it passes.
  const session = (() => {
    const now = new Date();
    const thirdSaturday = (y, m) => {
      const firstSat = 1 + ((6 - new Date(y, m, 1).getDay() + 7) % 7);
      return new Date(y, m, firstSat + 14);
    };
    let y = now.getFullYear(), m = now.getMonth();
    let sat = thirdSaturday(y, m);
    if (sat < new Date(y, m, now.getDate())) { if (++m > 11) { m = 0; y++; } sat = thirdSaturday(y, m); }
    return sat.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) + ' · 12:00 pm ET';
  })();
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    const firstName = ((e.target.querySelector('#lab-name') || {}).value || '').trim();
    fetch('/api/subscribe', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email.trim(), firstName, tag: 'Tension Reset', source: mode === 'reserve' ? 'Lab reserve' : 'Lab notify' }),
    }).catch(() => {});
    setStep('done');
  };

  if (step === 'done') {
    return (
      <ModalShell onClose={onClose}>
        <div className="modal-success">
          <div className="check">✓</div>
          <div className="kicker" style={{justifyContent:'center', display:'inline-flex'}}>
            {mode === 'reserve' ? 'Your spot is saved' : 'You\u2019re on the list'}
          </div>
          <h2 className="h-section" style={{marginTop:'12px'}}>
            {mode === 'reserve' ? 'See you in the Lab.' : 'I\u2019ll be in touch.'}
          </h2>
          <p className="lead" style={{margin:'0 auto 24px'}}>
            {mode === 'reserve'
              ? <>You&rsquo;re in for <strong>{session}</strong>. A Zoom link is on its way to <strong>{email}</strong> — bring your instrument.</>
              : <>I&rsquo;ll email <strong>{email}</strong> the moment the next Musician&rsquo;s Tension Reset Lab is scheduled.</>}
          </p>
          <HearChips email={email} source="Tension Reset Lab" />
          <button className="btn outline" onClick={onClose}>Close</button>
        </div>
      </ModalShell>
    );
  }

  return (
    <ModalShell onClose={onClose}>
      <div className="kicker" style={{marginBottom:'16px'}}>The Musician&rsquo;s Tension Reset Lab</div>
      <h2 className="h-section">Come experience the work — free.</h2>
      <p className="lead">
        A free, live online drop-in. In 75 minutes I work with a few musicians in
        real time so you can feel the shift for yourself — no lecture, no pressure.
      </p>
      <div className="lab-session-chip">
        <span className="lab-dot"></span>
        Next session — <strong>{session}</strong>
      </div>
      <div className="seg" role="tablist" aria-label="Choose an option">
        <button type="button" className={`seg-btn ${mode === 'reserve' ? 'active' : ''}`} onClick={() => setMode('reserve')}>
          Reserve a seat
        </button>
        <button type="button" className={`seg-btn ${mode === 'notify' ? 'active' : ''}`} onClick={() => setMode('notify')}>
          Can&rsquo;t make it live
        </button>
      </div>
      <form className="form" onSubmit={submit}>
        <div className="field">
          <label htmlFor="lab-name">Your name</label>
          <input id="lab-name" type="text" placeholder="Alex Renfro" />
        </div>
        <div className="field">
          <label htmlFor="lab-email">Email</label>
          <input id="lab-email" type="email" required placeholder="you@example.com"
            value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <button type="submit" className="btn">
          {mode === 'reserve'
            ? <>Join the free Lab</>
            : <>Notify me of the next Lab</>}
        </button>
        <p className="fine">
          {mode === 'reserve'
            ? 'Free. Live on Zoom. Bring your instrument if you can.'
            : 'I\u2019ll only email you about future Labs — nothing else.'}
        </p>
      </form>
      <p className="fine" style={{ textAlign: 'center', marginTop: '18px' }}>
        <a href="/tensionreset" style={{ color: 'var(--gold-warm)', borderBottom: '1px solid currentColor' }}>
          Want the full details? See the Lab page →
        </a>
      </p>
    </ModalShell>
  );
}

// ─── Private Lessons — member vs non-member scheduling (Calendly inline) ─────
function LessonsModal({ onClose }) {
  const [who, setWho] = useStateM('member'); // member | nonmember
  const calRef = useRefM(null);
  const LESSON_URLS = {
    member: 'https://calendly.com/jarnold84/one-off-private-lesson-non-members-clone?primary_color=2e4b55',
    nonmember: 'https://calendly.com/jarnold84/one-off-private-lesson?primary_color=335686',
  };
  useEffectM(() => {
    const url = LESSON_URLS[who] + '&hide_gdpr_banner=1';
    const init = () => {
      if (window.Calendly && calRef.current) {
        calRef.current.innerHTML = '';
        window.Calendly.initInlineWidget({ url, parentElement: calRef.current });
      }
    };
    const id = 'calendly-widget-js';
    let sc = document.getElementById(id);
    if (!sc) {
      sc = document.createElement('script');
      sc.id = id;
      sc.src = 'https://assets.calendly.com/assets/external/widget.js';
      sc.async = true;
      sc.onload = init;
      document.body.appendChild(sc);
    } else {
      init();
    }
    const t = setTimeout(init, 400);
    return () => clearTimeout(t);
  }, [who]);
  return (
    <ModalShell onClose={onClose}>
      <div className="kicker" style={{ marginBottom: '16px' }}>Private Lessons</div>
      <h2 className="h-section">Schedule your lesson.</h2>
      <p className="lead">
        One-to-one work with me, whenever you want to go deeper on something specific to
        you. Studio members book at the member rate &mdash; pick the option that fits.
      </p>
      <div className="seg" role="tablist" aria-label="Member status">
        <button type="button" className={`seg-btn ${who === 'member' ? 'active' : ''}`} onClick={() => setWho('member')}>
          I&rsquo;m a Studio member
        </button>
        <button type="button" className={`seg-btn ${who === 'nonmember' ? 'active' : ''}`} onClick={() => setWho('nonmember')}>
          Not a member yet
        </button>
      </div>
      <p className="fine" style={{ margin: '0 0 10px' }}>
        {who === 'member' ? 'Member rate — $100 / hour.' : 'Standard rate — $150 / hour (members pay $100).'}
      </p>
      <div className="calendly-host" ref={calRef} aria-label="Scheduling calendar" />
      <p className="fine" style={{ marginTop: '14px' }}>
        Trouble loading the calendar?{' '}
        <a href={LESSON_URLS[who]} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--gold-warm)', borderBottom: '1px solid currentColor' }}>Open the scheduling page</a>.
        {' '}Private lessons are non-refundable — see the{' '}
        <a href="/refunds" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--gold-warm)', borderBottom: '1px solid currentColor' }}>refund policy</a>.
      </p>
    </ModalShell>
  );
}

function GenericModal({ title, body, onClose }) {
  return (
    <ModalShell onClose={onClose}>
      <div className="kicker" style={{marginBottom:'16px'}}>Coming soon</div>
      <h2 className="h-section">{title}</h2>
      <p className="lead">{body}</p>
      <button className="btn outline" onClick={onClose}>Close</button>
    </ModalShell>
  );
}

Object.assign(window, {
  FreeChapterModal, ExploratoryCallModal, StudioTeaserModal, GenericModal,
  IntakeModal, LabModal, LessonsModal,
});
