function ContactForm() {
  const [country, setCountry] = React.useState('ID +62');

  const labelStyle = {
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
    color: 'rgba(234,231,225,0.78)', letterSpacing: '0.01em',
    display: 'block', marginBottom: 8,
  };
  const inputStyle = {
    fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 400,
    background: 'rgba(234,231,225,0.04)',
    color: 'var(--fg-on-dark)',
    border: '1px solid rgba(234,231,225,0.14)',
    borderRadius: 8, padding: '14px 16px',
    width: '100%', outline: 'none',
    transition: 'border-color 220ms cubic-bezier(0.2,0.6,0.2,1), background 220ms cubic-bezier(0.2,0.6,0.2,1)',
  };
  const star = <span style={{ color: 'var(--accent-orange)', marginLeft: 4 }}>*</span>;

  return (
    <section
      id="contact"
      style={{
        background: 'var(--bg-deep)',
        color: 'var(--fg-on-dark)',
        borderTop: '1px solid var(--line)',
      }}
    >
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '128px 32px 112px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'rgba(234,231,225,0.5)', marginBottom: 24,
          }}>
            Contact us
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(40px, 5.4vw, 68px)', lineHeight: 1.05,
            letterSpacing: '-0.035em', color: 'var(--fg-on-dark)', margin: 0,
          }}>
            Tell us what you'd rather not be doing.
          </h2>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6,
            color: 'rgba(234,231,225,0.7)', maxWidth: 560, margin: '24px auto 0',
          }}>
            Send us a note. We'll follow up over email or WhatsApp within
            one business day.
          </p>
        </div>

        <form
          onSubmit={(e) => { e.preventDefault(); }}
          style={{
            maxWidth: 560, margin: '64px auto 0',
            display: 'flex', flexDirection: 'column', gap: 24,
          }}
        >
          <div>
            <label style={labelStyle}>Your name{star}</label>
            <input style={inputStyle} type="text" placeholder="Maya Okafor" />
          </div>

          <div>
            <label style={labelStyle}>Email address{star}</label>
            <input style={inputStyle} type="email" placeholder="you@company.com" />
          </div>

          <div>
            <label style={labelStyle}>Phone number{star}</label>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ position: 'relative', flex: '0 0 120px' }}>
                <select
                  value={country}
                  onChange={(e) => setCountry(e.target.value)}
                  style={{
                    ...inputStyle,
                    appearance: 'none',
                    paddingRight: 36,
                    cursor: 'pointer',
                  }}
                >
                  <option style={{ background: '#1E1B15' }}>ID +62</option>
                  <option style={{ background: '#1E1B15' }}>SG +65</option>
                  <option style={{ background: '#1E1B15' }}>MY +60</option>
                  <option style={{ background: '#1E1B15' }}>US +1</option>
                  <option style={{ background: '#1E1B15' }}>UK +44</option>
                  <option style={{ background: '#1E1B15' }}>AU +61</option>
                  <option style={{ background: '#1E1B15' }}>IN +91</option>
                </select>
                <span style={{
                  position: 'absolute', right: 14, top: '50%',
                  transform: 'translateY(-50%)',
                  pointerEvents: 'none',
                  color: 'rgba(234,231,225,0.55)', fontSize: 11,
                }}>▾</span>
              </div>
              <input
                style={{ ...inputStyle, flex: 1 }}
                type="tel"
                placeholder="812 3456 7890"
              />
            </div>
          </div>

          <div>
            <label style={labelStyle}>Company name or website{star}</label>
            <input style={inputStyle} type="text" placeholder="company.com" />
          </div>

          <div>
            <label style={labelStyle}>Message</label>
            <textarea
              style={{ ...inputStyle, minHeight: 120, resize: 'vertical', fontFamily: 'var(--font-sans)' }}
              placeholder="A short note about the work you'd most like to hand off."
            ></textarea>
          </div>

          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <button
              type="submit"
              style={{
                fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 500,
                background: 'var(--brand)', color: 'var(--fg-on-dark)',
                border: 'none', padding: '18px 40px', borderRadius: 8,
                cursor: 'pointer', minWidth: 280,
                transition: 'background 220ms cubic-bezier(0.2,0.6,0.2,1)',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--brand-hover)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--brand)'; }}
            >
              Send message
            </button>
            <div style={{
              fontFamily: 'var(--font-sans)', fontSize: 13,
              color: 'rgba(234,231,225,0.55)',
            }}>
              We respond within one business day, by email or WhatsApp.
            </div>
          </div>
        </form>
      </div>
    </section>
  );
}
window.ContactForm = ContactForm;