const SUPPORT_EMAIL = 'support@onecloudnetworks.com';
const HELP_TOPICS = ['Help with my existing service', 'Billing and my account', 'Keeping or moving my number', 'A new phone system or AI receptionist', 'Carrier solutions', 'Something else'];
const HEARD_FROM = ['Google or another search engine', 'A friend or another business', 'Social media', 'I am already a customer', 'Other'];

function SupportForm() {
  const [v, setV] = React.useState({ first: '', last: '', email: '', phone: '', company: '', topic: '', heard: '', msg: '' }); const [err, setErr] = React.useState({});
  const [busy, setBusy] = React.useState(false); const [sent, setSent] = React.useState(false);
  const set = k => ev => setV(s => ({ ...s, [k]: ev.target.value }));
  const submit = ev => {
    ev.preventDefault(); const e = {};
    if (!v.first.trim()) e.first = 'Enter your first name'; if (!v.last.trim()) e.last = 'Enter your last name';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v.email)) e.email = 'Enter a valid email address';
    if (v.phone.replace(/\D/g, '').length !== 10) e.phone = 'Enter a 10-digit phone number';
    if (!v.topic) e.topic = 'Choose what you need help with';
    setErr(e); if (Object.keys(e).length) return; setBusy(true); sendForm('Website: request a call', { first_name: v.first, last_name: v.last, email: v.email, phone: v.phone, company: v.company, topic: v.topic, heard_from: v.heard, message: v.msg, page: location.href }).then(() => setSent(true), () => setErr({ form: FORM_FAIL })).finally(() => setBusy(false));
  };
  if (sent) return <div className="sup-sent" role="status"><span className="tile" aria-hidden="true"><DS.Icon name="Check" size={28} /></span><h2>Request sent.</h2><p>Thanks, {v.first}. The right person will call you within 1 business hour. Need us sooner? Call <a href={TEL} className="num">{PHONE}</a>.</p></div>;
  return <form className="sup-form" onSubmit={submit} noValidate>
    <div><h2 id="sup-form-title">Request a call</h2><p style={{ marginTop: 6 }}>Tell us what you need and the right person will call you back, usually within 1 business hour.</p></div>
    <div className="car-form-row"><DS.Input label="First name" value={v.first} onChange={set('first')} error={err.first} autoComplete="given-name" placeholder="Your first name" /><DS.Input label="Last name" value={v.last} onChange={set('last')} error={err.last} autoComplete="family-name" placeholder="Your last name" /></div>
    <div className="car-form-row"><DS.Input label="Email" type="email" value={v.email} onChange={set('email')} error={err.email} autoComplete="email" placeholder="you@business.com" /><DS.Input label="Phone" type="tel" value={v.phone} onChange={set('phone')} error={err.phone} autoComplete="tel" placeholder="(214) 555-0100" /></div>
    <DS.Input label="Company name (optional)" value={v.company} onChange={set('company')} autoComplete="organization" placeholder="Your business" />
    <DS.Select label="What do you need help with?" value={v.topic} onChange={set('topic')} error={err.topic} placeholder="Please choose" options={HELP_TOPICS} />
    <DS.Select label="How did you hear about us? (optional)" value={v.heard} onChange={set('heard')} placeholder="Please choose" options={HEARD_FROM} />
    <DS.Input label="Anything else we should know?" multiline rows={4} value={v.msg} onChange={set('msg')} placeholder="Your account number, the line that's affected, or what you're looking for" />
    {err.form && <p role="alert" className="small" style={{ color: '#b42318' }}>{err.form}</p>}
    <div><DS.Button size="lg" type="submit" loading={busy}>Request a call</DS.Button></div>
  </form>;
}

function SupportScreen({ onContact }) {
  const tiles = [
    { icon: 'Phone', label: 'Call support, 24/7', value: PHONE, href: TEL, mono: true },
    { icon: 'Mail', label: 'Email us', value: <>{SUPPORT_EMAIL.split('@')[0]}<wbr />@{SUPPORT_EMAIL.split('@')[1]}</>, href: 'mailto:' + SUPPORT_EMAIL, email: true },
    { icon: 'CalendarDays', label: 'New to OneCloud?', value: 'Book a free demo', onClick: onContact },
  ];
  return <section className="sup" aria-labelledby="sup-title"><Container>
    <div className="sup-head reveal"><h1 id="sup-title">How can we help?</h1><p className="lead">Reach a real person in {HQ}, Texas, any time. Tell us what you need and we'll connect you with the right team.</p></div>
    <div className="sup-card reveal">
      <SupportForm />
      <aside className="sup-side" aria-label="Other ways to reach us">
        <div className="sup-panel on-navy">
          <p className="sup-hi">Hi! A real person answers, day or night.</p>
          {tiles.map(({ icon, label, value, href, onClick, mono, email }, n) => { const inner = <><span className="sup-ic" aria-hidden="true"><DS.Icon name={icon} size={20} /></span><span><span className="sup-label">{label}</span><span className={'sup-value' + (mono ? ' num' : '') + (email ? ' is-email' : '')}>{value}</span></span><span className="sup-go" aria-hidden="true"><DS.Icon name="ArrowRight" size={18} /></span></>;
            return href ? <a key={label} className="sup-tile" href={href} style={{ '--n': n }}>{inner}</a> : <button key={label} type="button" className="sup-tile" onClick={onClick} style={{ '--n': n }}>{inner}</button>; })}
        </div>
        <div className="sup-hq"><h2>Headquarters</h2><p>{HQ}, Texas</p><p className="small">Serving Dallas, Plano, Frisco, McKinney and Fort Worth, and businesses nationwide.</p></div>
      </aside>
    </div>
  </Container></section>;
}
Object.assign(window, { SupportScreen });