// home.jsx — main landing page

function Home() {
  return (
    <Page>
      <section className="hero" data-screen-label="Home · Hero">
        <p className="hero-kicker reveal">
          <span className="bullet" />
          <span>Firmware · Electronics · Making</span>
          <span className="sep">/</span>
          <span>Taipei, TW</span>
          <span className="sep">/</span>
          <span>Est. 2023</span>
        </p>

        <div className="hero-grid">
          <h1 className="reveal">
            Walush<span className="amp">—</span><br />
            writes <em>firmware</em>,<br />
            solders <em>boards</em>,<br />
            builds <em>things</em>.
          </h1>

          <dl className="hero-meta reveal">
            <dt>Role</dt>
            <dd>Firmware &amp; Hardware engineer</dd>
            <dt>Cert.</dt>
            <dd>Digital Electronics, Class&nbsp;B (TW)</dd>
            <dt>Tools</dt>
            <dd>C, RTOS, Soldering iron, A handful of scopes</dd>
            <dt>Status</dt>
            <dd>Shipping two apps · open to chat</dd>
          </dl>
        </div>

        <div className="lede reveal">
          <p>
            <span className="drop">A quiet workbench</span> — somewhere between the oscilloscope and the router table. I write low-level code for days, then spend weekends re-jetting a carburetor, sanding a dovetail, or wiring 12&nbsp;V into a camper van. The two apps below came out of that bench; everything I make is, more or less, a small answer to <em>&ldquo;what if the phone could do this part?&rdquo;</em>
          </p>
        </div>
      </section>

      <hr className="divider" />

      <section className="section" data-screen-label="Home · About">
        <div className="section-head reveal">
          <div className="section-num">01 <span style={{ color: 'var(--rule)' }}>/</span> 03</div>
          <h2 className="section-title">About, <em>briefly</em>.</h2>
        </div>

        <div className="about-grid">
          <div className="about-text reveal">
            <p>
              I&rsquo;m a firmware &amp; hardware engineer based in Taiwan. Most of my day job lives inside the 32&#8209;bit microcontroller — bring-up, drivers, protocol work, the occasional bit-banged sensor. I hold the national Class&nbsp;B certificate in digital electronics and have been called, on at least one site, an <em>electric-soldering-iron specialist</em>. I will take that.
            </p>
            <p>
              Outside the bench I modify motorcycles, convert vans into campers, and turn poplar into furniture that is mostly square. These hobbies feed each other: a motorcycle asks for a better throttle, a van asks for a smarter battery, and a workshop asks for another shelf. Somewhere in the middle, software happens.
            </p>
          </div>

          <aside className="about-side reveal">
            <dl className="spec-list">
              <dt>Born / Based</dt>
              <dd>Taiwan</dd>
              <dt>Day job</dt>
              <dd>Firmware engineer</dd>
              <dt>Also</dt>
              <dd>Moto wrench, van-life tinkerer, amateur joiner</dd>
              <dt>Bench</dt>
              <dd>Weller WX, Hakko FR-301, Rigol DS1054Z, a Makita and a lot of clamps</dd>
              <dt>Making</dt>
              <dd>Apps for phones that talk to things with PCBs</dd>
            </dl>
          </aside>
        </div>
      </section>

      <hr className="divider" />

      <section className="section" data-screen-label="Home · Work">
        <div className="section-head reveal">
          <div className="section-num">02 <span style={{ color: 'var(--rule)' }}>/</span> 03</div>
          <h2 className="section-title">Selected <em>work</em>.</h2>
        </div>

        <div className="work-list">
          <a className="work-row reveal" onClick={(e) => { e.preventDefault(); navigate('/zic-hat'); }} href="#/zic-hat">
            <div className="work-index">01</div>
            <h3 className="work-title">Zic Hat<em>,</em> <em>a chatroom you can walk into.</em></h3>
            <p className="work-desc">Drop-in, GPS-bound chatrooms anywhere on Earth. Your radius is your room; step out and you leave.</p>
            <div className="work-meta">
              <span><span className="k">Kind </span><span className="v">Mobile app · social</span></span>
              <span><span className="k">Stack </span><span className="v">Flutter · Firebase · Geohash</span></span>
              <span><span className="k">Status </span><span className="v">Beta</span></span>
            </div>
            <div className="work-cta">
              <span>Read&nbsp;more</span>
              <span className="work-arrow">→</span>
            </div>
          </a>

          <a className="work-row reveal" onClick={(e) => { e.preventDefault(); navigate('/motion'); }} href="#/motion">
            <div className="work-index">02</div>
            <h3 className="work-title">Motion PController<em>,</em> <em>your phone is the throttle.</em></h3>
            <p className="work-desc">A desktop–phone bridge that turns accelerometer &amp; gyroscope data into a bike-throttle input — built for MotoGP&nbsp;Ride.</p>
            <div className="work-meta">
              <span><span className="k">Kind </span><span className="v">iOS + PC server</span></span>
              <span><span className="k">Stack </span><span className="v">C++ · UDP · CoreMotion</span></span>
              <span><span className="k">Status </span><span className="v">v0.3 · lab</span></span>
            </div>
            <div className="work-cta">
              <span>Read&nbsp;more</span>
              <span className="work-arrow">→</span>
            </div>
          </a>
        </div>
      </section>

      <hr className="divider" />

      <section className="section" data-screen-label="Home · Also">
        <div className="section-head reveal">
          <div className="section-num">03 <span style={{ color: 'var(--rule)' }}>/</span> 03</div>
          <h2 className="section-title">Also <em>found</em> on the bench.</h2>
        </div>

        <div className="about-grid">
          <div className="about-text reveal" style={{ gridColumn: '3 / span 7' }}>
            <p>
              Projects that haven&rsquo;t become products yet: a daylight-compensating headlight for a 125&nbsp;cc naked bike, a lithium swap with BMS for a 15&nbsp;year-old campervan, and — on the loudest end — a CNC&#8209;cut oak sideboard that my partner insists is not <em>yet</em> square. All of it ends up feeding the apps one way or another.
            </p>
          </div>
        </div>
      </section>

      <footer className="foot" data-screen-label="Home · Contact">
        <div className="shell" style={{ padding: 0 }}>
          <div className="foot-grid">
            <h2 className="foot-big reveal">
              Say <em>hi.</em><br />
              <a href="mailto:walush2023@gmail.com">walush2023<span style={{ color: 'var(--muted)' }}>@</span>gmail.com</a>
            </h2>
            <div className="foot-side reveal">
              <div style={{ color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 10, marginBottom: 10 }}>Elsewhere</div>
              <div style={{ lineHeight: 2 }}>
                <a href="https://github.com/walush2023" target="_blank" rel="noreferrer">github.com/walush2023</a><br />
                <a href="mailto:walush2023@gmail.com">walush2023@gmail.com</a>
              </div>
              <div style={{ marginTop: 28, color: 'var(--muted)' }}>
                Open to firmware / hardware / embedded-app collaboration. Please include a one-line TL;DR and a link.
              </div>
            </div>
          </div>

          <div className="foot-base">
            <span>© {new Date().getFullYear()} Walush</span>
            <span>Handwritten in HTML · set in Newsreader &amp; IBM Plex Mono</span>
            <span>↑ Back to top</span>
          </div>
        </div>
      </footer>
    </Page>
  );
}

window.Home = Home;