// Dark-mode Book-a-Consult modal · orange neon theme

function BookConsult({ open, onClose }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    type: 'business', services: [], name: '', email: '', company: '', revenue: '', date: '', time: '', notes: '',
  });

  React.useEffect(() => { if (open) setStep(0); }, [open]);
  if (!open) return null;

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggleService = (s) => setData(d => ({
    ...d, services: d.services.includes(s) ? d.services.filter(x => x !== s) : [...d.services, s]
  }));

  const t = {
    bg: '#04060A', surface: '#0D1524', surface2: '#1A2540',
    line: 'rgba(217,229,236,0.12)', lineStrong: 'rgba(217,229,236,0.22)',
    ink: '#FFFFFF', inkSoft: '#D9E5EC', inkMute: '#5A6B76',
    accent: '#00FFE0', accentGlow: 'rgba(0,255,224,0.55)',
    slate: '#8FA0D8', teal: '#4FB8D8', sage: '#E8F8F0',
    sans: '"Space Grotesk", "Inter", sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  };

  const steps = ['identify', 'scope', 'schedule', 'confirm'];

  const Input = ({ label, value, onChange, placeholder, type = 'text' }) => (
    <label style={{ display: 'block' }}>
      <div style={{ fontFamily: t.mono, fontSize: 10, color: t.inkMute, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8 }}>
        › {label}
      </div>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        style={{
          width: '100%', padding: '12px 14px', background: t.bg, color: t.ink,
          border: `1px solid ${t.line}`, borderRadius: 6, fontSize: 15,
          fontFamily: t.sans, outline: 'none', boxSizing: 'border-box',
          transition: 'border-color .15s',
        }}
        onFocus={(e) => e.target.style.borderColor = t.accent}
        onBlur={(e) => e.target.style.borderColor = t.line}
      />
    </label>
  );

  const dates = ['Thu Apr 24', 'Fri Apr 25', 'Mon Apr 28', 'Tue Apr 29', 'Wed Apr 30'];
  const times = ['9:00 AM', '10:30 AM', '1:00 PM', '2:30 PM', '4:00 PM'];
  const serviceOptions = ['Tax preparation', 'Bookkeeping', 'Payroll', 'CFO advisory', 'Business formation', 'Not sure yet'];

  const canNext = () => {
    if (step === 0) return data.name.trim() && data.email.includes('@');
    if (step === 1) return data.services.length > 0;
    if (step === 2) return data.date && data.time;
    return true;
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'rgba(5,5,6,0.8)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24, fontFamily: t.sans,
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: t.surface, color: t.ink, width: '100%', maxWidth: 680,
        borderRadius: 12, overflow: 'hidden',
        border: `1px solid ${t.lineStrong}`,
        boxShadow: `0 40px 120px -20px rgba(0,0,0,0.8), 0 0 80px ${t.accentGlow}`,
      }}>
        {/* Header */}
        <div style={{ padding: '20px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${t.line}`, background: t.surface2 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', gap: 6 }}>
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(242,185,124,0.7)' }} />
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(184,200,194,0.4)' }} />
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: t.accent }} />
            </div>
            <div style={{ fontFamily: t.mono, fontSize: 12, color: t.inkSoft, marginLeft: 4 }}>
              fortis consult —{' '}
              <span style={{ color: t.accent }}>{steps[step]}</span>
            </div>
          </div>
          <button onClick={onClose} style={{
            background: 'transparent', border: `1px solid ${t.line}`,
            width: 30, height: 30, borderRadius: 6, cursor: 'pointer',
            color: t.inkSoft, fontSize: 16, fontFamily: t.mono,
          }}>×</button>
        </div>

        {/* Stepper */}
        <div style={{ display: 'flex', gap: 6, padding: '16px 28px 0' }}>
          {steps.map((s, i) => (
            <div key={i} style={{ flex: 1 }}>
              <div style={{
                height: 2, borderRadius: 2,
                background: i <= step ? t.accent : t.line,
                boxShadow: i === step ? `0 0 8px ${t.accent}` : 'none',
                transition: 'all .3s',
              }} />
              <div style={{
                fontFamily: t.mono, fontSize: 10, letterSpacing: '0.1em',
                textTransform: 'uppercase', marginTop: 8,
                color: i === step ? t.accent : i < step ? t.inkSoft : t.inkMute,
              }}>0{i + 1} · {s}</div>
            </div>
          ))}
        </div>

        {/* Content */}
        <div style={{ padding: '28px', minHeight: 360 }}>
          {step === 0 && (
            <div style={{ display: 'grid', gap: 20 }}>
              <div>
                <div style={{ fontFamily: t.mono, fontSize: 10, color: t.inkMute, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 10 }}>
                  › entity type
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                  {[
                    { k: 'individual', l: 'Individual' },
                    { k: 'business', l: 'Business owner' },
                    { k: 'founder', l: 'Founder · funded' },
                  ].map(o => (
                    <button key={o.k} onClick={() => update('type', o.k)} style={{
                      padding: '14px', borderRadius: 6,
                      border: `1px solid ${data.type === o.k ? t.accent : t.line}`,
                      background: data.type === o.k ? 'rgba(255,92,40,0.08)' : t.bg,
                      color: data.type === o.k ? t.accent : t.ink,
                      fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: t.sans,
                    }}>{o.l}</button>
                  ))}
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Input label="name" value={data.name} onChange={(v) => update('name', v)} placeholder="Maya Clarke" />
                <Input label="email" type="email" value={data.email} onChange={(v) => update('email', v)} placeholder="maya@example.com" />
              </div>
              {data.type !== 'individual' && (
                <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
                  <Input label="company" value={data.company} onChange={(v) => update('company', v)} placeholder="Thornwood Studio, LLC" />
                  <Input label="annual revenue" value={data.revenue} onChange={(v) => update('revenue', v)} placeholder="$0 – $5M" />
                </div>
              )}
            </div>
          )}

          {step === 1 && (
            <div>
              <div style={{ fontFamily: t.mono, fontSize: 10, color: t.inkMute, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 12 }}>
                › select services · multi-pick
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 24 }}>
                {serviceOptions.map(s => {
                  const on = data.services.includes(s);
                  return (
                    <button key={s} onClick={() => toggleService(s)} style={{
                      padding: '14px 16px', borderRadius: 6,
                      border: `1px solid ${on ? t.accent : t.line}`,
                      background: on ? 'rgba(255,92,40,0.08)' : t.bg,
                      color: on ? t.ink : t.inkSoft, textAlign: 'left', fontSize: 14,
                      cursor: 'pointer', fontFamily: t.sans,
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    }}>
                      <span>{s}</span>
                      <span style={{ fontFamily: t.mono, color: on ? t.accent : t.inkMute }}>
                        {on ? '[×]' : '[ ]'}
                      </span>
                    </button>
                  );
                })}
              </div>
              <label>
                <div style={{ fontFamily: t.mono, fontSize: 10, color: t.inkMute, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8 }}>
                  › notes · optional
                </div>
                <textarea value={data.notes} onChange={(e) => update('notes', e.target.value)}
                  placeholder="timing, prior firm, specific question..."
                  style={{
                    width: '100%', padding: '12px 14px', background: t.bg, color: t.ink,
                    border: `1px solid ${t.line}`, borderRadius: 6, fontSize: 14,
                    fontFamily: t.sans, outline: 'none', minHeight: 90, resize: 'vertical',
                    boxSizing: 'border-box',
                  }}
                />
              </label>
            </div>
          )}

          {step === 2 && (
            <div>
              <div style={{ fontFamily: t.mono, fontSize: 10, color: t.inkMute, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 12 }}>
                › select date
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 24 }}>
                {dates.map(d => {
                  const on = data.date === d;
                  return (
                    <button key={d} onClick={() => update('date', d)} style={{
                      padding: '14px 8px', borderRadius: 6,
                      border: `1px solid ${on ? t.accent : t.line}`,
                      background: on ? 'rgba(255,92,40,0.08)' : t.bg,
                      color: on ? t.ink : t.inkSoft,
                      fontSize: 12, cursor: 'pointer', fontFamily: t.mono,
                    }}>{d}</button>
                  );
                })}
              </div>
              <div style={{ fontFamily: t.mono, fontSize: 10, color: t.inkMute, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 12 }}>
                › select time · ET
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
                {times.map(tm => {
                  const on = data.time === tm;
                  return (
                    <button key={tm} onClick={() => update('time', tm)} style={{
                      padding: '14px 8px', borderRadius: 6,
                      border: `1px solid ${on ? t.accent : t.line}`,
                      background: on ? 'rgba(255,92,40,0.08)' : t.bg,
                      color: on ? t.ink : t.inkSoft,
                      fontSize: 12, cursor: 'pointer', fontFamily: t.mono,
                    }}>{tm}</button>
                  );
                })}
              </div>
            </div>
          )}

          {step === 3 && (
            <div style={{ padding: '10px 0' }}>
              <div style={{ fontFamily: t.mono, fontSize: 12, color: t.accent, marginBottom: 8 }}>
                $ fortis consult --confirm
              </div>
              <div style={{ fontFamily: t.mono, fontSize: 13, color: t.inkSoft, lineHeight: 1.8 }}>
                <div>  <span style={{ color: t.accent }}>✓</span> consult scheduled</div>
                <div>  <span style={{ color: t.accent }}>✓</span> calendar invite queued</div>
                <div>  <span style={{ color: t.accent }}>✓</span> prep guide dispatched</div>
              </div>
              <div style={{ marginTop: 24, padding: 20, background: t.bg, border: `1px solid ${t.line}`, borderRadius: 8 }}>
                <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: '50%',
                    background: t.surface, border: `1px solid ${t.accent}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: t.accent, fontFamily: t.mono, fontSize: 14, fontWeight: 600,
                  }}>ME</div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 500 }}>Marguerite Ellison · CPA</div>
                    <div style={{ fontFamily: t.mono, fontSize: 11, color: t.accent }}>@marguerite · managing partner</div>
                    <div style={{ fontSize: 12, color: t.inkMute, marginTop: 4 }}>
                      {data.date || 'Thu Apr 24'} · {data.time || '9:00 AM'} · 30 min
                    </div>
                  </div>
                </div>
              </div>
              <div style={{ fontSize: 13, color: t.inkSoft, marginTop: 20, textAlign: 'center' }}>
                Invite sent to <span style={{ color: t.accent, fontFamily: t.mono }}>{data.email || 'your inbox'}</span>
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div style={{ padding: '18px 28px', borderTop: `1px solid ${t.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: t.surface2 }}>
          {step === 3 ? (
            <>
              <div style={{ fontFamily: t.mono, fontSize: 11, color: t.inkMute }}>reschedule → reply to email</div>
              <button onClick={onClose} style={{
                padding: '10px 22px', borderRadius: 6, border: 'none',
                background: t.accent, color: t.bg, fontSize: 13,
                fontWeight: 600, cursor: 'pointer', fontFamily: t.sans,
                boxShadow: `0 0 20px ${t.accentGlow}`,
              }}>close →</button>
            </>
          ) : (
            <>
              <button onClick={() => step > 0 && setStep(step - 1)} disabled={step === 0} style={{
                padding: '10px 18px', borderRadius: 6, border: `1px solid ${t.line}`,
                background: 'transparent', color: t.inkSoft, fontSize: 13,
                cursor: step === 0 ? 'default' : 'pointer', opacity: step === 0 ? 0.3 : 1,
                fontFamily: t.sans,
              }}>← back</button>
              <div style={{ fontFamily: t.mono, fontSize: 11, color: t.inkMute }}>step {step + 1} / 3</div>
              <button onClick={() => canNext() && setStep(step + 1)} disabled={!canNext()} style={{
                padding: '10px 22px', borderRadius: 6, border: 'none',
                background: canNext() ? t.accent : t.line,
                color: canNext() ? '#0A0A0B' : t.inkMute,
                fontSize: 13, fontWeight: 600, cursor: canNext() ? 'pointer' : 'default',
                fontFamily: t.sans,
                boxShadow: canNext() ? `0 0 20px ${t.accentGlow}` : 'none',
              }}>{step === 2 ? 'confirm →' : 'continue →'}</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.BookConsult = BookConsult;