// ui_kits/site/About.jsx — small section between work and footer.
const About = () => {
  return (
    <section className="koa-about wrap">
      <span className="t-eyebrow">→ about</span>
      <p className="about-body">
        <em>i'm koa.</em> i write css that bends, javascript that springs,
        and the occasional shader. i work somewhere between an engineer and
        a designer — wherever the interesting problems are.
      </p>
      <p className="about-body">
        the name is hawaiian. it means <em>brave, bold, fearless</em>.
        also a kind of hardwood. i'd like to think the site is a little of all four.
      </p>
      <div className="about-row">
        <a className="link arrow" href="#"><em>github</em> ↗</a>
        <a className="link arrow" href="#"><em>are.na</em> ↗</a>
        <a className="link arrow" href="#"><em>email</em> ↗</a>
        <span className="t-eyebrow">→ honolulu / remote</span>
      </div>
      <style>{`
        .koa-about { padding: var(--s-9) 0; display: flex; flex-direction: column; gap: var(--s-4); }
        .about-body { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 34px);
          line-height: 1.32; margin: 0; max-width: 28ch; }
        .about-body em { color: var(--accent); }
        .about-row { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-3); }
        .link.arrow { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg); }
        .link.arrow em { font-style: normal; color: var(--accent); }
        .link.arrow:hover em { text-decoration: underline; text-underline-offset: 4px; }
      `}</style>
    </section>
  );
};

window.About = About;