// About the lab — bio with portrait placeholder and meta sheet.

const AboutLab = () => {
  return (
    <section id="about" className="section">
      <div className="container">
        <div className="section__head">
          <Eyebrow>§ About the lab</Eyebrow>
          <div>
            <h2>One person, <em>at a desk,</em> with a kettle.</h2>
          </div>
        </div>

        <div className="about-grid">
          {/* Portrait placeholder — drawn as a quiet hairline still life */}
          <div className="about-portrait">
            <PortraitPlaceholder />
          </div>

          {/* Bio */}
          <div>
            <div className="about-body">
              <p>
                I trained as an engineer and spent fifteen years in product organizations of
                varying size and weather. Along the way I built a personal habit of treating
                everyday infrastructure — kitchens, calendars, agents, routines — as a discipline
                worth studying.
              </p>
              <p>
                Commonwork Lab is where that habit gets a public surface. Each project starts
                with a question I have about my own life and ends with a built thing, a record
                of what worked, and an honest note about what didn't.
              </p>
              <p>
                The site is built by hand, hosted simply, and edited like a long-running essay.
                It will get slower and stranger over time. That's the intent.
              </p>
            </div>

            <dl className="about-meta">
              <dt>Based</dt><dd>A south-facing room with a wooden desk.</dd>
              <dt>Background</dt><dd>Engineering, product, household design.</dd>
              <dt>Tools</dt><dd>Plain text, hairline rules, IBM Plex, a kettle.</dd>
              <dt>Cadence</dt><dd>One field note a month. One project a quarter.</dd>
              <dt>Open to</dt><dd>Correspondence on systems for life and work.</dd>
            </dl>

            <div style={{ marginTop: 28, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button kind="default" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>
                Write to the lab
                <Icon name="arrow-right" size={14} />
              </Button>
              <Button kind="ghost">Read the long bio</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Quiet still-life-style portrait stand-in: a desk in hairlines.
const PortraitPlaceholder = () => (
  <svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <rect width="400" height="500" fill="var(--paper-2)"/>
    {/* faint ledger lines */}
    {Array.from({ length: 18 }).map((_, i) => (
      <line key={i} x1="0" y1={28 + i * 26} x2="400" y2={28 + i * 26}
            stroke="var(--rule)" strokeWidth="0.5" opacity="0.5"/>
    ))}
    {/* desk surface */}
    <line x1="0" y1="380" x2="400" y2="380" stroke="var(--ink-3)" strokeWidth="1"/>
    {/* window frame */}
    <rect x="220" y="60" width="140" height="180" fill="none" stroke="var(--ink-3)" strokeWidth="1"/>
    <line x1="290" y1="60" x2="290" y2="240" stroke="var(--ink-3)" strokeWidth="1"/>
    <line x1="220" y1="150" x2="360" y2="150" stroke="var(--ink-3)" strokeWidth="1"/>
    {/* sun */}
    <circle cx="258" cy="118" r="14" fill="none" stroke="var(--accent)" strokeWidth="1"/>
    {/* desk objects: notebook */}
    <rect x="60" y="330" width="120" height="50" fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
    <line x1="120" y1="330" x2="120" y2="380" stroke="var(--ink)" strokeWidth="1.2"/>
    <line x1="72" y1="346" x2="108" y2="346" stroke="var(--ink-3)" strokeWidth="0.8"/>
    <line x1="72" y1="356" x2="108" y2="356" stroke="var(--ink-3)" strokeWidth="0.8"/>
    <line x1="72" y1="366" x2="100" y2="366" stroke="var(--ink-3)" strokeWidth="0.8"/>
    {/* kettle */}
    <path d="M220 350 Q220 320 250 320 L290 320 Q320 320 320 350 L320 380 L220 380 Z"
          fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
    <path d="M320 340 Q345 345 345 360" fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
    <line x1="250" y1="320" x2="290" y2="320" stroke="var(--ink)" strokeWidth="1.2"/>
    <path d="M260 312 Q270 300 280 312" fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
    {/* pencil */}
    <line x1="180" y1="376" x2="240" y2="364" stroke="var(--ink)" strokeWidth="1.5"/>
    <line x1="240" y1="364" x2="246" y2="362" stroke="var(--accent)" strokeWidth="2"/>
  </svg>
);

window.AboutLab = AboutLab;
