/* VA Classes, Contact page. Reuses shared Nav / Footer / TrialModal / FAQ / Icon. */

const CONTACT_METHODS = [
  { ic: "mail", label: "Email us", value: "contact@vaclasses.live", sub: "We reply within a few hours", href: "mailto:contact@vaclasses.live" },
  { ic: "phone", label: "Call or text", value: "+91 94524 47742", sub: "Mon–Sat · 8am–9pm EST (Toronto / Ottawa)", href: "tel:+919452447742" },
  { ic: "message-circle", label: "WhatsApp", value: "Chat with us", sub: "Fastest for quick questions", href: "https://wa.me/919452447742" },
  { ic: "calendar-check", label: "Book a call", value: "Pick a time", sub: "15-min chat with an advisor", href: "#book-call" },
];

const CONTACT_FAQ = [
  { q: "How quickly will I hear back?", a: "Email and form messages are answered within a few hours during our support hours (Mon to Sat, 8am to 9pm EST). WhatsApp is usually faster." },
  { q: "Can I speak to someone before booking?", a: "Absolutely. Send us a message or WhatsApp us and we'll answer your questions and help you pick the right plan, no obligation." },
  { q: "Do you offer classes in my timezone?", a: "Yes. Our tutors are based in India and teach families across Canada, so we can find a time that works for you, in every Canadian time zone, including evenings and weekends." },
  { q: "How do I reschedule or cancel a class?", a: "You can reschedule from your portal up to a few hours before class, or message your tutor directly. Plans can be paused or cancelled anytime." },
];

function ContactHero() {
  return (
    <header className="section contact-hero" id="top">
      <div className="wrap">
        <p className="eyebrow">Contact us</p>
        <h1>We're here to <span className="mark-yellow">help</span>.</h1>
        <p className="lead">Questions about classes, tutors, pricing or your account? Reach out any way you like, a real person will get back to you fast.</p>
      </div>
    </header>
  );
}

function ContactBody() {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [f, setF] = React.useState({ name: "", email: "", topic: "General question", message: "" });
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const ready = f.name && f.email;

  const submit = () => {
    if (!ready) return;
    setSending(true);
    const payload = {
      parent: f.name, email: f.email, phone: "", province: "",
      child: "", grade: "", subjects: f.topic,
      schedule: "", goal: f.message, heard: "",
      source: "Contact Form",
      submittedAt: new Date().toLocaleString("en-CA"),
      page: location.href,
    };
    const finish = () => { setSending(false); setSent(true); };
    if (window.VA_LEAD_ENDPOINT && window.VA_LEAD_ENDPOINT.startsWith("http")) {
      fetch(window.VA_LEAD_ENDPOINT, { method: "POST", mode: "no-cors", headers: { "Content-Type": "text/plain;charset=utf-8" }, body: JSON.stringify(payload) }).then(finish).catch(finish);
    } else { console.warn("VA_LEAD_ENDPOINT not set:", payload); finish(); }
  };

  useLucide();
  return (
    <section className="section" style={{ paddingTop: 8 }}>
      <div className="wrap contact-grid">
        <div className="contact-methods">
          {CONTACT_METHODS.map(m => (
            <a className="method" href={m.href} key={m.label}>
              <span className="m-ic"><Icon name={m.ic} size={22} /></span>
              <span className="m-tx">
                <span className="m-label">{m.label}</span>
                <span className="m-value">{m.value}</span>
                <span className="m-subv">{m.sub}</span>
              </span>
            </a>
          ))}
          <div className="contact-socials">
            <span className="cs-label">Follow along</span>
            <div className="socials light">
              <a className="social" href={window.VA_LINKS.facebook} target="_blank" rel="noopener" aria-label="Facebook"><SocialIcon kind="facebook" /></a>
              <a className="social" href={window.VA_LINKS.instagram} target="_blank" rel="noopener" aria-label="Instagram"><SocialIcon kind="instagram" /></a>
              <a className="social" href={window.VA_LINKS.trustpilot} target="_blank" rel="noopener" aria-label="Trustpilot"><SocialIcon kind="trustpilot" /></a>
            </div>
          </div>
        </div>

        <div className="contact-form card-pop">
          {!sent ? (
            <React.Fragment>
              <h2>Send us a message</h2>
              <p className="cf-sub">Fill this in and we'll reply by email.</p>
              <div className="m-field">
                <label className="field-label">Your name</label>
                <input className="field" placeholder="e.g. Jordan Bennett" value={f.name} onChange={e => set("name", e.target.value)} />
              </div>
              <div className="m-field">
                <label className="field-label">Email</label>
                <input className="field" type="email" placeholder="you@email.com" value={f.email} onChange={e => set("email", e.target.value)} />
              </div>
              <div className="m-field">
                <label className="field-label">What's it about?</label>
                <select className="field" value={f.topic} onChange={e => set("topic", e.target.value)}>
                  {["General question", "Booking a class", "Pricing & plans", "Billing & account", "Becoming a tutor", "Something else"].map(o => <option key={o}>{o}</option>)}
                </select>
              </div>
              <div className="m-field">
                <label className="field-label">Message</label>
                <textarea className="field" rows="4" placeholder="How can we help?" value={f.message} onChange={e => set("message", e.target.value)}></textarea>
              </div>
              <button className={"btn btn-pop btn-block btn-lg" + (ready ? "" : " is-disabled")} disabled={sending} onClick={submit}>
                {sending ? "Sending…" : "Send message"}<Icon name={sending ? "loader" : "send"} />
              </button>
            </React.Fragment>
          ) : (
            <div className="success" style={{ padding: "20px 0" }}>
              <div className="badge-check"><svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#14130E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></div>
              <h2>Message sent!</h2>
              <p className="cf-sub" style={{ marginBottom: 22 }}>Thanks {f.name.split(" ")[0] || "there"}, we'll reply to <b>{f.email}</b> shortly.</p>
              <button className="btn btn-outline btn-block" onClick={() => { setSent(false); setF({ name: "", email: "", topic: "General question", message: "" }); }}>Send another</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function ContactFAQ() {
  return (
    <section className="section alt">
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow">Good to know</p>
          <h2>Frequently asked</h2>
        </div>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>
          <FAQ items={CONTACT_FAQ} />
        </div>
      </div>
    </section>
  );
}

function ContactApp() {
  const [trial, setTrial] = React.useState(false);
  useLucide();
  return (
    <div className="site">
      <Nav onTrial={() => setTrial(true)} />
      <ContactHero />
      <ContactBody />
      <ContactFAQ />
      <section className="cta-band">
        <div className="wrap">
          <h2>Rather just try a class?</h2>
          <p>Book a free 1-on-1 trial in Math, Science, English or Coding, no card required.</p>
          <div className="cta-row">
            <button className="btn btn-pop btn-lg" onClick={() => setTrial(true)}>Book a free class<Icon name="arrow-right" /></button>
          </div>
        </div>
      </section>
      <Footer />
      {trial && <TrialModal onClose={() => setTrial(false)} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactApp />);