// Contact form — minimal, single-column, big underlines
function Contact() {
  const [budget, setBudget] = React.useState('the engine');
  const budgets = ['the launch', 'the engine', 'the partner', 'still figuring it out'];
  return (
    <section id="contact" className="section">
      <div className="container contact-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 64 }}>
        <Reveal>
          <div className="label" style={{ marginBottom: 24 }}>// or skip the call</div>
          <h2 className="display display--lg">
            just<br/>
            <span className="italic-em">write me.</span>
          </h2>
          <p style={{ marginTop: 24, fontSize: 17, color: 'var(--ink-2)', maxWidth: 380, textWrap: 'pretty' }}>
            prefer email? want to share a longer brief first? drop it here. i write back within a working day — usually within an hour.
          </p>
          <div style={{ marginTop: 32, display: 'grid', gap: 4 }}>
            <span className="label">or just email me</span>
            <a href="mailto:hello@hadi.systems" className="serif italic-em" style={{ fontSize: 26, letterSpacing: '-0.02em' }}>hello@hadi.systems</a>
          </div>
        </Reveal>

        <Reveal delay={2}>
          <form onSubmit={(e) => { 
            e.preventDefault(); 
            const data = new FormData(e.target);
            const name = data.get('name');
            const email = data.get('email');
            const message = data.get('message');
            const subject = encodeURIComponent(`Inquiry from ${name} (${budget})`);
            const body = encodeURIComponent(`Name: ${name}\nEmail: ${email}\nBudget: ${budget}\n\nMessage:\n${message}`);
            window.location.href = `mailto:hello@hadi.systems?subject=${subject}&body=${body}`;
          }} style={{ display: 'grid', gap: 24 }}>
            <Field label="01 · what should i call you?">
              <input name="name" className="input" type="text" placeholder="your name" required />
            </Field>
            <Field label="02 · where should i write back?">
              <input name="email" className="input" type="email" placeholder="you@yours.com" required />
            </Field>
            <Field label="03 · which one fits?">
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, paddingTop: 12 }}>
                {budgets.map(b => (
                  <button type="button" key={b} onClick={() => setBudget(b)}
                    className="mono"
                    style={{
                      padding: '8px 14px',
                      fontSize: 12,
                      borderRadius: 999,
                      border: `1px solid ${budget === b ? 'var(--ink)' : 'var(--line-2)'}`,
                      background: budget === b ? 'var(--ink)' : 'transparent',
                      color: budget === b ? 'var(--bg)' : 'var(--ink-2)',
                      cursor: 'pointer',
                      transition: 'all .2s ease',
                    }}>
                    {b}
                  </button>
                ))}
              </div>
            </Field>
            <Field label="04 · what’s slowing you down?">
              <textarea name="message" className="textarea" rows="5" placeholder="a few sentences. tell me what’s on fire — i’ll figure out the rest on the call." required />
            </Field>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
              <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>↳ goes straight to my inbox. no auto-reply.</span>
              <button type="submit" className="btn">send it →</button>
            </div>
          </form>
        </Reveal>
      </div>
    </section>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <div className="field-label">
        <span className="label">{label}</span>
      </div>
      {children}
    </div>
  );
}

Object.assign(window, { Contact });