// ============================================================
// ABOUT — no portrait, no numbers, no repetitive headers
// ============================================================

function AboutScreen({ go }) {
  return (
    <div className="screen-enter" data-screen-label="About">
      {/* intro */}
      <section className="section">
        <div className="container">
          <Reveal>
            <span className="eyebrow">About</span>
          </Reveal>
          <Reveal delay={40}>
            <div className="about-text">
              <p className="big">I help organizations make better product decisions in complex environments, and build the systems that keep those decisions good after I leave.</p>
              <p>Six-plus years inside enterprise healthcare at Optum taught me that the hardest problems are rarely technical. They live in the space between people, workflows, data, and now AI, where the real question is not what to build, but how a system of humans and machines should decide together.</p>
              <p>I am not a designer who happens to think about strategy. I am someone who thinks in systems and uses design as the instrument. The job is rarely more features. It is more clarity.</p>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div className="energise">
              {ENERGISES.map((e, i) => <span className="chip" key={i}>{e}</span>)}
            </div>
          </Reveal>
        </div>
      </section>

      <div className="container"><hr className="rule" /></div>

      {/* philosophy (brief) */}
      <section className="section" style={{ paddingBottom: 'var(--space-7)' }}>
        <div className="container">
          <SectionIntro
            eyebrow="Philosophy"
            statement="In systems, not screens."
            sub="I look underneath the interface for the model every surface is negotiating with: the decisions, the states, the hand-offs. Make that legible, and the design tends to follow honestly." />
        </div>
      </section>

      {/* values */}
      <section className="section band">
        <div className="container">
          <Reveal className="section-head"><h2>What I value</h2><span className="eyebrow">Principles</span></Reveal>
          <div className="values">
            {VALUES.map((v, i) => (
              <Reveal key={i} className="value" delay={i * 40}>
                <div>
                  <h4>{v.title}</h4>
                  <p>{v.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* what energises + CTA */}
      <section className="section">
        <div className="container">
          <SectionIntro
            eyebrow="What energises me"
            statement="Intelligent, well-intentioned teams that are stuck."
            sub="The work I want is rarely a question of effort. It is the absence of a shared way to decide: a complex platform, an AI workflow no one fully trusts, a team talking past itself. I bring structure to that, quietly, and then hand it back.">
            <div style={{ marginTop: 'var(--space-6)', display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" onClick={() => go('work')}>See how that looks in practice</Button>
              <a className="btn btn-ghost" href={`mailto:${PROFILE.email}`}>Start a conversation <Icon name="arrow-up-right" size={16} /></a>
            </div>
          </SectionIntro>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutScreen });