// Quantum Spaces — Get Involved (expanding link list + follow form + Photy).

function GetInvolved() {
  const [open, setOpen] = React.useState(null);
  const toggle = (id) => setOpen(open === id ? null : id);

  return (
    <section id="involved" className="final-bg">
      <div className="container">
        <div className="final-inner">
          <div>
            <span className="eyebrow">Get involved</span>
            <h2 className="final-h2">
              <span className="final-h2-line1">This is a long project.</span>
              <em>We're glad you're here early.</em>
            </h2>
          </div>
          <div className="final-right">
            <div className="final-quote">
              <p>You don't need to have an opinion to participate. Just curiosity. Whether you want to explore your own environment, contribute data, pursue certification, or simply follow the science — there's a place for you here.</p>
            </div>
            <div className="final-links">

              <div className={"final-link" + (open === "fp" ? " fl-active" : "")} onClick={() => toggle("fp")}>
                <div>
                  <div className="fl-label">Explore Friendly Photons</div>
                  <div className="fl-sub">Map EMR · Contribute readings · Join the community</div>
                </div>
                <span className="fl-arrow">→</span>
              </div>
              {open === "fp" && (
                <div className="fl-slider"><div className="fl-slider-pad">
                  <p>FriendlyPhotons is the community-powered EMR mapping app. Explore electromagnetic environments at real locations, contribute readings with your own meter, and join a growing community.</p>
                  <div style={{ display: "flex", alignItems: "center", gap: "1.25rem" }}>
                    <a className="btn-teal" href="https://friendlyphotons.ai" target="_blank" rel="noopener noreferrer">Visit FriendlyPhotons</a>
                    <img src="assets/photy.png" alt="Photy" className="photy-img" />
                  </div>
                </div></div>
              )}

              <div className={"final-link" + (open === "cert" ? " fl-active" : "")} onClick={() => toggle("cert")}>
                <div>
                  <div className="fl-label">EMR Certification Program</div>
                  <div className="fl-sub">For businesses and property owners</div>
                </div>
                <span className="fl-arrow">→</span>
              </div>
              {open === "cert" && (
                <div className="fl-slider"><div className="fl-slider-pad">
                  <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300, fontSize: "15px", color: "var(--ink-3)" }}>In progress — check back for updates.</span>
                </div></div>
              )}

              <div className={"final-link" + (open === "follow" ? " fl-active" : "")} onClick={() => toggle("follow")}>
                <div>
                  <div className="fl-label">Follow the project</div>
                  <div className="fl-sub">Updates on research, data, and what's next</div>
                </div>
                <span className="fl-arrow">→</span>
              </div>
              {open === "follow" && (
                <div className="fl-slider"><div className="fl-slider-pad">
                  <p>Get occasional updates on research, data milestones, and new features. No spam — just signal.</p>
                  <div className="fl-form-stub" onClick={(e) => e.stopPropagation()}>
                    <div className="fl-form-row">
                      <input type="text" placeholder="First name *" />
                      <input type="text" placeholder="Last name *" />
                    </div>
                    <input type="email" placeholder="Email address *" />
                    <input type="tel" placeholder="Phone (optional)" />
                    <select defaultValue="">
                      <option value="" disabled>I'm a...</option>
                      <option>Just Curious</option><option>Researcher</option>
                      <option>Policy Maker</option><option>Other</option>
                    </select>
                    <textarea placeholder="Anything you'd like us to know? (optional)"></textarea>
                    <div className="fl-consent">
                      <input type="checkbox" id="follow-consent" />
                      <label htmlFor="follow-consent">I agree to the <a href="/privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and to receive occasional email updates from The Quantum Spaces Project.</label>
                    </div>
                    <button className="btn-teal" style={{ alignSelf: "flex-start" }}>Sign up for updates</button>
                  </div>
                </div></div>
              )}

            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GetInvolved });