// chrome.jsx — Wordmark, Nav, Footer
// Used on the landing page. Sub-pages re-implement these in static HTML
// so they don't need React at all.

const Heart = ({ size = '0.22em' }) => (
  <svg viewBox="0 0 24 22" width={size} height={size} style={{ display: 'block' }}>
    <path
      className="heart-path"
      d="M12 21.5 L1.5 11.5 a5.5 5.5 0 0 1 7.5 -7.5 L12 5.5 L14.5 4 A5.5 5.5 0 0 1 22.5 11.5 Z"
    />
  </svg>
);

const Wordmark = ({ size = 28, hue = 'ink' }) => (
  <span
    className="lockup"
    style={{
      fontSize: size,
      color: hue === 'paper' ? 'var(--paper)' : 'var(--ink)',
    }}
  >
    plinn
    <span className="heart"><Heart/></span>
  </span>
);

const Nav = () => (
  <nav className="site-nav">
    <div className="inner">
      <a href="#top" aria-label="Plinn home">
        <Wordmark size={26}/>
      </a>
      <div className="links">
        <a href="#what">What it is</a>
        <a href="#how">How it works</a>
        <a href="#memory">Memory</a>
        <a href="investors.html">Investors</a>
        <a href="#waitlist">Waitlist</a>
      </div>
      <a className="cta" href="#download">Get TestFlight invite</a>
    </div>
  </nav>
);

const Footer = () => (
  <footer className="site-foot">
    <div>
      <Wordmark size={32}/>
      <div className="summary">
        A quiet place for the places <em>you love</em>. Made in Munich and Cape Town, by a small team.
      </div>
    </div>
    <div>
      <h3>Product</h3>
      <ul>
        <li><a href="#what">What it is</a></li>
        <li><a href="#how">How it works</a></li>
        <li><a href="#memory">How memory works</a></li>
        <li><a href="#faq">FAQ</a></li>
      </ul>
    </div>
    <div>
      <h3>Company</h3>
      <ul>
        <li><a href="investors.html">Investors</a></li>
        <li><a href="press.html">Press</a></li>
        <li><a href="jobs.html">Jobs</a></li>
        <li><a href="mailto:hello@plinn.app">hello@plinn.app</a></li>
      </ul>
    </div>
    <div>
      <h3>Quiet</h3>
      <ul>
        <li><a href="privacy.html">Privacy</a></li>
        <li><a href="privacy.html#terms">Terms</a></li>
        <li><a href="privacy.html#data">Your data</a></li>
        <li><a href="#waitlist">Newsletter</a></li>
      </ul>
    </div>
    <div className="colophon">
      <span>© 2026 Plinn · München · Cape Town</span>
      <span>v1.0 · field journal</span>
    </div>
  </footer>
);

Object.assign(window, { Wordmark, Heart, Nav, Footer });