// Web3Forms access key — get one free at https://web3forms.com/#start
// (takes ~30 seconds, they email the key to the address where you want form submissions)
const W3F_KEY = 'YOUR_WEB3FORMS_ACCESS_KEY';

function Contact() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errMsg, setErrMsg] = React.useState('');
  const [form, setForm] = React.useState({ name: '', email: '', topic: 'New product', msg: '', website: '' });

  const submit = async (e) => {
    e.preventDefault();
    if (form.website) return; // honeypot — bots fill hidden fields
    setStatus('sending'); setErrMsg('');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: W3F_KEY,
          from_name: 'Xailos · xailos.com',
          subject: `[${form.topic}] brief from ${form.name}`,
          name: form.name,
          email: form.email,
          topic: form.topic,
          message: form.msg,
        }),
      });
      const data = await res.json();
      if (data.success) setStatus('sent');
      else { setStatus('error'); setErrMsg(data.message || 'Send failed. Try emailing hello@xailos.com directly.'); }
    } catch (err) {
      setStatus('error');
      setErrMsg('Network error. Try emailing hello@xailos.com directly.');
    }
  };

  const sent = status === 'sent';
  const sending = status === 'sending';
  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." required/>
                </div>
                {/* honeypot — hidden from humans, bots fill it */}
                <input
                  type="text" name="website" tabIndex="-1" autoComplete="off"
                  value={form.website} onChange={e => setForm({...form, website: e.target.value})}
                  style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
                  aria-hidden="true"
                />
                {status === 'error' && (
                  <div style={{ marginTop: 12, padding: 12, border: '1px solid var(--accent-dim)', borderRadius: 8, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)' }}>
                    · {errMsg}
                  </div>
                )}
                <div className="send">
                  <span className="hint">{sending ? 'sending…' : 'press ⏎ to send'}</span>
                  <button type="submit" className="btn btn-primary" disabled={sending}>
                    {sending ? 'Sending…' : '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 });