/* global React, Button, BracketLabel, MonoMeta, PortraitPlaceholder, Reveal, SectionHead */

const HISTORY = [
  { period: "2026 — Present", role: "UX Design Intern", italic: "Intern", org: "Funsize, Austin TX", impact: "My first real design job. Haven't started yet, which is part of why it's on my mind constantly. Funsize is a design agency in Austin. I'll be working across real briefs, inside a real team, and trying to be useful before I try to be impressive." },
  { period: "2024 — Present", role: "Freelance Designer", italic: "Designer", org: "Independent, Fort Worth", impact: "Self-initiated at first, then real clients started showing up. Identity work, small site builds, first encounters with actual briefs from actual people who have opinions. The projects that taught me what it means to design for someone else's problem, not a made-up one." },
  { period: "2022 — Present", role: "Store Manager", italic: "Manager", org: "CVS, Fort Worth TX", impact: "I've been running a CVS store since I was seventeen. It sounds unrelated and it isn't. I learned how to lead a team, how to hold things together when they're falling apart, and how to communicate with people who have different priorities than mine. That's most of design." },
];

const ARSENAL = [
  { name: "Daily", note: "Figma: design, components, everything" },
  { name: "Daily", note: "Claude Code: building and thinking" },
  { name: "Process", note: "Physical sketching, before screens" },
  { name: "Learning", note: "AI-assisted workflows · new tools" },
  { name: "Practicing", note: "Brand systems · identity · wordmarks" },
  { name: "Reading", note: "Design history · business writing · crits" },
];

function AboutPage({ navigate }) {
  return (
    <div className="about-page page-enter" data-screen-label="About">
      <section className="about-intro">
        <div className="label-stack">
          <BracketLabel>The desk</BracketLabel>
          <span className="mono-meta">Jaeden Thai · 20</span>
        </div>
        <p className="mission">
          Learning to design at the seam of <em>product and brand</em>. A few months from my first real internship, taking the practice seriously while it's still small.
        </p>
        <span className="side-stamp">Figure / 01</span>
      </section>

      <section className="about-narrative">
        <Reveal>
          <div className="portrait-frame">
            <img src="../assets/IMG_7952-topaz-denoise-sharpen.jpg" alt="Jaeden Thai" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 18%" }} />
            <div className="portrait-grain" />
            <span className="portrait-corner tl" />
            <span className="portrait-corner tr" />
            <span className="portrait-corner bl" />
            <span className="portrait-corner br" />
            <span className="portrait-label">Figure 01: J. Thai</span>
          </div>
        </Reveal>
        <div className="narrative-copy">
          <h2>Narrative</h2>
          <h3>Just <em>at the start</em></h3>
          <p>
            I'm twenty, based in Fort Worth. No design school. I graduated high school and started teaching myself, because the classroom wasn't the problem, the subject matter was. I grew up in gifted programs and spent a lot of years being bored. Then I found design, and I stopped being bored. My dad spent his whole career in marketing, so I grew up with some instinct for brand already in the room. I just didn't know what to call it yet.
          </p>
          <p>
            I'm not a drawer. I don't work with my hands in the craft sense. What I do well is understand problems, really understand them down to their parts, and then figure out what a solution needs to be before I try to make it look like anything. My process is sequential on purpose: understand first, then brainstorm, then build, then revisit. I use Figma, Claude Code, physical sketching, and whatever else gets the idea closer to right. I want to design things that <span className="accent">show so much in the tiniest of things</span>, not through volume but through precision and care.
          </p>
          <p>
            I've managed a CVS store since I was seventeen. That job taught me more about communication and staying calm under pressure than anything I've read about it. Outside of work: photography is the real hobby, cars are close to an obsession (I can work on them, not just talk about them), and I live with my dad and two dogs in Fort Worth. None of it is decorative. It all shapes how I think about things.
          </p>
        </div>
      </section>

      <section className="history">
        <div className="section-head" style={{ marginBottom: 16, padding: 0 }}>
          <h2 className="section-title">Where I've <em>been so far</em></h2>
          <span className="mono-meta">A short chronology</span>
        </div>
        <ul className="history-list">
          {HISTORY.map((h, i) => (
            <li key={i}>
              <span className="h-period">{h.period}</span>
              <div className="h-role">
                <span className="h-title">{h.role.replace(h.italic, "").trim()} <em>{h.italic}</em></span>
                <span className="h-org">{h.org}</span>
              </div>
              <p className="h-impact">{h.impact}</p>
            </li>
          ))}
        </ul>
      </section>

      <section className="arsenal">
        <div className="arsenal-copy">
          <BracketLabel style={{ marginBottom: 16, display: "inline-flex" }}>The toolkit</BracketLabel>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 28, letterSpacing: "-0.02em", color: "var(--fg-1)", textTransform: "none", marginBottom: 16 }}>
            What I <em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "1.1em" }}>reach for</em>
          </h3>
          <p>The tools I use daily, the ones I'm focused on, and the ones I'm still figuring out. Honest about the difference.</p>
        </div>
        <div className="arsenal-grid">
          {ARSENAL.map((a, i) => (
            <div key={i} className="arsenal-cell">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, color: "var(--fg-2)" }}>—</span>
                <span className="mono-meta">0{i + 1}</span>
              </div>
              <div>
                <span className="ac-name" style={{ fontFamily: "var(--font-display)", fontSize: 14, letterSpacing: 0, textTransform: "none", color: "var(--fg-1)" }}>{a.name}</span>
                <div className="mono-meta" style={{ marginTop: 6, fontSize: 10 }}>{a.note}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="about-cta">
        <div className="cta-eye" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, letterSpacing: 0, textTransform: "none", color: "var(--fg-3)" }}>Want to make something together?</div>
        <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
          <Button variant="primary" icon onClick={() => window.location.href = "mailto:hello@jaedenthai.studio"}>Say hello</Button>
          <Button variant="outline" onClick={() => navigate("case-01")}>See the work</Button>
        </div>
      </section>
    </div>
  );
}

window.AboutPage = AboutPage;