// Contact page

const ContactPage = () => (
  <>
    <Nav/>
    <section className="contact-hero opener" data-screen-label="01 Hero">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>CONTACT</div>
        <h1>Pick a channel.</h1>
        <p className="lede" style={{ marginTop: 24 }}>
          We answer email within one business day. For urgent admissions questions, the phone is faster than the form. For everything else, the channels below are the right place to start.
        </p>
      </div>
    </section>

    <section data-screen-label="02 Channels + address">
      <div className="container">
        <div className="contact-grid">
          <div>
            <div className="page-eyebrow"><span className="bar"></span>CHANNELS</div>
            <h2 className="t-h3" style={{ marginTop: 12, marginBottom: 32 }}>Email is best.</h2>
            <div className="contact-channels">
              <a className="contact-channel" href="mailto:admissions@thevr.school">
                <Icon name="user" size={24} className="icon"/>
                <div>
                  <h4>Admissions</h4>
                  <div className="val">admissions@thevr.school</div>
                </div>
                <Icon name="arrowUpRight" size={16} className="arr"/>
              </a>
              <a className="contact-channel" href="mailto:freedom@thevr.school">
                <Icon name="school" size={24} className="icon"/>
                <div>
                  <h4>School counselor &amp; transcripts</h4>
                  <div className="val">freedom@thevr.school</div>
                </div>
                <Icon name="arrowUpRight" size={16} className="arr"/>
              </a>
              <a className="contact-channel" href="contact.html#schools">
                <Icon name="layers" size={24} className="icon"/>
                <div>
                  <h4>Schools &amp; districts team</h4>
                  <div className="val">schools@thevr.school</div>
                </div>
                <Icon name="arrowUpRight" size={16} className="arr"/>
              </a>
              <a className="contact-channel" href="contact.html#partners">
                <Icon name="network" size={24} className="icon"/>
                <div>
                  <h4>Partners &amp; corporate giving</h4>
                  <div className="val">partners@thevr.school</div>
                </div>
                <Icon name="arrowUpRight" size={16} className="arr"/>
              </a>
              <a className="contact-channel" href="contact.html#press">
                <Icon name="book" size={24} className="icon"/>
                <div>
                  <h4>Press &amp; media</h4>
                  <div className="val">press@thevr.school</div>
                </div>
                <Icon name="arrowUpRight" size={16} className="arr"/>
              </a>
              <a className="contact-channel" href="tel:6504229180">
                <Icon name="phone" size={24} className="icon"/>
                <div>
                  <h4>Phone</h4>
                  <div className="val">(650) 422-9180 · Mon–Fri 9AM–6PM, Sat 10AM–4PM PT</div>
                </div>
                <Icon name="arrowUpRight" size={16} className="arr"/>
              </a>
            </div>
          </div>

          <div>
            <div className="page-eyebrow"><span className="bar"></span>HEADQUARTERS</div>
            <h2 className="t-h3" style={{ marginTop: 12, marginBottom: 32 }}>Visit Stanford.</h2>
            <div className="contact-address-card">
              <div className="contact-map">
                {/* stylized map placeholder — never a real Google snapshot */}
                <svg viewBox="0 0 320 220" style={{ width: '100%', height: '100%', display: 'block' }}>
                  <defs>
                    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="0.5"/>
                    </pattern>
                  </defs>
                  <rect width="320" height="220" fill="#0A0A0F"/>
                  <rect width="320" height="220" fill="url(#grid)"/>
                  {/* abstract road lines */}
                  <path d="M0 80 L 130 80 L 150 100 L 320 100" stroke="rgba(255,255,255,0.12)" strokeWidth="1.5" fill="none"/>
                  <path d="M0 150 L 320 150" stroke="rgba(255,255,255,0.08)" strokeWidth="1" fill="none"/>
                  <path d="M180 0 L 180 220" stroke="rgba(255,255,255,0.08)" strokeWidth="1" fill="none"/>
                  <path d="M80 0 L 80 220" stroke="rgba(255,255,255,0.06)" strokeWidth="0.8" fill="none"/>
                  <path d="M240 0 L 240 220" stroke="rgba(255,255,255,0.06)" strokeWidth="0.8" fill="none"/>
                  {/* pin */}
                  <circle cx="160" cy="110" r="30" fill="rgba(125,255,196,0.08)"/>
                  <circle cx="160" cy="110" r="12" fill="rgba(125,255,196,0.18)"/>
                  <circle cx="160" cy="110" r="5" fill="var(--accent)" style={{ filter: 'drop-shadow(0 0 8px var(--accent))' }}/>
                  <text x="160" y="148" fontSize="9" fill="#7DFFC4" textAnchor="middle" fontFamily="Geist Mono" letterSpacing="0.08em">520 LASUEN MALL</text>
                  <text x="160" y="160" fontSize="8" fill="#71717A" textAnchor="middle" fontFamily="Geist Mono" letterSpacing="0.08em">STANFORD UNIVERSITY</text>
                </svg>
              </div>
              <h4>The VR School · Headquarters</h4>
              <div className="addr">
                <b>520 Lasuen Mall #200</b><br/>
                Stanford, CA 94309<br/>
                United States<br/>
                <br/>
                <span style={{ fontFamily: 'Geist Mono', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
                  WASC · CODE 43 46070 999<br/>
                  FOUNDED 2017
                </span>
              </div>
              <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <span className="chip chip-accent">STANFORD</span>
                <span className="chip">PALO ALTO</span>
                <span className="chip">CHINA</span>
                <span className="chip">SINGAPORE</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="contact-foot-strip" data-screen-label="03 Hours strip">
      <div className="container">
        <div className="row">
          <span>HOURS · MON–FRI 9AM–6PM · SAT 10AM–4PM · SUN CLOSED · PT</span>
          <span>ADMISSIONS RESPONSES · TYPICALLY WITHIN 1 BUSINESS DAY</span>
          <span>RECORDS REQUESTS · 3–5 BUSINESS DAYS</span>
          <span>SUPERINTENDENT · DR. FREEDOM CHETENI</span>
        </div>
      </div>
    </section>

    <Footer/>
  </>
);

ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage/>);