/* global React, Icon, Photo, Eyebrow */
const { useState: useStateContact } = React;

const TOPICS = [
  'Managed IT',
  'Cloud / M365',
  'Security',
  'AI adoption',
  'Digital transformation',
  'Something else',
];

const SIZES = ['25–50 seats', '50–150 seats', '150–500 seats', '500+ seats'];

function ContactPage() {
  const [form, setForm] = useStateContact({
    name: '',
    email: '',
    company: '',
    size: '',
    topic: '',
    message: '',
  });
  const [errors, setErrors] = useStateContact({});
  const [state, setState] = useStateContact('idle'); // idle | sending | sent

  const set = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(e => ({ ...e, [k]: null }));
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.email.trim()) e.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Looks off';
    if (!form.company.trim()) e.company = 'Required';
    if (!form.message.trim()) e.message = 'Tell us a little';
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setState('sending');
    setTimeout(() => setState('sent'), 900);
  };

  const reset = () => {
    setForm({ name: '', email: '', company: '', size: '', topic: '', message: '' });
    setErrors({});
    setState('idle');
  };

  return (
    <main data-screen-label="Contact page">
      <div className="page-head">
        <div className="wrap">
          <Eyebrow>Contact</Eyebrow>
          <h1>Thirty minutes.<br/>One honest opinion.</h1>
          <p className="lede">
            Book a no-obligation consult and we will look at one thing keeping your team up at night. You leave with a written opinion, whether you hire us or not.
          </p>
        </div>
      </div>

      <section className="tight">
        <div className="wrap contact-grid">
          <div className="contact-info">
            <h3>Talk to a human.</h3>
            <p>Mon–Fri, 8am–6pm AEST. Out-of-hours support is reserved for clients under SLA.</p>

            <ul className="contact-info-list">
              <li>
                <span className="ic"><Icon.phone /></span>
                <div>
                  <div className="k">PHONE</div>
                  <div className="v">(02) 9199 8520</div>
                </div>
              </li>
              <li>
                <span className="ic"><Icon.mail /></span>
                <div>
                  <div className="k">EMAIL</div>
                  <div className="v">info@planetiware.com</div>
                </div>
              </li>
              <li>
                <span className="ic"><Icon.pin /></span>
                <div>
                  <div className="k">OFFICE</div>
                  <div className="v">Level 2, 65–71 Belmore Rd<br/>Randwick NSW 2031, Australia</div>
                </div>
              </li>
            </ul>

            <div style={{borderTop: '1px solid var(--line)', paddingTop: 24, marginTop: 8}}>
              <div style={{fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--fg-mute)', marginBottom: 10}}>WHAT TO EXPECT</div>
              <ul style={{margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10}}>
                {[
                  'A reply within one business day.',
                  '30-minute call with a senior engineer — not a sales rep.',
                  'A written opinion within five business days.',
                ].map((t, i) => (
                  <li key={i} style={{display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--fg-2)'}}>
                    <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--blue)', marginTop: 4, minWidth: 22}}>0{i + 1}</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {state === 'sent' ? (
            <div className="form-card fade-in">
              <div className="form-success">
                <div className="ok">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <h3>Got it. We will be in touch.</h3>
                <p>
                  Thanks, {form.name.split(' ')[0] || 'there'}. A senior engineer will reach out within one business day at <strong style={{color: 'var(--ink)'}}>{form.email}</strong>.
                </p>
                <div style={{display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap'}}>
                  <button className="btn btn-light-ghost" onClick={reset}>Send another</button>
                </div>
                <div style={{marginTop: 32, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-mute)'}}>
                  REF · PW-{Math.floor(Math.random() * 9000 + 1000)}-{new Date().getFullYear()}
                </div>
              </div>
            </div>
          ) : (
            <form className="form-card fade-in" onSubmit={submit} noValidate>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24}}>
                <h3 style={{fontSize: 22}}>Support</h3>
                <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-mute)', letterSpacing: '0.06em'}}>30 MIN · NO OBLIGATION</span>
              </div>

              <div className="form-row">
                <div className={`field ${errors.name ? 'err' : ''}`} style={{marginBottom: 0}}>
                  <label>Your name</label>
                  <input value={form.name} onChange={(e) => set('name', e.target.value)} placeholder="Jane Doe" />
                  {errors.name && <span className="field-err">{errors.name}</span>}
                </div>
                <div className={`field ${errors.email ? 'err' : ''}`} style={{marginBottom: 0}}>
                  <label>Work email</label>
                  <input type="email" value={form.email} onChange={(e) => set('email', e.target.value)} placeholder="jane@company.com" />
                  {errors.email && <span className="field-err">{errors.email}</span>}
                </div>
              </div>

              <div className={`field ${errors.company ? 'err' : ''}`}>
                <label>Company</label>
                <input value={form.company} onChange={(e) => set('company', e.target.value)} placeholder="Atlas Freight Pty Ltd" />
                {errors.company && <span className="field-err">{errors.company}</span>}
              </div>

              <div className="field">
                <label>Company size</label>
                <div className="chip-row">
                  {SIZES.map((s) => (
                    <button type="button" key={s}
                            className={`chip ${form.size === s ? 'on' : ''}`}
                            onClick={() => set('size', s)}>{s}</button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>What is this about?</label>
                <div className="chip-row">
                  {TOPICS.map((t) => (
                    <button type="button" key={t}
                            className={`chip ${form.topic === t ? 'on' : ''}`}
                            onClick={() => set('topic', t)}>{t}</button>
                  ))}
                </div>
              </div>

              <div className={`field ${errors.message ? 'err' : ''}`}>
                <label>What is keeping you up at night?</label>
                <textarea value={form.message} onChange={(e) => set('message', e.target.value)} placeholder="A paragraph is plenty. Be honest — it goes to a senior engineer, not a sales filter." />
                {errors.message && <span className="field-err">{errors.message}</span>}
              </div>

              <div className="form-submit">
                <span className="hint">We reply within 1 business day.</span>
                <button type="submit" className="btn btn-primary btn-arrow" disabled={state === 'sending'}>
                  {state === 'sending' ? 'Sending…' : 'Send & book consult'}
                  {state !== 'sending' && <Icon.arrow />}
                </button>
              </div>
            </form>
          )}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ContactPage });