/* ea-contact.jsx — Contact page for the Luppy Early-Access site.
   Same content/behavior as contact.jsx, but shares EANav / EAFooter
   (early-access.jsx) so chrome matches the rest of the pre-launch site. */

(function () {
  const { useState } = React;

  const TOPICS = [
    { id: 'sales', label: 'Sales' },
    { id: 'support', label: 'Support' },
    { id: 'billing', label: 'Billing' },
    { id: 'partnership', label: 'Partnership' },
    { id: 'press', label: 'Press' },
    { id: 'other', label: 'Other' },
  ];

  const EMPTY_FORM = { name: '', email: '', company: '', size: '', message: '', company_website: '' };

  function ContactForm() {
    const [form, setForm] = useState(EMPTY_FORM);
    const [topic, setTopic] = useState('sales');
    const [sending, setSending] = useState(false);
    const [error, setError] = useState('');
    const [sent, setSent] = useState(null); // { name, email, topic }
    const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
    const canSend = form.name.trim() && form.email.trim() && form.message.trim();

    const send = async (e) => {
      e.preventDefault();
      if (!canSend || sending) return;

      setError('');
      setSending(true);
      try {
        await submitForm({
          form: 'contact',
          topic,
          name: form.name.trim(),
          email: form.email.trim(),
          company: form.company.trim(),
          size: form.size,
          message: form.message.trim(),
          company_website: form.company_website,
        });
        setSent({ name: form.name.trim(), email: form.email.trim(), topic });
        setForm(EMPTY_FORM);
      } catch (err) {
        setError(err.message);
      } finally {
        setSending(false);
      }
    };

    if (sent) {
      return (
        <div className="form-card">
          <div className="form-success">
            <div className="ok"><Icon name="solar:check-circle-bold" size={40} /></div>
            <h2>Message sent!</h2>
            <p>
              Thanks, {sent.name.split(' ')[0] || 'there'} — your message is on its way to our{' '}
              {TOPICS.find((t) => t.id === sent.topic)?.label.toLowerCase()} team. We'll reply to{' '}
              <b>{sent.email || 'your inbox'}</b> within one business day.
            </p>
            <button
              className="again"
              onClick={() => { setSent(null); setTopic('sales'); }}
            >
              <Icon name="solar:pen-new-square-linear" size={17} /> Send another
            </button>
          </div>
        </div>
      );
    }

    return (
      <div className="form-card">
        <div className="form-card-head">
          <h2>Send us a message</h2>
          <p>Fill this in and the right person will get back to you — usually within a few hours.</p>
        </div>

        <form onSubmit={send}>
          <div className="field">
            <label>What's this about?</label>
            <div className="topic-row">
              {TOPICS.map((t) => (
                <button
                  type="button"
                  key={t.id}
                  className={'topic-chip' + (topic === t.id ? ' active' : '')}
                  onClick={() => setTopic(t.id)}
                >
                  {t.label}
                </button>
              ))}
            </div>
          </div>

          <div className="field-row">
            <div className="field">
              <label>Full name</label>
              <input value={form.name} onChange={set('name')} placeholder="Maria Alvarez" />
            </div>
            <div className="field">
              <label>Work email</label>
              <input type="email" value={form.email} onChange={set('email')} placeholder="you@company.com" />
            </div>
          </div>

          <div className="field-row">
            <div className="field">
              <label>Company <span className="opt">(optional)</span></label>
              <input value={form.company} onChange={set('company')} placeholder="Sparkle Bright Cleaning" />
            </div>
            <div className="field">
              <label>Team size <span className="opt">(optional)</span></label>
              <select value={form.size} onChange={set('size')}>
                <option value="" disabled>Select…</option>
                <option>1–5 cleaners</option>
                <option>6–15 cleaners</option>
                <option>16–40 cleaners</option>
                <option>40+ cleaners</option>
              </select>
            </div>
          </div>

          <div className="field">
            <label>How can we help?</label>
            <textarea
              value={form.message}
              onChange={set('message')}
              placeholder="Tell us a bit about your cleaning business and what you're hoping Luppy can do for you…"
            ></textarea>
          </div>

          {/* honeypot — hidden from people, catnip for bots */}
          <input type="text" name="company_website" value={form.company_website} onChange={set('company_website')}
            tabIndex={-1} autoComplete="off" aria-hidden="true"
            style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', opacity: 0 }} />

          {error && <div className="ea-form-err">{error}</div>}

          <button type="submit" className="btn btn-solid form-submit" disabled={!canSend || sending}
            style={!canSend || sending ? { opacity: 0.5, cursor: sending ? 'progress' : 'not-allowed' } : null}>
            {sending ? 'Sending…' : 'Send message'}
            <Icon name={sending ? 'solar:refresh-linear' : 'solar:arrow-right-linear'} size={18} />
          </button>

          <div className="form-foot">
            <Icon name="solar:shield-check-bold" size={15} />
            We'll never share your details. No spam, ever.
          </div>
        </form>
      </div>
    );
  }

  function ContactAside() {
    const methods = [
      {
        ic: 'solar:rocket-2-bold', cls: 'm-primary', t: 'Join early access',
        d: 'Want in before we open to the public? Grab your spot on the early-access list.',
        onClick: () => openJoinModal(), label: 'Join early access',
      },
      {
        ic: 'solar:chat-round-dots-bold', cls: 'm-success', t: 'Questions about early access',
        d: 'Not sure Luppy is a fit yet, or want to know what happens after you sign up? Ask us.',
        link: 'mailto:hello@luppy.app', label: 'hello@luppy.app',
      },
      {
        ic: 'solar:letter-bold', cls: 'm-info', t: 'Press & partnerships',
        d: 'Writing about early-stage tools for cleaning businesses, or want to partner? Reach out.',
        link: 'mailto:press@luppy.app', label: 'press@luppy.app',
      },
    ];
    return (
      <div className="contact-aside">
        <h2>Ways to reach us</h2>
        <div className="method-list">
          {methods.map((m, i) => (
            <div key={i} className="method">
              <div className={'method-icon ' + m.cls}><Icon name={m.ic} size={22} /></div>
              <div className="method-body">
                <h3>{m.t}</h3>
                <p>{m.d}</p>
                {m.onClick
                  ? <button type="button" className="method-link" onClick={m.onClick}>
                      {m.label} <Icon name="solar:arrow-right-linear" size={15} />
                    </button>
                  : <a className="method-link" href={m.link}>
                      {m.label} <Icon name="solar:arrow-right-linear" size={15} />
                    </a>}
              </div>
            </div>
          ))}
        </div>

        <div className="contact-details">
          <div className="detail">
            <Icon name="solar:clock-circle-bold" size={18} />
            <div><div className="dl">Reply time</div><div className="dv">Within one business day</div></div>
          </div>
          <div className="detail">
            <Icon name="solar:map-point-bold" size={18} />
            <div><div className="dl">Based in</div><div className="dv">Georgia, USA</div></div>
          </div>
          <div className="detail">
            <Icon name="solar:shield-check-bold" size={18} />
            <div><div className="dl">Status</div><div className="dv">Building in early access</div></div>
          </div>
        </div>
      </div>
    );
  }

  function EAContactPage() {
    return (
      <React.Fragment>
        <EANav />
        <main>
          <section className="contact-hero" data-screen-label="Contact — header">
            <div className="container">
              <div className="inner">
                <span className="section-eyebrow">Contact</span>
                <h1>Talk to a human.</h1>
                <p className="lead">
                  Questions about Luppy, early access, or whether it fits your cleaning business?
                  We're a quick message away — and a real person always answers.
                </p>
              </div>
            </div>
          </section>

          <section className="contact-main" data-screen-label="Contact — form">
            <div className="container contact-grid">
              <ContactAside />
              <ContactForm />
            </div>
          </section>
        </main>
        <EAFooter />
        <EAJoinModal />
        <EALegalModal />
      </React.Fragment>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<EAContactPage />);
})();