// Contact — ported from vivamed.com/contact/
window.ContactApp = (function(){

function ContactApp(){
  return (
    <>
      <section className="subpage-hero" style={{paddingBottom:40}}>
        <div className="subpage-hero-inner">
          <div className="subpage-eyebrow"><span className="dot"/>CONTACT</div>
          <h1 className="subpage-h1">
            Let's <em>connect.</em>
          </h1>
          <p className="subpage-lede">
            Have a question, opportunity, or idea? Whether you're an academic partner,
            biotech founder, or potential investor, we'd love to hear from you.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop:40, paddingBottom:100}}>
        <div className="section-inner">
          <div className="contact-grid">
            <div className="contact-card">
              <div className="contact-eyebrow">Scottsdale, AZ (HQ)</div>
              <address className="contact-address">
                14818 N 74th St<br/>
                Scottsdale, AZ 85260<br/>
                United States
              </address>
              <a className="contact-mail" href="mailto:info@vivamed.com">info@vivamed.com</a>
            </div>

            <div className="contact-card">
              <div className="contact-eyebrow">Global offices</div>
              <ul className="contact-offices">
                <li>Phoenix</li>
                <li>New York</li>
                <li>Basel</li>
                <li>Bogotá</li>
                <li>Riyadh</li>
              </ul>
              <p className="contact-offices-note">Five offices across three continents.</p>
            </div>
          </div>

          <div className="contact-disclaimer">
            <b>Please note:</b> VivaMed.com is for general informational purposes only
            and is not medical, legal, tax, or investment advice. Please do <b>not</b>
            submit patient-identifiable or other sensitive health information through
            this website.
          </div>
        </div>
      </section>

      <section className="section surface" style={{paddingTop:80, paddingBottom:80}}>
        <div className="section-inner" style={{textAlign:"center"}}>
          <h2 style={{fontSize:"clamp(28px, 4vw, 44px)", fontWeight:700, letterSpacing:"-.015em", lineHeight:1.1, margin:"0 auto 18px", maxWidth:820, color:"#0B1C2C"}}>
            We don't follow the industry. We outrun it.
          </h2>
          <div className="contact-edge-grid">
            <div>
              <div className="contact-edge-n">150+</div>
              <p><b>Drug assets developed or licensed.</b> We've done the hard part across discovery, development, and delivery, with 39 regulatory approvals to prove it.</p>
              <a href="/pipeline" className="contact-edge-link">Our pipeline →</a>
            </div>
            <div>
              <div className="contact-edge-n">AI</div>
              <p><b>That actually moves the needle.</b> From compound selection to regulatory documentation, our platform isn't theoretical. It's operational, accelerating real outcomes.</p>
              <a href="/platform" className="contact-edge-link">See the platform →</a>
            </div>
            <div>
              <div className="contact-edge-n">30+</div>
              <p><b>Global network, built for action.</b> 30+ partners. 13 countries. 5 offices. We collaborate across borders, time zones, and systems.</p>
              <a href="/partnerships" className="contact-edge-link">Our partnerships →</a>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter/>

      <style>{`
        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 28px;
        }
        @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
        .contact-card {
          background: #fff;
          border: 1px solid #e5ebf2;
          border-radius: 16px;
          padding: 36px 32px;
        }
        .contact-eyebrow {
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-size: 12px;
          letter-spacing: .1em;
          text-transform: uppercase;
          color: #3393F0;
          margin-bottom: 18px;
        }
        .contact-address {
          font-style: normal;
          font-size: 16px;
          line-height: 1.65;
          color: #2a3e55;
          margin: 0 0 20px;
        }
        .contact-mail {
          display: inline-block;
          font-size: 18px;
          font-weight: 600;
          color: #004AAD;
          text-decoration: none;
        }
        .contact-mail:hover { text-decoration: underline; }
        .contact-offices {
          list-style: none;
          padding: 0;
          margin: 0 0 14px;
          font-size: 17px;
          line-height: 1.85;
          color: #2a3e55;
          font-weight: 500;
        }
        .contact-offices-note {
          font-size: 13.5px;
          color: #6B8AAB;
          margin: 0;
        }
        .contact-disclaimer {
          margin-top: 40px;
          background: #fff5ed;
          border: 1px solid #f0d9be;
          border-radius: 12px;
          padding: 18px 22px;
          font-size: 14px;
          line-height: 1.6;
          color: #5a3e1f;
        }
        .contact-edge-grid {
          margin-top: 56px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 40px;
          text-align: left;
        }
        @media (max-width: 900px) { .contact-edge-grid { grid-template-columns: 1fr; } }
        .contact-edge-n {
          font-size: 48px;
          font-weight: 800;
          letter-spacing: -.02em;
          color: #004AAD;
          margin-bottom: 12px;
        }
        .contact-edge-grid p {
          font-size: 15px;
          line-height: 1.65;
          color: #4A5F77;
          margin: 0 0 14px;
        }
        .contact-edge-link {
          font-size: 14px;
          font-weight: 600;
          color: #3393F0;
          text-decoration: none;
        }
        .contact-edge-link:hover { text-decoration: underline; }
      `}</style>
    </>
  );
}

return ContactApp;
})();