// ============================================================
// CONTACT PAGE — HELLO. headline + Melissa letter + form
// ============================================================

function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '', company: '', email: '', goal: '', message: '',
  });
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
    window.scrollTo({ top: document.querySelector('.contact-form').offsetTop - 100, behavior: 'smooth' });
  };

  return (
    <>
      <section className="contact-hero">
        <div className="contact-hero__inner">
          <h1>HELLO<span className="dot">.</span></h1>
        </div>
      </section>

      <section className="contact-hero" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="contact-hero__inner">
          <div className="contact-body">
            <div className="contact-letter">
              <p>
                At inevidence, our goal is simple: to roll up our sleeves, listen closely, and work alongside you to build solutions that actually move the needle.
              </p>
              <p>
                We're looking forward to learning more about your challenges and sharing ideas on how we can help.
              </p>
              <p>Drop me a line,</p>
              <div className="sign">Melissa.</div>
              <div className="role">Founding Partner · London</div>

              <div className="contact-letter__details">
                <div className="row">
                  <span className="k">Email</span>
                  <span className="v">hello@inevidence.com</span>
                </div>
                <div className="row">
                  <span className="k">London</span>
                  <span className="v">2 Finsbury Avenue, EC2M 2PP</span>
                </div>
                <div className="row">
                  <span className="k">Boston</span>
                  <span className="v">100 Cambridge Street, MA 02114</span>
                </div>
                <div className="row">
                  <span className="k">Sydney</span>
                  <span className="v">1 Bligh Street, NSW 2000</span>
                </div>
                <div className="row">
                  <span className="k">Hours</span>
                  <span className="v">Mon–Fri · We respond within one working day</span>
                </div>
              </div>
            </div>

            <form className="contact-form" onSubmit={submit} noValidate>
              {sent ? (
                <>
                  <h3>Thank you, {form.name.split(' ')[0]}.</h3>
                  <div className="form-success">
                    Your message is with us. Melissa or someone from the team will be in touch within one working day —
                    usually with a few thoughtful questions and a suggested next step.
                  </div>
                  <button type="button" className="btn btn--secondary" onClick={() => { setSent(false); setForm({ name: '', company: '', email: '', goal: '', message: '' }); }}>
                    Send another message
                  </button>
                </>
              ) : (
                <>
                  <h3>Tell us a little about you.</h3>
                  <p style={{ font: 'var(--type-body-sm)', color: 'var(--text-secondary)' }}>
                    A few quick fields. We'll come back with a clear, considered response — no auto-replies, no chatbots.
                  </p>

                  <div className="field--row">
                    <div className="field">
                      <label htmlFor="name">Name</label>
                      <input id="name" type="text" placeholder="Your full name" value={form.name} onChange={set('name')} required />
                    </div>
                    <div className="field">
                      <label htmlFor="company">Company</label>
                      <input id="company" type="text" placeholder="Where you work" value={form.company} onChange={set('company')} />
                    </div>
                  </div>

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

                  <div className="field">
                    <label htmlFor="goal">What are you looking to achieve?</label>
                    <select id="goal" value={form.goal} onChange={set('goal')}>
                      <option value="">Choose the outcome closest to yours</option>
                      <option>Build a customer advocacy programme</option>
                      <option>Activate Voice of the Customer</option>
                      <option>Tell our customer stories better</option>
                      <option>Launch a loyalty or community programme</option>
                      <option>Lift retention and Net Revenue Retention</option>
                      <option>Something else — let's explore</option>
                    </select>
                  </div>

                  <div className="field">
                    <label htmlFor="message">Message</label>
                    <textarea id="message" placeholder="Tell us about the customers you serve, the outcome you need, and where you are today." value={form.message} onChange={set('message')} required></textarea>
                  </div>

                  <button type="submit" className="btn btn--primary btn--lg" style={{ alignSelf: 'flex-start', marginTop: 8 }}>
                    Send Message
                    <Icon name="arrowRight" size={16} color="#fff" />
                  </button>
                </>
              )}
            </form>
          </div>
        </div>
      </section>
    </>
  );
}

window.ContactPage = ContactPage;