/* GEЯE — Contact + Footer */

function Contact() {
  const [sent, setSent] = useState(false);
  const [email, setEmail] = useState("");
  const submit = (e) => {
    e.preventDefault();
    if (email.trim()) setSent(true);
  };
  return (
    <section className="section" id="contact">
      <div className="wrap">
        <Reveal>
          <div className="contact-card">
            <Label center>Get in touch</Label>
            <h2 className="h2" style={{ maxWidth: 640 }}>Building something? Let's talk.</h2>
            <p className="lead" style={{ maxWidth: 520 }}>Partners, builders and contributors welcome. Drop your email and we'll reach out.</p>
            {sent ? (
              <div className="contact-ok"><Icon name="check-circle" /> Thanks — we'll be in touch soon.</div>
            ) : (
              <form className="contact-form" onSubmit={submit}>
                <input
                  type="email"
                  placeholder="you@buildwith.gere"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
                <Button variant="primary" iconRight="arrow-right" onClick={submit}>Send</Button>
              </form>
            )}
            <span className="contact-note">No spam. No hype. Just building.</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ["Ecosystem", [["About", "#about"], ["Building", "#building"], ["Roadmap", "#roadmap"], ["Principles", "#principles"]]],
    ["Connect", [["Contact", "#contact"], ["Community", "#contact"], ["Partners", "#contact"]]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-inner">
          <div>
            <Brand />
            <div className="footer-tag">No hype. <b>Just building.</b></div>
          </div>
          <div className="footer-cols">
            {cols.map(([title, links]) => (
              <div className="footer-col" key={title}>
                <span className="ct">{title}</span>
                {links.map(([t, h]) => <a key={t + h} href={h}>{t}</a>)}
              </div>
            ))}
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 GEЯE Solutions. A Web3 technology ecosystem.</span>
          <div className="socials">
            <a href="#contact" aria-label="X"><Icon name="at-sign" /></a>
            <a href="#contact" aria-label="Community"><Icon name="message-circle" /></a>
            <a href="#contact" aria-label="Web"><Icon name="globe" /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

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