// Contact page — Ciao Bella
// Simple, warm contact form. Submits via mailto until backend exists.

function ContactPage({ navigate, currentRoute = '/contact' }) {
  const { useState: useStateC } = React;
  const [form, setForm] = useStateC({ name: '', email: '', topic: 'general', message: '' });
  const [sent, setSent] = useStateC(false);

  const update = (k) => (e) => setForm(prev => ({ ...prev, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`[Ciao Bella] ${form.topic} — ${form.name || 'Someone'}`);
    const body = encodeURIComponent(
      `From: ${form.name} <${form.email}>\nTopic: ${form.topic}\n\n${form.message}`
    );
    window.location.href = `mailto:info@ciaobellaphone.com.au?subject=${subject}&body=${body}`;
    setSent(true);
  };

  return (
    <main className="contact-page" style={{ position: 'relative' }}>
      <section className="contact-hero">
        <div className="container">
          <div className="contact-hero-inner">
            <Pill>Get in touch</Pill>
            <h1 className="contact-title">
              Say <em>ciao</em>.<br/>
              We&apos;ll be the ones writing back.
            </h1>
            <p className="contact-sub">
              Questions, hiccups, requests, or just a hello — drop us a line and
              we&apos;ll get back to you, usually the same day.
            </p>
          </div>
        </div>
      </section>

      <SectionDivider color="blue" />

      <section className="section contact-form-section">
        <div className="container">
          <div className="contact-layout">
            {/* Left: form */}
            <form className="contact-form" onSubmit={submit}>
              <div className="contact-row">
                <label className="contact-field">
                  <span className="contact-label">Your name</span>
                  <input type="text" required value={form.name} onChange={update('name')} placeholder="Jane Smith" />
                </label>
                <label className="contact-field">
                  <span className="contact-label">Email</span>
                  <input type="email" required value={form.email} onChange={update('email')} placeholder="jane@email.com" />
                </label>
              </div>

              <label className="contact-field">
                <span className="contact-label">What&apos;s this about?</span>
                <select value={form.topic} onChange={update('topic')}>
                  <option value="general">General question</option>
                  <option value="pre-order">Pre-order &amp; shipping</option>
                  <option value="returns">Returns &amp; refunds</option>
                  <option value="support">Help with my Ciao Bella</option>
                  <option value="press">Press &amp; partnerships</option>
                </select>
              </label>

              <label className="contact-field">
                <span className="contact-label">Message</span>
                <textarea required rows={6} value={form.message} onChange={update('message')} placeholder="Tell us what you need…" />
              </label>

              <div className="contact-submit-row">
                <CTA type="submit">Send message</CTA>
                {sent && <span className="contact-sent">Your mail app should have opened — we&apos;ll be in touch soon.</span>}
              </div>

              <p className="contact-microcopy">
                We answer most emails within 24 hours, Monday to Friday.
              </p>
            </form>

            {/* Right: aside */}
            <aside className="contact-aside">
              <div className="contact-aside-block">
                <h3>Email us directly</h3>
                <a href="mailto:info@ciaobellaphone.com.au" className="contact-aside-mail">
                  info@ciaobellaphone.com.au
                </a>
                <p className="contact-aside-meta">Reaches both founders.</p>
              </div>

              <div className="contact-aside-block">
                <h3>Looking for an answer first?</h3>
                <ul className="contact-aside-links">
                  <li><a href="#" onClick={(e) => { e.preventDefault(); navigate('/for-parents'); setTimeout(() => document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' }), 100); }}>FAQs</a></li>
                  <li><a href="#" onClick={(e) => { e.preventDefault(); navigate('/refunds'); }}>30-day refund policy</a></li>
                  <li><a href="#" onClick={(e) => { e.preventDefault(); navigate('/subscriptions'); }}>Subscriptions explained</a></li>
                </ul>
              </div>

              <div className="contact-aside-block">
                <h3>Based in</h3>
                <p className="contact-aside-meta">
                  Australia &nbsp;·&nbsp; Designed for Australian families.
                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ContactPage });