// Contact section — a single inverse panel.

function Contact() {
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4200);
  };

  return (
    <section className="vh-section" id="contact">
      <div className="vh-contact-panel">
        <div className="vh-contact-left">
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>Contact</div>
          <h2 style={{ color: "var(--vh-ink-25)" }}>
            Bringing AI <span style={{ background: "var(--gradient-ai)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>closer to families.</span>
          </h2>
          <p style={{ color: "rgba(255,255,255,0.7)", maxWidth: 460 }}>
            Building something complementary? Researching family AI? Just want early access? Drop us a line.
            We read every message.
          </p>

          <div className="vh-contact-meta">
            <div className="vh-contact-meta-row">
              <Icon name="mail" size={18} color="var(--vh-orange-500)" />
              <a href="mailto:sales@valuehuman.ai" className="vh-contact-meta-link">sales@valuehuman.ai</a>
            </div>
            <div className="vh-contact-meta-row">
              <Icon name="mail" size={18} color="var(--vh-magenta-500)" />
              <a href="mailto:admin@valuehuman.ai" className="vh-contact-meta-link">admin@valuehuman.ai</a>
            </div>
            <div className="vh-contact-meta-row">
              <Icon name="send" size={18} color="var(--vh-blue-300)" />
              <span>@profamily_ai_bot</span>
            </div>
            <div className="vh-contact-meta-row">
              <Icon name="map-pin" size={18} color="var(--vh-magenta-500)" />
              <span>Remote-first · NA &amp; APAC</span>
            </div>
          </div>
        </div>

        <form className="vh-contact-form" onSubmit={submit}>
          <label className="vh-field">
            <span>Your name</span>
            <input type="text" placeholder="Aarti Mehta" required />
          </label>
          <label className="vh-field">
            <span>Email</span>
            <input type="email" placeholder="you@family.com" required />
          </label>
          <label className="vh-field">
            <span>What's on your mind?</span>
            <textarea rows="3" placeholder="Tell us a little about your family or your work…"></textarea>
          </label>
          <button type="submit" className="btn btn-brand btn-lg" style={{ width: "100%", justifyContent: "center" }}>
            {sent ? "Got it — we'll be in touch" : "Send message"}
            {!sent && <Icon name="arrow-right" size={16} color="#fff" />}
          </button>
        </form>
      </div>
    </section>
  );
}

window.Contact = Contact;