function Contact() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', topic: 'New product', msg: '' });
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="sec-head">
          <div className="tag">§ 06 / Contact</div>
          <div style={{ display: 'none' }}></div>
        </div>

        <div className="contact-wrap">
          <div>
            <h2 className="big">Got a hard problem<br/><em>worth solving?</em></h2>
            <p className="lede">
              We take on a small number of partner engagements each year. Tell us what you're trying to ship — if it's within our craft, we'll reply within a day.
            </p>
            <div className="block">
              <div className="k">Email</div>
              <div className="v">hello<span style={{color:'var(--text-3)'}}>@</span><em>xailos</em><span style={{color:'var(--text-3)'}}>.com</span></div>
            </div>
            <div className="block">
              <div className="k">Response time</div>
              <div className="v">within <em>24h</em></div>
            </div>
          </div>

          <form className="form" onSubmit={submit}>
            {sent ? (
              <div style={{ padding: '40px 0', textAlign: 'center' }}>
                <div style={{ color: 'var(--live)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 14 }}>· message received</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, lineHeight: 1.2, color: 'var(--text)' }}>
                  Thanks — we'll reply <em>soon</em>.
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-3)', marginTop: 20, letterSpacing: '0.14em', textTransform: 'uppercase' }}>ticket · #A{Math.floor(Math.random()*9000+1000)}</div>
              </div>
            ) : (
              <>
                <div className="field">
                  <div className="k">Name</div>
                  <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Your name" required/>
                </div>
                <div className="field">
                  <div className="k">Email</div>
                  <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="you@company.com" required/>
                </div>
                <div className="field">
                  <div className="k">Topic</div>
                  <select value={form.topic} onChange={e => setForm({...form, topic: e.target.value})}>
                    <option>New product</option>
                    <option>Kinship inquiry</option>
                    <option>HireWise inquiry</option>
                    <option>Partnership</option>
                    <option>Something else</option>
                  </select>
                </div>
                <div className="field">
                  <div className="k">Brief</div>
                  <textarea value={form.msg} onChange={e => setForm({...form, msg: e.target.value})} placeholder="In a few lines: what, for whom, and why now."/>
                </div>
                <div className="send">
                  <span className="hint">press ⏎ to send</span>
                  <button type="submit" className="btn btn-primary">Send brief →</button>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="grid">
          <div>
            <div style={{ marginBottom: 20 }}>
              <Logo size={22}/>
            </div>
            <div className="desc">An independent software studio. Small tools, sharp ideas, shipped weekly.</div>
          </div>
          <div>
            <h5>Products</h5>
            <a href="https://kinship.xailos.com">Kinship</a>
            <a href="https://hirewise.xailos.com">HireWise</a>
            <a href="https://jersey.xailos.com">Jersey</a>
            <a href="https://fitforge.xailos.com">FitForge</a>
          </div>
          <div>
            <h5>Studio</h5>
            <a href="#philosophy">Philosophy</a>
            <a href="#principles">Principles</a>
            <a href="#studio">What we do</a>
            <a href="#">Release log</a>
          </div>
          <div>
            <h5>Elsewhere</h5>
            <a href="#">GitHub</a>
            <a href="#">X / Twitter</a>
            <a href="#contact">Contact</a>
          </div>
        </div>
        <div className="bottom">
          <span>© 2025–2026 Xailos Studio</span>
          <span>· all systems operational</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });