/* global React, C, FONT_DISP, FONT_SANS, Eyebrow, Button, useWindowWidth, useReveal */

/* --- Final note / signed handwritten block ---------------------- */
function SignedNote() {
  const [ref, shown] = useReveal();
  const w = useWindowWidth();
  const isMobile = w <= 768;
  return (
    <section style={{ background: C.warm, padding: isMobile ? '72px 0' : '120px 0' }} ref={ref}>
      <div style={{
        maxWidth: 880, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px',
        opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(16px)',
        transition: 'opacity 700ms ease, transform 800ms cubic-bezier(0.2,0.8,0.2,1)',
      }}>
        <p style={{
          fontFamily: FONT_DISP, fontWeight: 500,
          fontSize: isMobile ? 20 : 28, lineHeight: isMobile ? '32px' : '42px',
          color: C.navy, margin: 0, letterSpacing: '-0.005em',
        }}>
          If your monthly close, compliance pack, or weekly operations report has crept into a spreadsheet that only one person fully understands, you don't need another BI tool. You need a system. That's what I build — one engagement at a time, with one accountable partner from first call to handover.
        </p>
      </div>
    </section>
  );
}

/* --- Tweaks panel ---------------------------------------------- */
function TweaksPanel({ state, setState, visible, onClose }) {
  if (!visible) return null;
  const row = { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 };
  const label = { fontFamily: FONT_SANS, fontWeight: 700, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.sage };
  return (
    <div style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 200,
      width: 300, background: '#fff', border: `1px solid ${C.borderWarm}`,
      borderRadius: 12, boxShadow: '0 18px 40px rgba(27,45,79,0.18)',
      padding: 20, fontFamily: FONT_SANS,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ fontFamily: FONT_DISP, fontWeight: 700, fontSize: 16, color: C.navy }}>Tweaks</div>
        <button onClick={onClose} style={{
          border: 'none', background: 'transparent', cursor: 'pointer',
          color: C.mutedSoft, fontSize: 18, lineHeight: 1,
        }}>×</button>
      </div>
      <div style={row}>
        <div style={label}>Variation</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {['A', 'B', 'C'].map(v => (
            <button key={v} onClick={() => setState({ variant: v })} style={{
              padding: '10px 0', borderRadius: 6, cursor: 'pointer',
              border: `1px solid ${state.variant === v ? C.navy : C.borderWarm}`,
              background: state.variant === v ? C.navy : '#fff',
              color: state.variant === v ? '#fff' : C.navy,
              fontFamily: FONT_DISP, fontWeight: 700, fontSize: 13,
            }}>
              {v === 'A' ? 'Editorial' : v === 'B' ? 'Ledger' : 'Personal'}
            </button>
          ))}
        </div>
      </div>
      <div style={row}>
        <div style={label}>Tagline</div>
        <select value={state.taglineIdx} onChange={e => setState({ taglineIdx: Number(e.target.value) })} style={{
          fontFamily: FONT_SANS, fontSize: 13, padding: '10px 12px',
          border: `1px solid ${C.borderWarm}`, borderRadius: 6, color: C.ink, background: '#fff',
        }}>
          <option value="0">Decision systems, built around how your business actually runs.</option>
          <option value="1">Tailored data. Trusted decisions.</option>
          <option value="2">Dashboards built around the work, not the tool.</option>
          <option value="3">Data your team will actually use.</option>
        </select>
      </div>
      <div style={row}>
        <div style={label}>Primary CTA color</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          {[['orange', C.orange], ['navy', C.navy]].map(([name, col]) => (
            <button key={name} onClick={() => setState({ ctaColor: name })} style={{
              padding: '10px 0', borderRadius: 6, cursor: 'pointer',
              border: `1px solid ${state.ctaColor === name ? C.navy : C.borderWarm}`,
              background: '#fff', color: C.navy,
              fontFamily: FONT_SANS, fontWeight: 600, fontSize: 12,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: col }} />
              {name}
            </button>
          ))}
        </div>
      </div>
      <div style={row}>
        <div style={label}>Scroll progress bar</div>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: C.ink, cursor: 'pointer' }}>
          <input type="checkbox" checked={state.progressBar} onChange={e => setState({ progressBar: e.target.checked })} />
          Show top progress bar
        </label>
      </div>
    </div>
  );
}

Object.assign(window, { SignedNote, TweaksPanel });