/* global React */
const { useState: useContactState, useEffect: useContactEffect } = React;

const REASONS = [
  { id: 'collab', label: 'Collaboration' },
  { id: 'speaking', label: 'Speaking' },
  { id: 'client', label: 'Client work' },
  { id: 'other', label: 'Something else' },
];

function Contact() {
  const [reason, setReason] = useContactState('collab');
  const [name, setName] = useContactState('');
  const [email, setEmail] = useContactState('');
  const [org, setOrg] = useContactState('');
  const [msg, setMsg] = useContactState('');
  const [sent, setSent] = useContactState(false);

  useContactEffect(() => {
    const onPre = (e) => { if (e.detail && REASONS.some((r) => r.id === e.detail)) setReason(e.detail); };
    window.addEventListener('contact-preselect', onPre);
    return () => window.removeEventListener('contact-preselect', onPre);
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (!name || !email || !msg) return;
    setSent(true);
  };

  return (
    <section className="fk-section" id="contact" data-screen-label="07 Contact">
      <div className="fk-section__inner">
        <div className="section-marker">
          <span className="num">06 —</span><span>contact</span>
        </div>
        <div className="contact-grid">
          <div className="contact-copy">
            <h2 className="fk-h1">
              say hello. <span className="fk-display__caveat">I read everything.</span>
            </h2>
            <p>
              Collaboration, speaking, a client engagement, or just a question — pick a reason and tell me
              what you're working on. I answer most of it within a couple of days.
            </p>
            <div className="channel">
              <span className="lbl">Direct</span>
              <span className="val"><a href="mailto:farid@purelyworks.com">farid@purelyworks.com</a></span>
            </div>
            <div className="channel">
              <span className="lbl">Company</span>
              <span className="val"><a href="https://purelyworks.com" target="_blank" rel="noreferrer">purelyworks.com</a></span>
            </div>
            <div className="channel">
              <span className="lbl">Writing</span>
              <span className="val"><a href="https://medium.com/@faridkheloco" target="_blank" rel="noreferrer">medium.com/@faridkheloco</a></span>
            </div>
          </div>

          <form className="contact-form" onSubmit={submit} aria-label="Contact form">
            <div className="row">
              <label htmlFor="cf-reason">Reason</label>
              <div className="reason-pills" role="tablist">
                {REASONS.map((r) => (
                  <button
                    key={r.id}
                    type="button"
                    className={reason === r.id ? 'is-active' : ''}
                    onClick={() => setReason(r.id)}
                    role="tab"
                    aria-selected={reason === r.id}
                  >
                    {r.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="row two">
              <div className="row">
                <label htmlFor="cf-name">Your name</label>
                <input id="cf-name" type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="First and last" required />
              </div>
              <div className="row">
                <label htmlFor="cf-email">Email</label>
                <input id="cf-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@somewhere.com" required />
              </div>
            </div>
            <div className="row">
              <label htmlFor="cf-org">Company or org <span style={{ textTransform: 'none', opacity: 0.6 }}>· optional</span></label>
              <input id="cf-org" type="text" value={org} onChange={(e) => setOrg(e.target.value)} placeholder="Where you work" />
            </div>
            <div className="row">
              <label htmlFor="cf-msg">
                {reason === 'speaking' && 'Event details — date, audience, topic'}
                {reason === 'collab' && 'What you have in mind'}
                {reason === 'client' && 'What you are trying to ship'}
                {reason === 'other' && 'What is on your mind'}
              </label>
              <textarea
                id="cf-msg"
                value={msg}
                onChange={(e) => setMsg(e.target.value)}
                placeholder={
                  reason === 'speaking'
                    ? 'Event, date, audience size, what you want me to talk about…'
                    : 'A paragraph is plenty. Skip the formalities.'
                }
                required
              />
            </div>
            <div className="submit-row">
              <span className="helper">{sent ? 'Sent — talk soon.' : 'Usually a 24–48hr reply.'}</span>
              {!sent ? (
                <button className="fk-btn fk-btn--accent" type="submit">
                  Send <span aria-hidden="true">→</span>
                </button>
              ) : (
                <p className="ok-msg">Got it. I'll write you back.</p>
              )}
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;