// Contact.jsx — "Let's Grow" CTA + EmailJS contact form, and the Footer
const { useState: useStateC, useEffect: useEffectC } = React;

function Contact() {
  const [sent, setSent] = useStateC(false);
  const [loading, setLoading] = useStateC(false);
  const [form, setForm] = useStateC({ name: "", email: "", who: "Small or local business", msg: "" });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  useEffectC(() => {
    if (typeof emailjs !== 'undefined') {
      emailjs.init("ASGrAIYroNSgqqlFI");
    }
  }, []);

  const submit = async e => {
    e.preventDefault();
    setLoading(true);
    try {
      await emailjs.send("service_alrckd9", "template_1dsystd", {
        user_name: form.name,
        user_email: form.email,
        user_type: form.who,
        user_message: form.msg
      });
      setSent(true);
    } catch (error) {
      console.error("Email send failed:", error);
      alert("Oops, something went wrong. Please try again or email me directly at bryceliggins@gmail.com");
    } finally {
      setLoading(false);
    }
  };

  const field = {
    width: "100%", boxSizing: "border-box", fontFamily: "var(--font-body)", fontSize: 15,
    padding: "12px 13px", border: "var(--stroke) solid var(--gm-ink)", background: "#fff",
    color: "var(--gm-ink)", borderRadius: 0, outline: "none"
  };
  const label = {
    fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase",
    fontSize: 14, letterSpacing: ".04em", color: "var(--gm-ink)", marginBottom: 7, display: "block"
  };

  return (
    <section id="contact" className="sec" style={{ background: "var(--gm-navy)", color: "var(--gm-paper)", position: "relative", overflow: "hidden" }}>
      <div className="sunburst" style={{ position: "absolute", top: "-40%", left: "70%", width: 1100, height: 1100, opacity: .5, pointerEvents: "none" }}></div>
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="contact-grid">
          <div>
            <Kicker onDark>Let's Grow</Kicker>
            <h2 className="sec-title" style={{ color: "var(--gm-paper)", marginTop: 14 }}>Tell me what you're working on.</h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--fg-on-dark-2)", marginTop: 18, maxWidth: 460 }}>
              No pitch, no pressure. Send me the situation and I'll give you an honest read on whether
              I can help. If I'm not the right fit, I'll tell you that too.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              {["Honest read", "~2 day reply"].map(t => (
                <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 15, letterSpacing: ".03em", color: "var(--gm-paper)" }}>
                  <i className="ph-fill ph-check-circle" style={{ color: "var(--gm-orange)", fontSize: 18 }}></i>{t}
                </span>
              ))}
            </div>
          </div>

          <div className="card" style={{ background: "var(--gm-paper)", padding: 26, boxShadow: "var(--shadow-block-lg)" }}>
            {sent ? (
              <div style={{ textAlign: "center", padding: "30px 8px" }}>
                <div style={{ width: 60, height: 60, background: "var(--gm-orange)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 18px", border: "var(--stroke) solid var(--gm-ink)" }}>
                  <i className="ph-fill ph-check" style={{ fontSize: 32 }}></i>
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", fontSize: 28, color: "var(--gm-ink)", margin: "0 0 8px" }}>Sent it over</h3>
                <p style={{ fontSize: 15.5, color: "var(--fg-2)", margin: 0 }}>Thanks, {form.name || "friend"}. I'll get back to you with an honest read, usually within a couple of business days.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div><label style={label}>Your Name</label><input style={field} value={form.name} onChange={set("name")} placeholder="Your name" required /></div>
                  <div><label style={label}>Email</label><input style={field} type="email" value={form.email} onChange={set("email")} placeholder="you@company.com" required /></div>
                </div>
                <div style={{ marginTop: 16 }}>
                  <label style={label}>What best describes you?</label>
                  <select style={field} value={form.who} onChange={set("who")}>
                    <option>Small or local business</option>
                    <option>Startup or early-stage</option>
                    <option>Growth-stage company</option>
                    <option>Established company</option>
                    <option>Something else</option>
                  </select>
                </div>
                <div style={{ marginTop: 16 }}>
                  <label style={label}>What are you working on?</label>
                  <textarea style={{ ...field, resize: "vertical", minHeight: 110 }} value={form.msg} onChange={set("msg")} placeholder={"A few sentences is plenty. What's the problem, what have you tried, and what would \"better\" actually look like?"} />
                </div>
                <button type="submit" className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 20 }} disabled={loading}>
                  <i className="ph-fill ph-lightning"></i>{loading ? "Sending..." : "Send it over"}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const links = [
    ["What I Do", "#services"],
    ["How I Think", "#approach"],
    ["Where I've Been", "#experience"],
  ];
  return (
    <footer style={{ background: "var(--gm-ink)", color: "var(--gm-paper)" }}>
      <div className="wrap" style={{ padding: "56px 32px 40px" }}>
        <div style={{ display: "flex", gap: 32, justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap" }}>
          <div style={{ maxWidth: 340 }}>
            <Wordmark height={38} light />
            <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--fg-on-dark-2)", marginTop: 16 }}>
              I help companies grow on purpose, not by accident. Senior marketing leadership for
              the moments that matter most.
            </p>
          </div>
          <div style={{ display: "flex", gap: 12, flexDirection: "column" }}>
            {links.map(([label, href]) => (
              <a key={href} href={href} style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 16, letterSpacing: ".03em", color: "var(--gm-paper)", textDecoration: "none" }}>
                <i className="ph-fill ph-asterisk" style={{ color: "var(--gm-orange)", fontSize: 13 }}></i>{label}
              </a>
            ))}
          </div>
          <div style={{ display: "flex", gap: 12 }}>
            <a href="https://www.linkedin.com/in/bryceliggins" target="_blank" rel="noopener noreferrer" style={{ width: 44, height: 44, border: "2px solid rgba(242,239,232,.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gm-paper)" }}>
              <i className="ph-fill ph-linkedin-logo" style={{ fontSize: 20 }}></i>
            </a>
            <a href="mailto:bryceliggins@gmail.com" style={{ width: 44, height: 44, border: "2px solid rgba(242,239,232,.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gm-paper)" }}>
              <i className="ph-fill ph-envelope-simple" style={{ fontSize: 20 }}></i>
            </a>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 44, paddingTop: 20, borderTop: "1px solid rgba(242,239,232,.18)", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontSize: 13, color: "var(--fg-on-dark-2)" }}>© 2026 Growth Mind. Built on purpose.</span>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 14, letterSpacing: ".1em", color: "var(--gm-orange)" }}>Grow On Purpose.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });