// scene-contact.jsx — Section 5 + footer

function Contact() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [state, setState] = useState("idle"); // idle | sending | sent
  const onChange = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const onSubmit = (e) => {
    e.preventDefault();
    if (state === "sending") return;
    setState("sending");
    setTimeout(() => setState("sent"), 1100);
  };

  return (
    <section id="contact" className="scene">
      <div className="wrap-narrow" style={{ textAlign: "center" }}>
        <Reveal variant="up">
          <span className="eyebrow" style={{ display: "block", marginBottom: 16 }}>// Contact</span>
        </Reveal>
        <Reveal variant="up" delay={120}>
          <h2 className="h1" style={{ marginBottom: 18 }}>Let's build something.</h2>
        </Reveal>
        <Reveal variant="up" delay={240}>
          <p className="muted" style={{ fontSize: "1.05rem", maxWidth: 540, margin: "0 auto" }}>
            Open to full-time roles, freelance, and interesting projects.
            Drop me a line — I reply within a day.
          </p>
        </Reveal>

        <Reveal variant="zoom" delay={300}>
          {state === "sent" ? (
            <div className="contact-form">
              <div className="success-state">
                <div className="check"><ICheck size={26}/></div>
                <h3>Message sent.</h3>
                <p>Thanks for writing — I'll be in touch shortly.</p>
              </div>
            </div>
          ) : (
            <form className="contact-form" onSubmit={onSubmit}>
              <div className="row">
                <div className="field">
                  <label htmlFor="name">Name</label>
                  <input id="name" required value={form.name} onChange={onChange("name")}
                         placeholder="Your name"/>
                </div>
                <div className="field">
                  <label htmlFor="email">Email</label>
                  <input id="email" type="email" required value={form.email} onChange={onChange("email")}
                         placeholder="you@domain.com"/>
                </div>
              </div>
              <div className="field">
                <label htmlFor="message">Message</label>
                <textarea id="message" required value={form.message} onChange={onChange("message")}
                          placeholder="Tell me about the project, timeline, anything relevant…"/>
              </div>
              <button type="submit" className="btn btn-primary" disabled={state === "sending"}>
                {state === "sending"
                  ? <><span className="spinner"/> Sending…</>
                  : <>Send message <ISend size={15}/></>}
              </button>
            </form>
          )}
        </Reveal>

        <Reveal variant="up" delay={400} className="socials" as="div">
          <a className="social" href="https://github.com/yashxsomani" target="_blank" rel="noreferrer"><IGithub size={14}/> GitHub</a>
          <a className="social" href="https://linkedin.com/in/yash-somani-bb387325b/" target="_blank" rel="noreferrer"><ILinkedin size={14}/> LinkedIn</a>
          <a className="social" href="tel:+918239806141"><ITwitter size={14}/> +91 82398 06141</a>
          <a className="social" href="mailto:yashsomani395@gmail.com"><IMail size={14}/> yashsomani395@gmail.com</a>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <span>Built with React + scroll-driven motion</span>
        <span className="sep">·</span>
        <span>© 2026 Yash Somani. All rights reserved.</span>
      </div>
    </footer>
  );
}

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