// zichat.jsx — Zic Hat sub-page

function ZicHat() {
  return (
    <Page>
      <section className="detail" data-screen-label="Zic Hat · 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 01</span>
          <span style={{ color: 'var(--rule)' }}>/</span>
          <span>Mobile · Social</span>
          <span style={{ color: 'var(--rule)' }}>/</span>
          <span>2024 —</span>
        </p>

        <h1 className="detail-title reveal">
          Zic Hat<em>.</em>
        </h1>
        <p className="detail-tag reveal">
          A chatroom you can walk into — pinned to a pair of coordinates, open to anyone standing inside its radius. One planet, unlimited rooms, no followers required.
        </p>

        <div className="reveal" style={{ margin: '12px 0 32px' }}>
          <div style={{
            position: 'relative',
            width: '100%',
            aspectRatio: '16 / 10',
            border: '1px solid var(--rule)',
            borderRadius: '10px',
            overflow: 'hidden',
            background: 'var(--panel, #faf7f2)',
          }}>
            <iframe
              src="Honeycomb Chat.html"
              title="Honeycomb Chat — live preview"
              style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
            />
          </div>
          <div style={{
            marginTop: '8px',
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: '11px',
            color: 'var(--muted)',
            letterSpacing: '0.06em',
            textTransform: 'uppercase',
          }}>
            Live · Honeycomb chat prototype
          </div>
        </div>

        <dl className="detail-facts reveal">
          <div className="fact"><dt>Coverage</dt><dd>Worldwide</dd></div>
          <div className="fact"><dt>Join rule</dt><dd>Be in the circle</dd></div>
          <div className="fact"><dt>Rooms</dt><dd>User-pinned, any spot</dd></div>
          <div className="fact"><dt>Platform</dt><dd>iOS · Android (beta)</dd></div>
        </dl>

        <div className="detail-body reveal">
          <h3>Concept</h3>
          <div className="body-copy">
            <p>
              Most chat apps connect people through a contact list. Zic Hat connects them through a <em>place</em>. You pin a chatroom to a point on the map — your café, a climbing crag, the queue outside a concert — and anyone whose GPS falls inside its radius can step in. Walk away, and you quietly leave.
            </p>
            <p>
              It was built out of a small frustration: group chats always need to be created, named, invited. A location doesn&rsquo;t need any of that. It is already a group.
            </p>
          </div>
        </div>

        <div className="shot-wrap reveal">
          <div className="shot" style={{ gridColumn: 'span 4' }}>
            <span className="shot-label">01 · Map</span>
            <div className="shot-inner">
              [ screenshot ]<br/>
              world map w/ pinned<br/>
              chatroom bubbles
            </div>
            <div className="shot-caption">Rooms visible inside walking distance.</div>
          </div>
          <div className="shot" style={{ gridColumn: 'span 4' }}>
            <span className="shot-label">02 · Room</span>
            <div className="shot-inner">
              [ screenshot ]<br/>
              room feed, radius<br/>
              indicator in header
            </div>
            <div className="shot-caption">Step outside the circle → auto-leave.</div>
          </div>
          <div className="shot" style={{ gridColumn: 'span 4' }}>
            <span className="shot-label">03 · Create</span>
            <div className="shot-inner">
              [ screenshot ]<br/>
              drop-pin flow,<br/>
              radius slider 30m–5km
            </div>
            <div className="shot-caption">Pin anywhere on Earth in two taps.</div>
          </div>
        </div>

        <div className="detail-body reveal">
          <h3>How it works</h3>
          <div className="body-copy">
            <p>
              Each room stores a center and a radius. Locations are indexed with a geohash prefix so a phone can query &ldquo;rooms near me&rdquo; without streaming the whole planet. Membership is computed on the device — your GPS decides whether you&rsquo;re in or out; the server trusts the math, not the claim.
            </p>
            <p>
              Messages live only inside their room&rsquo;s circle. Leaving the circle closes the socket; re-entering opens it again with the recent history hydrated from the last ten minutes. There is no follow, no friend list, and on purpose, no DM.
            </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>Pin &amp; radius</h4>
              <p>Drop a point anywhere on the map, pick a radius from 30&nbsp;m to 5&nbsp;km. The room exists from that instant.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">02</span>
            <div>
              <h4>GPS-gated membership</h4>
              <p>If you&rsquo;re inside, you&rsquo;re in. Walk out and the app quietly signs you out of the conversation.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">03</span>
            <div>
              <h4>Worldwide, not regional</h4>
              <p>No country gating, no server per city. One map, billions of possible pins.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">04</span>
            <div>
              <h4>Ephemeral by default</h4>
              <p>Messages fade out over time. The point of a place-chat isn&rsquo;t archive — it&rsquo;s presence.</p>
            </div>
          </li>
        </ul>

        <div className="detail-body reveal">
          <h3>Status</h3>
          <div className="body-copy">
            <p>
              Closed beta. Currently dialing down battery usage while the GPS is listening in the background, and tuning abuse-prevention — nothing breaks a good place-chat faster than a bot pin.
            </p>
          </div>
        </div>

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

window.ZicHat = ZicHat;