// Contact page — interactive form

const Contact = ({ go }) => {
  const [form, setForm] = React.useState({ name: '', email: '', gap: '' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [touched, setTouched] = React.useState({});

  const validate = (data) => {
    const e = {};
    if (!data.name.trim()) e.name = "We need a name to write back to.";
    if (!data.email.trim()) e.email = "Where should we reply?";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = "That email looks off.";
    if (!data.gap.trim()) e.gap = "Tell us a little. A sentence is plenty.";
    else if (data.gap.trim().length < 12) e.gap = "Just a sentence more, please.";
    return e;
  };

  const update = (k, v) => {
    const next = { ...form, [k]: v };
    setForm(next);
    if (touched[k]) {
      const e = validate(next);
      setErrors(e);
    }
  };

  const submit = async (e) => {
    e.preventDefault();
    const errs = validate(form);
    setErrors(errs);
    setTouched({ name: true, email: true, gap: true });
    if (Object.keys(errs).length === 0) {
      const res = await fetch('https://formspree.io/f/xlgzdanv', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({ name: form.name, email: form.email, message: form.gap })
      });
      if (res.ok) setSent(true);
    }
  };

  if (sent) {
    return (
      <div className="page page-enter">
        <div className="success">
          <h2>
            Got it.<br/>
            <span style={{fontStyle:'normal'}}>We'll be</span> in touch.
          </h2>
          <p>Thanks {form.name.split(' ')[0]} — you'll hear back within two working days.<br/>Sometimes faster, if the wifi cooperates.</p>
          <button onClick={() => { setSent(false); setForm({name:'',email:'',gap:''}); setTouched({}); setErrors({}); }}>
            Send another →
          </button>
        </div>
        <Footer go={go} />
      </div>
    );
  }

  return (
    <div className="page page-enter">
      <Masthead />

      <section className="contact-hero">
        <h1>
          Oh, <em style={{color:'var(--feminine)'}}>say</em><br/>
          more.
        </h1>
        <p className="sub">
          Tell us what you've got. We'll tell you how to make it land.
        </p>
      </section>

      <Marquee items={["Content engines", "Expert positioning", "Community building", "Narrative repair"]} />

      <section className="contact-grid">
        <form className="form" onSubmit={submit} noValidate>
          <p style={{margin:'0 0 16px', fontSize:19, lineHeight:1.5, fontFamily:'EB Garamond, serif'}}>
            Whether you're a person with a powerful idea, an organisation with a story to tell, or a city losing the narrative online — <em>we want to hear from you.</em>
          </p>

          <div className={`field ${errors.name && touched.name ? 'error' : ''}`}>
            <label htmlFor="name">Your name</label>
            <input
              id="name"
              type="text"
              value={form.name}
              placeholder="First and last"
              onChange={(e) => update('name', e.target.value)}
              onBlur={() => { setTouched({...touched, name:true}); setErrors(validate(form)); }}
            />
            {errors.name && touched.name && <span className="field-error">{errors.name}</span>}
          </div>

          <div className={`field ${errors.email && touched.email ? 'error' : ''}`}>
            <label htmlFor="email">Your email</label>
            <input
              id="email"
              type="email"
              value={form.email}
              placeholder="you@somewhere.com"
              onChange={(e) => update('email', e.target.value)}
              onBlur={() => { setTouched({...touched, email:true}); setErrors(validate(form)); }}
            />
            {errors.email && touched.email && <span className="field-error">{errors.email}</span>}
          </div>

          <div className={`field ${errors.gap && touched.gap ? 'error' : ''}`}>
            <label htmlFor="gap">What's the gap?</label>
            <textarea
              id="gap"
              rows={4}
              value={form.gap}
              placeholder="Tell us about your story, your audience, and what isn't landing yet…"
              onChange={(e) => update('gap', e.target.value)}
              onBlur={() => { setTouched({...touched, gap:true}); setErrors(validate(form)); }}
            />
            {errors.gap && touched.gap && <span className="field-error">{errors.gap}</span>}
            <div style={{display:'flex', justifyContent:'flex-end', marginTop:8}}>
              <span className="mono" style={{color:'var(--muted)'}}>{form.gap.length} chars</span>
            </div>
          </div>

          <button className="send" type="submit">
            <span>Send it.</span>
            <span className="arr">→</span>
          </button>
        </form>

        <aside className="contact-side">
          <div className="contact-card dark">
            <h4>Email</h4>
            <p>hello@<br/>ohsaymedia.com</p>
          </div>
          <div className="contact-card">
            <h4>Reply window</h4>
            <p>Within two<br/>working days.</p>
          </div>
          <div className="contact-card">
            <h4>Best for</h4>
            <p>Founders, orgs &amp; cities with a story that isn't landing.</p>
          </div>
          <div className="contact-card">
            <h4>Currently</h4>
            <p style={{fontStyle:'italic'}}>
              Taking on a small number of new clients for Q3 / Q4.
            </p>
          </div>
        </aside>
      </section>

      <div className="cta-strip" style={{cursor:'pointer'}} onClick={() => window.location.href='mailto:hello@ohsaymedia.com'}>
        <span className="big" style={{fontStyle:'italic'}}>Or just write us.</span>
        <span style={{fontFamily:'Instrument Serif, serif', fontSize:'clamp(28px, 4vw, 48px)', fontStyle:'italic'}}>hello@ohsaymedia.com</span>
      </div>

      <Footer go={go} />
    </div>
  );
};

window.Contact = Contact;