/* global React, PageHead */

function About({ setRoute }) {
  return (
    <div className="page">
      <div className="shell-bleed">
        <PageHead
          eyebrow="About"
          title="Olivier Ueno"
          meta={[
            ["Discipline", "Mechanical / Industrial design"],
            ["Education", "B.Eng + Ind. Design (Hons I), RMIT 2023"],
            ["Based", "Phnom Penh, Cambodia"],
            ["Targets", "AU · SEA · East Asia (JP) · USA"],
            ["Status", "Open to roles"],
          ]}
        />

        <div className="about-grid">
          <div className="prose">
            <p>
              I am a product development engineer working across mechanical design, industrial design, and the manufacturing process that connects them. My background is a Bachelor of Mechanical Engineering and Industrial Design from RMIT, completed with First Class Honours in 2023. Since then I have worked across consultancy (TJ Consult), specialist lighting product development (Mark Douglass Design), and most recently as Design and Engineering Manager for Stratco in Cambodia, where I was recruited by the Group CEO to formalise the in-house engineering function for the Cambodia operation. In parallel, I run OUDESIGNLAB, the brand under which I designed, manufactured, and shipped AVA Light: an upward-firing, 1800K circadian-supportive light, taken end to end from concept to a sold-out first batch at A$489.
            </p>
            <p>
              I am looking for my next role in <strong>research and development, product development, or manufacturing automation</strong>, ideally with a manufacturer or product consultancy that builds physical hardware. Australia, Southeast Asia, East Asia (Japan in particular), and the United States are the geographies I am targeting. The work that interests me most is at the boundary between mechanical engineering and industrial design, where decisions about form, manufacture, and structure are not separable. I am equally comfortable detailing a part for production, sizing a structural member, designing the analog electronics behind it, or setting up the operating model a team uses to ship.
            </p>
          </div>

          <aside className="side-card">
            <span className="eyebrow">Experience</span>
            <div className="exp-list">
              <div className="exp-row">
                <span className="when">Jan to May 2026</span>
                <span className="what">Design &amp; Engineering Manager<small>Stratco Cambodia</small></span>
                <span className="where">Phnom Penh</span>
              </div>
              <div className="exp-row">
                <span className="when">2021–2025</span>
                <span className="what">Engineer / Industrial Designer (sole contractor)<small>OUDESIGNLAB</small></span>
                <span className="where">Melbourne</span>
              </div>
              <div className="exp-row">
                <span className="when">2024</span>
                <span className="what">Mechanical engineer<small>TJ Consult</small></span>
                <span className="where">Melbourne</span>
              </div>
              <div className="exp-row">
                <span className="when">2021–2022</span>
                <span className="what">Lighting industrial engineer<small>Mark Douglass Design</small></span>
                <span className="where">Kensington</span>
              </div>
              <div className="exp-row">
                <span className="when">2019–2023</span>
                <span className="what">B.Eng Mech &amp; Industrial Design<small>Hons I, RMIT</small></span>
                <span className="where">Melbourne</span>
              </div>
            </div>

            <div className="divider" style={{ marginBlock: 4 }}></div>

            <span className="eyebrow">Languages</span>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6, fontFamily: "var(--u-font-mono)", fontSize: 11 }}>
              <span style={{ padding: "4px 8px", border: "1px solid var(--u-border)", borderRadius: 2, color: "var(--u-fg-secondary)" }}>English (native)</span>
              <span style={{ padding: "4px 8px", border: "1px solid var(--u-border)", borderRadius: 2, color: "var(--u-fg-secondary)" }}>Japanese (basic)</span>
            </div>

            <a className="btn" href="https://www.linkedin.com/in/olivier-ueno/" target="_blank" rel="noopener" style={{ justifyContent: "center", marginTop: 8 }}>
              View full CV on LinkedIn <span className="arrow">↗</span>
            </a>
          </aside>
        </div>
      </div>
    </div>
  );
}

function Contact({ setRoute }) {
  return (
    <div className="page">
      <div className="shell-bleed">
        <PageHead
          eyebrow="Contact"
          title="The shortest way to reach me."
          meta={[
            ["Best route", "Email"],
            ["Response time", "Within 24h, business days"],
            ["Timezone", "ICT · UTC+7"],
            ["Languages", "EN · JP"],
            ["Form", "None, direct only"],
          ]}
        />

        <div className="contact-grid contact-grid--three">
          <a className="contact-card" href="mailto:olivierueno@gmail.com">
            <span className="label">Email</span>
            <span className="v">olivierueno@gmail.com</span>
            <span className="note">Primary channel. Recruiters, consultancies, manufacturers welcome.</span>
          </a>

          <a className="contact-card" href="https://www.linkedin.com/in/olivier-ueno/" target="_blank" rel="noopener">
            <span className="label">LinkedIn</span>
            <span className="v">/in/olivier-ueno</span>
            <span className="note">Full work history. Open to roles in AU, SEA, East Asia, and USA.</span>
          </a>

          <div className="contact-card" style={{ cursor: "default" }}>
            <span className="label">Location</span>
            <span className="v">Phnom Penh, Cambodia</span>
            <span className="note">Open to relocation. Targeting roles in Australia, Southeast Asia, East Asia (Japan in particular), and the United States.</span>
          </div>
        </div>

        <div style={{ marginTop: "var(--u-space-3xl)", padding: "var(--u-space-lg)", border: "1px solid var(--u-border)", borderRadius: "var(--u-radius-md)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "var(--u-space-md)" }}>
          <div>
            <span className="eyebrow" style={{ display: "block", marginBottom: 6 }}>Note for recruiters</span>
            <p className="fg-second" style={{ fontSize: "var(--u-text-sm)", margin: 0, maxWidth: "60ch" }}>
              I prefer a short factual intro by email: the role, the company, the geography. No formal cover letter required to start a conversation.
            </p>
          </div>
          <a className="btn primary" href="mailto:olivierueno@gmail.com?subject=Role%20enquiry">
            Start a conversation <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { About, Contact });