// Contact page
function PageContact() {
  return (
    <div className="page" data-page="contact" data-screen-label="05 Contact">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--ink-dimmer)', letterSpacing: '.18em', textTransform: 'uppercase' }}>⦿ 05 · open channel</div>
          <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 40, fontWeight: 800, letterSpacing: '-.03em', margin: '8px 0 0', color: 'var(--ink)' }}>
            Have a <span style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', color: 'var(--accent-amber)', fontWeight: 400 }}>problem</span> worth building for?
          </h2>
        </div>
        <div style={{ color: 'var(--ink-dim)', fontSize: 11 }}>email is the fastest channel</div>
      </div>

      <div className="contact-layout">
        <div className="panel contact-main">
          <div>
            <div style={{ color: 'var(--ink-dim)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>▸ primary channel</div>
            <h3 className="contact-big">
              Let's <em>build</em><br/>
              <span className="stroke">something</span> that matters.
            </h3>
            <a className="contact-mail" href="mailto:manoj.kesavulu@gmail.com" data-hover-label="▸ send mail">
              manoj.kesavulu@gmail.com
              <span className="arrow">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M5 17L17 5M17 5H7M17 5V15" stroke="currentColor" strokeWidth="1.4"/></svg>
              </span>
            </a>

            <div className="contact-socials">
              <a href="https://www.linkedin.com/in/dr-manoj-kesavulu/" target="_blank" rel="noopener" data-hover-label="▸ linkedin">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M3.6 14V5.5H1V14h2.6zM2.3 4.4c.9 0 1.5-.6 1.5-1.4S3.2 1.6 2.3 1.6s-1.5.6-1.5 1.4.6 1.4 1.5 1.4zM14 14h-.1V9.2c0-2.3-.5-4-3.2-4-1.3 0-2.2.7-2.6 1.4h-.04V5.5H5.6V14h2.5V9.8c0-1.1.2-2.2 1.6-2.2 1.4 0 1.4 1.3 1.4 2.3V14H14z"/></svg>
                /in/dr-manoj-kesavulu
              </a>
              <a href="https://github.com/chintu0019" target="_blank" rel="noopener" data-hover-label="▸ github">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.6 0 0 3.6 0 8c0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4v-1.4c-2.2.5-2.7-1.1-2.7-1.1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.2 1.9.9 2.4.7.1-.5.3-.9.5-1.1-1.8-.2-3.7-.9-3.7-4 0-.9.3-1.6.8-2.2-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.2 2-.2s1.4.1 2 .2c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.2 0 3.1-1.9 3.8-3.7 4 .3.2.5.7.5 1.5v2.2c0 .2.1.5.5.4 3.2-1.1 5.5-4.1 5.5-7.6 0-4.4-3.6-8-8-8z"/></svg>
                github.com/chintu0019
              </a>
              <a href="https://scholar.google.com/citations?user=KQOFBPYAAAAJ" target="_blank" rel="noopener" data-hover-label="▸ scholar">
                ⓖ Google Scholar · 85+ cit.
              </a>
              <a href="https://orcid.org/0000-0001-5505-9593" target="_blank" rel="noopener" data-hover-label="▸ orcid">
                ⓞ ORCID · 0000-0001-5505-9593
              </a>
            </div>
          </div>

          <div className="contact-foot">
            <div>© 2026 · Dr. Manoj Kesavulu · Dublin, Ireland</div>
            <div><span style={{ color: 'var(--accent)' }}>● still shipping</span></div>
          </div>
        </div>

        <div className="contact-side">
          <div className="panel">
            <div className="panel-head"><span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="ph-dot" /><span className="ph-title">OPEN TO</span></span></div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span style={{ color: 'var(--accent)' }}>✓</span> <span style={{ color: 'var(--ink)' }}>Fractional CTO / technical advisory</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span style={{ color: 'var(--accent)' }}>✓</span> <span style={{ color: 'var(--ink)' }}>AI system design for regulated domains</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span style={{ color: 'var(--accent)' }}>✓</span> <span style={{ color: 'var(--ink)' }}>Angel / advisor conversations</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span style={{ color: 'var(--accent)' }}>✓</span> <span style={{ color: 'var(--ink)' }}>High-signal intros (no cold sales)</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span style={{ color: 'var(--accent-alt)' }}>✕</span> <span style={{ color: 'var(--ink-dim)' }}>Recruiter outreach for FTE roles</span></div>
            </div>
          </div>

          <div className="panel">
            <div className="panel-head"><span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="ph-dot" /><span className="ph-title">IDENTIFIERS</span></span></div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>ORCID</span><span style={{color:'var(--accent)'}}>0000-0001-5505-9593</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>Scholar</span><span style={{color:'var(--ink)'}}>KQOFBPYAAAAJ</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>LinkedIn</span><span style={{color:'var(--ink)'}}>/in/dr-manoj-kesavulu</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>GitHub</span><span style={{color:'var(--ink)'}}>@chintu0019</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'var(--ink-dim)'}}>Citations</span><span style={{color:'var(--accent)'}}>85+ · Apr 2026</span></div>
            </div>
          </div>

          <div className="panel">
            <div className="panel-head"><span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="ph-dot" /><span className="ph-title">LOCAL</span></span></div>
            <div className="panel-body" style={{ fontSize: 12, color: 'var(--ink-dim)', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>DUB · Dublin</span><span style={{ color: 'var(--accent)' }}>53.33°N 6.25°W</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Time zone</span><span style={{ color: 'var(--ink)' }}>Europe/Dublin · GMT</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Currently</span><span style={{ color: 'var(--accent)' }}>◐ building · open to message</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { PageContact });