/* global React, ImagePlaceholder, SectionTitle, ProjectIndex */
const { useState: useStateH, useEffect: useEffectH, Fragment: FragmentH } = React;

/* ============================================================
   HOME. three direction variants share a project index.
   The hero / framing changes per direction.
   ============================================================ */

function HomeA({ setRoute, thumbStyle }) {
  return (
    <div className="page home-a">
      <div className="shell-bleed">
        <section className="hero">
          <div>
            <span className="eyebrow" style={{ display: "block", marginBottom: 20 }}>
              Portfolio · 2026 · Phnom Penh → Open
            </span>
            <h1>
              <span className="name">Olivier</span>
              <span className="surname">Ueno.</span>
            </h1>
            <p className="position">
              <span className="accented">Mechanical and design engineer</span> building physical products from concept to manufacture. Formalised the Engineering & Design Department at Stratco Cambodia. Previously shipped AVA Light end to end under my own brand. Long-running personal R&D in robotic hand mechanisms and assistive haptics.
            </p>
            <div className="cta-row">
              <button className="btn primary" onClick={() => setRoute({ page: "ava" })}>
                See featured work <span className="arrow">→</span>
              </button>
              <a className="btn" href="https://www.linkedin.com/in/olivier-ueno/" target="_blank" rel="noopener">
                LinkedIn <span className="arrow">↗</span>
              </a>
            </div>
          </div>
          <div className="right">
            <div className="now-block">
              <span className="eyebrow">Status</span>
              <div className="now-row"><span className="k">Last role</span><span className="v long">D&amp;E Manager, Stratco Cambodia</span></div>
              <div className="now-row"><span className="k">Period</span><span className="v long">Jan to May 2026</span></div>
              <div className="now-row"><span className="k">Based</span><span className="v long">Phnom Penh, Cambodia</span></div>
              <div className="now-row"><span className="k">Looking</span><span className="v long">R&amp;D / Product Dev, AU &amp; SEA</span></div>
              <div className="now-row"><span className="k">Available</span><span className="v" style={{ color: "var(--u-positive)" }}>Now</span></div>
            </div>
            <div className="now-block">
              <span className="eyebrow">Disciplines</span>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, fontFamily: "var(--u-font-mono)", fontSize: 11 }}>
                {["Mechanical design","Industrial design","DFM","FEA","Analog electronics","Thermal","Manufacturing","Test rigs"].map(t => (
                  <span key={t} style={{ padding: "4px 8px", border: "1px solid var(--u-border)", borderRadius: 2, color: "var(--u-fg-secondary)" }}>{t}</span>
                ))}
              </div>
            </div>
          </div>
        </section>

        <div id="work">
          <div className="section-head">
            <h2>Selected work</h2>
            <span className="count">03 · 2020 to 2026</span>
          </div>
          <ProjectIndex style={thumbStyle} setRoute={setRoute} />
        </div>
      </div>
    </div>
  );
}

function HomeB({ setRoute, thumbStyle }) {
  return (
    <div className="page home-b">
      <div className="shell-bleed">
        <section className="hero-frame">
          <div className="title-block">
            <div className="left">
              <span className="eyebrow">Drawing № 001 · Title block · Issue A</span>
              <h1 style={{ marginTop: 16 }}>
                Olivier Ueno
              </h1>
              <p className="position">
                Mechanical and design engineer building physical products from concept to manufacture.
              </p>
            </div>
            <div className="right">
              <dl className="spec-grid">
                <dt>Engineer</dt><dd>O. Ueno</dd>
                <dt>Based</dt><dd>Phnom Penh, KH</dd>
                <dt>Status</dt><dd style={{ color: "var(--u-positive)" }}>● Open</dd>
                <dt>Targets</dt><dd>AU / SEA / JP / USA</dd>
                <dt>Scale</dt><dd>1 : 1</dd>
                <dt>Revision</dt><dd>2026.05</dd>
              </dl>
            </div>
          </div>
          <div className="body-row">
            <div className="body">
              <span className="eyebrow" style={{ display: "block", marginBottom: 12 }}>Function / scope</span>
              <p className="intro-paragraph">
                <strong>End to end product development for physical hardware.</strong> Mechanical and industrial design, manufacturing process, FEA, analog electronics, thermal: concept through to first-article. Most recently formalised the Engineering & Design Department at Stratco Cambodia.
              </p>
              <div className="cta-row">
                <button className="btn primary" onClick={() => setRoute({ page: "ava" })}>
                  Open featured work <span className="arrow">→</span>
                </button>
                <button className="btn" onClick={() => setRoute({ page: "about" })}>About</button>
              </div>
            </div>
            <div className="meta-col">
              <span className="eyebrow">Materials</span>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, fontFamily: "var(--u-font-mono)", fontSize: 11 }}>
                {["Steel","Aluminium","ABS","PCB","Casting","Sheet metal"].map(t => (
                  <span key={t} style={{ padding: "4px 8px", border: "1px solid var(--u-border)", borderRadius: 2, color: "var(--u-fg-secondary)" }}>{t}</span>
                ))}
              </div>
              <span className="eyebrow" style={{ marginTop: 8 }}>Tooling</span>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, fontFamily: "var(--u-font-mono)", fontSize: 11 }}>
                {["SolidWorks","Fusion 360","Inventor","Ansys","KiCad","SharePoint","Power Automate"].map(t => (
                  <span key={t} style={{ padding: "4px 8px", border: "1px solid var(--u-border)", borderRadius: 2, color: "var(--u-fg-secondary)" }}>{t}</span>
                ))}
              </div>
            </div>
          </div>
        </section>

        <div id="work" style={{ marginTop: "var(--u-space-3xl)" }}>
          <div className="section-head">
            <h2>Register of projects</h2>
            <span className="count">03 entries · 2020 to 2026</span>
          </div>
          <ProjectIndex style={thumbStyle} setRoute={setRoute} />
        </div>
      </div>
    </div>
  );
}

function HomeC({ setRoute, thumbStyle }) {
  return (
    <div className="page home-c">
      <div className="shell-bleed">
        <section className="hero">
          <span className="eyebrow">Phnom Penh · Open to roles in AU, SEA, Japan &amp; USA</span>
          <h1>
            Olivier <span className="surname">Ueno</span>
          </h1>

          <p className="position">
            Mechanical and design engineer building physical products from concept to manufacture.
          </p>
          <div className="cta-row">
            <button className="btn primary" onClick={() => setRoute({ page: "ava" })}>
              See featured work <span className="arrow">→</span>
            </button>
            <button className="btn" onClick={() => setRoute({ page: "about" })}>About</button>
            <a className="btn" href="mailto:olivierueno@gmail.com">Email</a>
          </div>
        </section>

        <div id="work">
          <div className="section-head">
            <h2>Selected work</h2>
            <span className="count">03 entries · 2020 to 2026</span>
          </div>
          <ProjectIndex style={thumbStyle} setRoute={setRoute} />
        </div>
      </div>
    </div>
  );
}

function Home({ setRoute, layout, thumbStyle }) {
  if (layout === "technical")   return <HomeB setRoute={setRoute} thumbStyle={thumbStyle} />;
  if (layout === "catalogue")   return <HomeC setRoute={setRoute} thumbStyle={thumbStyle} />;
  return <HomeA setRoute={setRoute} thumbStyle={thumbStyle} />;
}

Object.assign(window, { Home });