/* CONTACT view — interactive form with validation */
const { useState: useStateC } = React;

function Contact({ go }){
  const S = window.SITE;
  const [f, setF] = useStateC({ name:'', email:'', topic:'', msg:'' });
  const [touched, setTouched] = useStateC({});
  const [sent, setSent] = useStateC(false);
  const [time, setTime] = useStateC('');

  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      setTime(d.toUTCString().split(' ')[4] + ' UTC');
    };
    tick(); const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const errs = {
    name: f.name.trim().length < 2 ? 'Tell me your name' : '',
    email: !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email) ? 'A valid email, please' : '',
    msg: f.msg.trim().length < 10 ? 'A little more detail (10+ chars)' : '',
  };
  const valid = !errs.name && !errs.email && !errs.msg;

  const set = (k) => (e) => setF(s => ({...s, [k]:e.target.value}));
  const blur = (k) => () => setTouched(s => ({...s, [k]:true}));

  const submit = (e) => {
    e.preventDefault();
    setTouched({name:true,email:true,msg:true});
    if (valid) setSent(true);
  };

  const topics = ['Policy research', 'Mission operations', 'Speaking / writing', 'Just saying hi'];

  return (
    <main className="page" key="contact">
      <section className="section contact">
        <div className="wrap contact-grid">
          {/* left — invite + methods */}
          <div className="contact-left">
            <Reveal as="div" className="kicker">Contact — 03</Reveal>
            <Reveal as="h1" d={1} className="contact-title display">
              Let&rsquo;s talk<br/>policy, ops, or<br/><span className="accent">orbit.</span>
            </Reveal>
            <Reveal as="p" d={2} className="contact-sub">
              Open to policy research and governance work where operational insight and
              structured thinking add value. Reach out — I read everything.
            </Reveal>

            <Reveal as="div" d={3} className="methods">
              <a className="method hov" href={`mailto:${S.email}`}>
                <span className="m-k mono">Email</span>
                <span className="m-v">{S.email}</span>
                <span className="m-arr">↗</span>
              </a>
              <a className="method hov" href={`https://${S.linkedin}`} target="_blank" rel="noreferrer">
                <span className="m-k mono">LinkedIn</span>
                <span className="m-v">{S.linkedin}</span>
                <span className="m-arr">↗</span>
              </a>
              <div className="method static">
                <span className="m-k mono">Based</span>
                <span className="m-v">{S.location}</span>
                <span className="m-clock mono">{time}</span>
              </div>
            </Reveal>
          </div>

          {/* right — form */}
          <div className="contact-right">
            {!sent ? (
              <Reveal as="form" d={2} className="form" onSubmit={submit} noValidate>
                <div className="form-head mono">TRANSMIT MESSAGE</div>

                <div className={`field ${touched.name&&errs.name?'bad':''}`}>
                  <label>Name</label>
                  <input type="text" value={f.name} onChange={set('name')} onBlur={blur('name')} placeholder="Your name" className="hov"/>
                  {touched.name&&errs.name && <span className="err">{errs.name}</span>}
                </div>

                <div className={`field ${touched.email&&errs.email?'bad':''}`}>
                  <label>Email</label>
                  <input type="email" value={f.email} onChange={set('email')} onBlur={blur('email')} placeholder="you@domain.com" className="hov"/>
                  {touched.email&&errs.email && <span className="err">{errs.email}</span>}
                </div>

                <div className="field">
                  <label>Topic</label>
                  <div className="chips">
                    {topics.map(t => (
                      <button type="button" key={t} className={`chip hov ${f.topic===t?'on':''}`}
                              onClick={()=>setF(s=>({...s,topic:s.topic===t?'':t}))}>{t}</button>
                    ))}
                  </div>
                </div>

                <div className={`field ${touched.msg&&errs.msg?'bad':''}`}>
                  <label>Message</label>
                  <textarea rows="4" value={f.msg} onChange={set('msg')} onBlur={blur('msg')} placeholder="What&rsquo;s on your mind?" className="hov"></textarea>
                  {touched.msg&&errs.msg && <span className="err">{errs.msg}</span>}
                </div>

                <button type="submit" className={`btn accent-btn hov submit ${valid?'':'dim'}`}>
                  Send transmission <span className="arr">→</span>
                </button>
              </Reveal>
            ) : (
              <div className="sent">
                <div className="sent-icon"><span></span></div>
                <h3 className="sent-title display">Transmission received.</h3>
                <p className="sent-sub">Thanks, {f.name.split(' ')[0]}. Your message is in the queue — I&rsquo;ll reply to <span className="accent">{f.email}</span> soon.</p>
                <button className="btn ghost hov" onClick={()=>{setSent(false);setF({name:'',email:'',topic:'',msg:''});setTouched({});}}>
                  Send another <span className="arr">→</span>
                </button>
              </div>
            )}
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
}
window.Contact = Contact;