/* global React, Reveal */
const { useState: useStateContact } = React;

function ContactPage({ go }) {
  const [form, setForm] = useStateContact({ name: '', org: '', email: '', message: '' });
  const [status, setStatus] = useStateContact('idle'); // idle | unavailable

  const submit = (e) => {
    e.preventDefault();
    setStatus('unavailable');
  };

  const update = (k) => (e) => {
    setForm({ ...form, [k]: e.target.value });
    if (status !== 'idle') setStatus('idle');
  };

  return (
    <div className="page-enter" data-screen-label="Contact">
      {/* HEADER */}
      <section className="page-header">
        <div className="container">
          <span className="label page-locator">Contact · Direct conversation</span>
          <div className="page-header-grid">
            <h1 className="display-1">
              Let's have a<br />
              <em>direct</em> conversation.
            </h1>
            <p className="page-header-lede lede">
              We're open to direct conversations with people working on interesting problems. No long forms. No sales process. Just a straightforward exchange about whether we can be useful.
            </p>
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <Reveal as="section" className="section">
        <div className="container">
          <div className="contact-grid">

            <form className="contact-form" onSubmit={submit}>
              <span className="label section-eyebrow">Send a message</span>

              <div className="form-field">
                <label className="form-label" htmlFor="f-name">Name</label>
                <input
                  id="f-name"
                  className="form-input"
                  type="text"
                  placeholder="Your name"
                  value={form.name}
                  onChange={update('name')}
                  required
                />
              </div>

              <div className="form-field">
                <label className="form-label" htmlFor="f-org">Organisation <span style={{textTransform: 'none', fontStyle: 'normal', color: 'var(--text-muted)'}}>(optional)</span></label>
                <input
                  id="f-org"
                  className="form-input"
                  type="text"
                  placeholder="Where you work"
                  value={form.org}
                  onChange={update('org')}
                />
              </div>

              <div className="form-field">
                <label className="form-label" htmlFor="f-email">Email</label>
                <input
                  id="f-email"
                  className="form-input"
                  type="email"
                  placeholder="you@organisation.com"
                  value={form.email}
                  onChange={update('email')}
                  required
                />
              </div>

              <div className="form-field">
                <label className="form-label" htmlFor="f-msg">What are you working on?</label>
                <textarea
                  id="f-msg"
                  className="form-textarea"
                  placeholder="A few sentences is plenty — enough that we know whether this is something we can help with."
                  value={form.message}
                  onChange={update('message')}
                  required
                />
              </div>

              <div className="form-submit-row">
                <span className="form-status" role="status" aria-live="polite" aria-atomic="true">
                  {status === 'unavailable'
                    ? 'Online form delivery is not available yet. Please email hello@ideligo.com instead.'
                    : ''}
                </span>
                <button
                  type="submit"
                  className="btn btn-primary"
                >
                  Send message <span className="arrow">→</span>
                </button>
              </div>
            </form>

            <aside className="contact-side">
              <h2 className="contact-side-h">Or skip the form <em>entirely.</em></h2>
              <p className="contact-side-body">
                A short email is just as welcome as a polished enquiry. Tell us what you're working on, what's making it difficult, and whether you're looking for a sounding board or something more.
              </p>

              <div className="contact-direct">
                <div className="contact-direct-row">
                  <span className="contact-direct-label">Email</span>
                  <span className="contact-direct-val">
                    <a href="mailto:hello@ideligo.com">hello@ideligo.com</a>
                  </span>
                </div>
                <div className="contact-direct-row">
                  <span className="contact-direct-label">LinkedIn</span>
                  <span className="contact-direct-val">
                    <a href="https://www.linkedin.com/in/irina-dunayevsky-mba-pmp/" target="_blank" rel="noopener noreferrer">Connect on LinkedIn ↗</a>
                  </span>
                </div>
                <div className="contact-direct-row">
                  <span className="contact-direct-label">Response</span>
                  <span className="contact-direct-val" style={{fontStyle: 'normal', color: 'var(--text-body)', fontSize: '15px'}}>
                    Within two working days, always.
                  </span>
                </div>
                <div className="contact-direct-row">
                  <span className="contact-direct-label">Hours</span>
                  <span className="contact-direct-val" style={{fontStyle: 'normal', color: 'var(--text-body)', fontSize: '15px'}}>
                    UTC+1 · Mon–Thu, 09:00–17:00
                  </span>
                </div>
              </div>

              <div style={{
                marginTop: '32px',
                paddingTop: '24px',
                borderTop: '1px solid var(--border-default)',
                fontFamily: 'var(--sans)',
                fontStyle: 'normal',
                fontSize: '15px',
                color: 'var(--text-muted)',
                lineHeight: 1.5,
              }}>
                If we can help, we'll say so clearly. If we can't, we'll say that too — and suggest who might.
              </div>
            </aside>

          </div>
        </div>
      </Reveal>

      {/* Footer-ish quiet CTA */}
      <Reveal as="section" className="section-sm">
        <div className="container">
          <div className="positioning-inner">
            <span className="label section-eyebrow">Before you write</span>
            <p className="pull-quote" style={{fontSize: 'clamp(20px, 1.8vw, 22px)'}}>
              It often helps to skim the <button className="link-arrow" onClick={() => go('insights')} style={{background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 'inherit', fontFamily: 'inherit', fontStyle: 'normal', color: 'var(--interactive-secondary)', borderBottom: '1px solid var(--interactive-secondary)'}}>Insights</button> first — they provide a deeper view of how IDELIGO approaches complex situations.
            </p>
          </div>
        </div>
      </Reveal>
    </div>
  );
}

window.ContactPage = ContactPage;