// xcoord.jsx — XCoord sub-page

function XCoord() {
  return (
    <Page>
      <section className="detail" data-screen-label="XCoord · Detail">
        <a className="back reveal" href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
          <span className="arr">←</span> Back to index
        </a>

        <p className="detail-kicker reveal">
          <span className="dot" />
          <span>Project 03</span>
          <span style={{ color: 'var(--rule)' }}>/</span>
          <span>Mobile · Utility</span>
          <span style={{ color: 'var(--rule)' }}>/</span>
          <span>2026 —</span>
        </p>

        <h1 className="detail-title reveal">
          XCoord<em>.</em>
        </h1>
        <p className="detail-tag reveal">
          Coordinates, made simple. A tiny tool for capturing, converting, and sharing geographic points across phones, maps, and chats — without the format wars.
        </p>

        <dl className="detail-facts reveal">
          <div className="fact"><dt>Platform</dt><dd>iOS · Android</dd></div>
          <div className="fact"><dt>Formats</dt><dd>DD · DMS · MGRS · Plus Codes</dd></div>
          <div className="fact"><dt>Sharing</dt><dd>Deep links · QR · clipboard</dd></div>
          <div className="fact"><dt>Status</dt><dd>In development</dd></div>
        </dl>

        <div className="detail-body reveal">
          <h3>Concept</h3>
          <div className="body-copy">
            <p>
              Sharing a location should be one tap, not three apps. XCoord captures your spot, converts between every common notation, and lets you hand it off as a link, a code, or a pin — whatever the receiver&rsquo;s app expects.
            </p>
            <p>
              It started as a personal nuisance: pasting decimal degrees into a friend&rsquo;s map app that only liked DMS, or trying to read MGRS off a paper chart in a hurry. XCoord is the small utility that fixes that, then gets out of the way.
            </p>
          </div>
        </div>

        <ul className="feature-list reveal" style={{ listStyle: 'none', margin: 0, padding: 0 }}>
          <li className="feature">
            <span className="idx">01</span>
            <div>
              <h4>Capture &amp; convert</h4>
              <p>Drop a point on the map or paste a string in any common format — instant conversion to all the others.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">02</span>
            <div>
              <h4>One-tap share</h4>
              <p>Generate deep links that open in Google Maps, Apple Maps, OsmAnd, or whatever your friend uses.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">03</span>
            <div>
              <h4>Offline-first</h4>
              <p>Conversions happen on-device. No coordinates leave your phone unless you explicitly share them.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">04</span>
            <div>
              <h4>QR &amp; clipboard</h4>
              <p>Generate a scannable QR for a point, or paste a coordinate from any app and watch it parse.</p>
            </div>
          </li>
        </ul>

        <div className="detail-body reveal">
          <h3>Status</h3>
          <div className="body-copy">
            <p>
              In active development. Currently shaping the format-detection heuristics so a pasted line of text reliably maps to the right notation, and tightening the share-sheet handoff for non-Google map apps.
            </p>
          </div>
        </div>

        <div className="detail-body reveal">
          <h3>Compliance</h3>
          <div className="body-copy" style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
            <a href="/xcoord/privacy-policy.md" target="_blank" rel="noopener">Privacy policy →</a>
          </div>
        </div>

        <nav className="pager reveal">
          <a href="/motion" onClick={(e) => { e.preventDefault(); navigate('/motion'); }}>
            <small>Previous project</small>
            ← Motion PController
          </a>
          <a href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
            <small>Back</small>
            Index <em style={{ fontStyle: 'italic', color: 'var(--muted)' }}>↺</em>
          </a>
        </nav>
      </section>
    </Page>
  );
}

window.XCoord = XCoord;