/* Quote Connect — Contact Us */

function ContactScreen({ nav, t }) {
  const store = useStore();
  const [f, setF] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const ok = (f.name || "").trim() && (f.email || "").trim() && (f.message || "").trim();

  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const submit = async (e) => {
    e.preventDefault();
    setBusy(true); setErr("");
    const res = await store.addContactMessage({
      name: f.name, email: f.email, phone: f.phone, message: f.message,
    });
    setBusy(false);
    if (res && res.error) setErr(res.error);
    else setSent(true);
  };

  if (sent) {
    return (
      <div className="screen contact-screen">
        <div className="qc-wrap-narrow ct-done">
          <div className="qf-done-mark"><Icon name="check" size={30} stroke={2.5} /></div>
          <h1 className="display ct-done-h">Thanks — message sent</h1>
          <p className="ct-done-p">We’ve received your message at <b className="mono">info@quoteconnect.com.au</b> and will get back to you shortly.</p>
          <div className="ct-done-actions">
            <Btn variant="primary" size="lg" onClick={() => nav.go("browse")}>Get a quote <Icon name="arrow-right" size={17} /></Btn>
            <Btn variant="outline" size="lg" onClick={() => { setSent(false); setF({}); }}>Send another message</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="screen contact-screen">
      <div className="qc-wrap ct-layout">
        <div className="ct-main">
          <div className="eyebrow">Contact</div>
          <h1 className="display page-title">Get in touch</h1>
          <p className="page-sub">Questions about a quote, becoming a supplier, or anything else — send us a message and we’ll come back to you.</p>

          <form className="ct-form card" onSubmit={submit}>
            <label className="qf-field"><span className="qf-label">Name<i className="qf-req">required</i></span>
              <input value={f.name || ""} onChange={(e) => set("name", e.target.value)} /></label>
            <label className="qf-field"><span className="qf-label">Email<i className="qf-req">required</i></span>
              <input type="email" value={f.email || ""} onChange={(e) => set("email", e.target.value)} /></label>
            <label className="qf-field"><span className="qf-label">Phone number</span>
              <input type="tel" value={f.phone || ""} onChange={(e) => set("phone", e.target.value)} /></label>
            <label className="qf-field"><span className="qf-label">Message<i className="qf-req">required</i></span>
              <textarea rows={6} value={f.message || ""} onChange={(e) => set("message", e.target.value)} /></label>
            {err && <div className="ad-login-err mono"><Icon name="alert-circle" size={13} /> {err}</div>}
            <Btn variant="primary" size="lg" full type="submit" disabled={!ok || busy}>{busy ? "Sending…" : <>Send message <Icon name="send" size={16} /></>}</Btn>
          </form>
        </div>

        <aside className="ct-rail">
          <div className="ct-card card">
            <div className="ct-card-ic"><Icon name="mail" size={18} /></div>
            <div className="ct-card-t">Email us</div>
            <a className="ct-card-v mono" href="mailto:info@quoteconnect.com.au">info@quoteconnect.com.au</a>
          </div>
          <div className="ct-card card">
            <div className="ct-card-ic"><Icon name="store" size={18} /></div>
            <div className="ct-card-t">Become a supplier</div>
            <p className="ct-card-p">Get quote enquiries emailed straight to your inbox.</p>
            <Btn variant="outline" size="sm" onClick={() => nav.go("supplier")}>Supplier sign-up <Icon name="arrow-right" size={15} /></Btn>
          </div>
          <div className="ct-note">
            <Icon name="clock" size={14} />
            <span>We aim to reply to every enquiry within one business day.</span>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.ContactScreen = ContactScreen;