/* global React, ImagePlaceholder, SectionTitle, PageHead, PROJECTS */
const { useState: _useStateP, useEffect: _useEffectP } = React;

/* ============================================================
   Reusable: Project nav (prev/next at bottom of each project)
   ============================================================ */
function ProjectNav({ currentId, setRoute }) {
  const idx = PROJECTS.findIndex(p => p.id === currentId);
  const prev = idx > 0 ? PROJECTS[idx - 1] : null;
  const next = idx < PROJECTS.length - 1 ? PROJECTS[idx + 1] : null;
  return (
    <div style={{ marginTop: "var(--u-space-4xl)", paddingTop: "var(--u-space-xl)", borderTop: "1px solid var(--u-border)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--u-space-md)" }}>
      <div>
        {prev && (
          <button onClick={() => setRoute({ page: prev.id })} style={{ textAlign: "left", display: "flex", flexDirection: "column", gap: 4 }}>
            <span className="eyebrow">← Previous</span>
            <span style={{ fontSize: "1.05rem", fontWeight: 500, letterSpacing: "-0.01em" }}>{prev.title}</span>
          </button>
        )}
      </div>
      <div style={{ textAlign: "right" }}>
        {next && (
          <button onClick={() => setRoute({ page: next.id })} style={{ textAlign: "right", display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-end", marginLeft: "auto" }}>
            <span className="eyebrow">Next →</span>
            <span style={{ fontSize: "1.05rem", fontWeight: 500, letterSpacing: "-0.01em" }}>{next.title}</span>
          </button>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   PROJECT 01: AVA Light
   ============================================================ */
function ProjectAva({ setRoute }) {
  return (
    <div className="page">
      <div className="shell-bleed">
        <PageHead
          eyebrow="Project 01 / OUDESIGNLAB"
          title="AVA Light"
          meta={[
            ["Role", "Designer / Engineer / Founder"],
            ["Year", "2021–2025"],
            ["Brand", "OUDESIGNLAB"],
            ["Status", "Production V03, shipped"],
            ["Price", "A$489 retail"],
            ["Built in", "Melbourne, Australia"],
          ]}
        />

        <img className="ava-hero" src="assets/ava-hero.jpg" alt="AVA Light, three-quarter product render on white" />

        <div className="proj-body">
          <div className="main">

            <div className="patr">
              <div className="patr-cell"><span className="k">Problem</span><span className="v">Built for my sister Ava, who couldn't modify her rental's ceiling lighting. Warm LEDs still suppress melatonin, candles risk fire, smart bulbs need apps.</span></div>
              <div className="patr-cell"><span className="k">Approach</span><span className="v">Use the existing white ceiling as a large diffuse reflector. Single fixed 1800K LED firing upward, fully analog dimming, passive thermal, USB-C PD.</span></div>
              <div className="patr-cell"><span className="k">Tools</span><span className="v">Fusion 360 for design, Bambu Lab 3D printers for housing iteration, overseas CNC for the aluminium heatsink, in-house rigs for electrical and thermal QA.</span></div>
              <div className="patr-cell"><span className="k">Result</span><span className="v">Sold-out first batch at A$489 retail, ~50% margin. Fully internal design, electronics, thermal, manufacture, and validation. No firmware, no recalls, no service overhead.</span></div>
            </div>

            <section>
              <SectionTitle num="1.0">Overview</SectionTitle>
              <div className="prose">
                <p>
                  AVA is named after my sister. She rented a flat with fixed ceiling lighting she could not modify, and wanted something that supported her evening wind-down without the usual trade-offs: 2700K warm bulbs still suppress melatonin, candles introduce particulates and fire risk, and smart bulbs bring app dependencies, network setup, and firmware maintenance. There was no product on the market that did one thing well: low-CCT, glare-free, install-free, no-firmware lighting.
                </p>
                <p>
                  AVA is an upward-firing light. The LED projects 1800K amber light onto the ceiling, which acts as a large diffuser and washes the room in indirect glow. There is no visible LED from any horizontal viewing angle, so the source is glare-free. The light holds a stable 1800K (warm amber) output across the full 0 to 100 percent dimming range. Most off-the-shelf warm LEDs shift colour temperature as they dim and lose CRI; AVA does not move colour temperature at all.
                </p>
                <p>
                  Designed, engineered, manufactured, and sold end to end under my own brand, OUDESIGNLAB. Hand-assembled in Melbourne. Retails at A$489.
                </p>
              </div>
            </section>

            <section>
              <SectionTitle num="2.0">Visuals</SectionTitle>
              <div className="ava-grid">
                <div className="tall"><img src="assets/ava-detail.jpg" alt="AVA Light, full three-quarter portrait with knob detail" /></div>
                <img className="wide" src="assets/ava-context.jpg" alt="AVA Light in context, lit, on a desk" />
                <img className="wide" src="assets/ava-side.jpg" alt="AVA Light at full output, ceiling-bounce glow on a wall" />
              </div>

              <img src="assets/ava-variants.jpg" alt="AVA Light colour variant studies" style={{ width: "100%", marginTop: "var(--u-space-md)", borderRadius: "var(--u-radius-md)" }} />

              <p className="fg-faint mono" style={{ fontSize: 11, marginTop: "var(--u-space-xl)", marginBottom: 10, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                In situ
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--u-space-md)" }}>
                <img src="assets/ava-insitu-ceiling.jpg" alt="Ceiling shadow patterns cast by AVA Light through rattan pendants, the ceiling-bounce effect in action" style={{ width: "100%", aspectRatio: "2/3", objectFit: "cover", borderRadius: "var(--u-radius-md)", background: "var(--u-bg-elevated)" }} />
                <img src="assets/ava-insitu-room.jpg" alt="Open-plan room lit by a single AVA Light from above, showing the spatial coverage" style={{ width: "100%", aspectRatio: "2/3", objectFit: "cover", borderRadius: "var(--u-radius-md)", background: "var(--u-bg-elevated)" }} />
                <img src="assets/ava-insitu-scene.jpg" alt="People around a table lit by AVA Light, evening atmosphere" style={{ width: "100%", aspectRatio: "2/3", objectFit: "cover", borderRadius: "var(--u-radius-md)", background: "var(--u-bg-elevated)" }} />
              </div>
            </section>

            <section>
              <SectionTitle num="3.0">Electronics &amp; control</SectionTitle>
              <div className="prose">
                <p>
                  <strong>Fully analog.</strong> A potentiometer (PTR90) with a fully CNC-machined aluminium knob sets the dimming reference for a constant-current driver (MEAN WELL LDH-25-700). Input is USB-C PD at 20 V via an INJOINIC IP2721 PD trigger, so any 30 W+ PD charger powers the unit. No microcontroller, no PWM, no firmware, no app. The output is flicker-free.
                </p>
              </div>
            </section>

            <section>
              <SectionTitle num="4.0">Optics &amp; thermal</SectionTitle>
              <div className="prose">
                <p>
                  The LED is a Luminus CTM-14 chip-on-board, 1800K, 90+ CRI, driven at 700 mA. A Ledil YASMEEN-50 secondary lens shapes the beam to a 60° ceiling wash, sized for a standard 2.4 m Australian residential ceiling.
                </p>
                <p>
                  Thermal management is entirely <strong>passive</strong>. The 6061 anodized-aluminium heatsink runs the full height of the rear face, sized through iterated benchtop testing. Custom LED mount printed in PAHT-CF (carbon-fibre-reinforced high-temperature nylon) for direct LED contact without softening. KSD9700 thermal switch as a hard 80 °C cutoff. Surface holds below 70 °C, comfortably under the cutoff.
                </p>
              </div>
              <div className="spec-block" style={{ marginTop: "var(--u-space-md)" }}>
                <div className="spec"><span className="k">Surface temp (max)</span><span className="v lg">&lt; 70 °C</span></div>
                <div className="spec"><span className="k">Thermal cutoff</span><span className="v lg">80 °C</span></div>
                <div className="spec"><span className="k">LED life to L70</span><span className="v lg">&gt; 50,000 h</span></div>
                <div className="spec"><span className="k">Service life @ 8 h/day</span><span className="v lg">22 yr</span></div>
              </div>
              <figure style={{ margin: "var(--u-space-xl) 0 0" }}>
                <img src="assets/ava-thermal-fit.jpg" alt="Scatter plot of lamp surface temperature against ambient with a linear fit, R squared 0.871, predicting roughly 80 degrees Celsius at 40 degrees ambient" style={{ width: "100%", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg)" }} />
                <figcaption className="fg-faint mono" style={{ fontSize: 11, marginTop: 8, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                  Thermal characterisation. Lamp vs ambient with linear fit (R² = 0.871) and mean ΔT = 48.1 °C ±1.8 °C over a 90 h run.
                </figcaption>
              </figure>
            </section>

            <section>
              <SectionTitle num="5.0">Stability testing</SectionTitle>
              <div className="prose">
                <p>
                  90+ hour burn-in. Power trend essentially zero (R² = 0.0001), comfortably above the L90 reference. The slight voltage drift is the constant-current driver compensating for the LED's V<sub>f</sub> falling as the junction warms; both components on-spec.
                </p>
              </div>
              <figure style={{ margin: "var(--u-space-md) 0 0" }}>
                <img src="assets/ava-burnin.jpg" alt="Four-panel burn-in test chart over 90 hours: power degradation, voltage, current, and power residuals with L90 and L70 reference lines" style={{ width: "100%", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg)" }} />
                <figcaption className="fg-faint mono" style={{ fontSize: 11, marginTop: 8, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                  Burn-in: 90 h continuous operation. Power trend ≈ 0, voltage stable, current within 1.305 to 1.310 A. L90 / L70 reference lines plotted.
                </figcaption>
              </figure>
            </section>

            <section>
              <SectionTitle num="6.0">Manufacture</SectionTitle>
              <div className="prose">
                <p>
                  The first batch was hand-assembled in Melbourne. Aluminium heatsinks are extruded; the PETG-HF outer housing is 3D-printed in-house for first-batch volumes. The product was designed for short-run assembly: every fastener is reachable with a single hex driver, every wire harness is keyed, and the bill of materials is short enough to fit on one page.
                </p>
              </div>
            </section>

            <section>
              <SectionTitle num="7.0">Bill of materials (excerpt)</SectionTitle>
              <div className="bom">
                <div className="bom-head">
                  <span>№</span><span>Item</span><span>Reference</span><span>Qty</span>
                </div>
                {[
                  ["01","LED module","Luminus CTM-14, 1800K, CRI 90+, 700 mA","1"],
                  ["02","LED driver","MEAN WELL LDH-25-700, constant-current","1"],
                  ["03","Secondary optics","Ledil YASMEEN-50, 60° beam","1"],
                  ["04","Heatsink","6061 aluminium, anodized black","1"],
                  ["05","Housing","PETG-HF thermoplastic","1"],
                  ["06","LED mount","PAHT-CF (carbon-fibre-reinforced PA), 3D-printed","1"],
                  ["07","Potentiometer","PTR90 100kΩ, integrated switch","1"],
                  ["07","Thermal switch","KSD9700, 80 °C NC","1"],
                  ["08","Power input","INJOINIC IP2721 USB-C PD trigger, 20 V","1"],
                ].map(([n, item, ref, qty]) => (
                  <div key={n} className="bom-row">
                    <span className="idx">{n}</span>
                    <span className="item">{item}<small>{ref}</small></span>
                    <span className="ref">{ref}</span>
                    <span className="qty">×{qty}</span>
                  </div>
                ))}
              </div>
            </section>

          </div>

          <aside className="side">
            <div className="now-block">
              <span className="eyebrow">Commercial outcome</span>
              <div className="now-row"><span className="k">Retail</span><span className="v">A$489</span></div>
              <div className="now-row"><span className="k">First batch</span><span className="v" style={{ color: "var(--u-positive)" }}>100% sold</span></div>
              <div className="now-row"><span className="k">Channel</span><span className="v">Direct, OUDESIGNLAB</span></div>
            </div>

            <div className="now-block">
              <span className="eyebrow">Specification</span>
              <div className="now-row"><span className="k">CCT</span><span className="v">1800 K (fixed)</span></div>
              <div className="now-row"><span className="k">CRI</span><span className="v">90+</span></div>
              <div className="now-row"><span className="k">Output</span><span className="v">240 to 1600 lm</span></div>
              <div className="now-row"><span className="k">Power</span><span className="v">3 to 20 W</span></div>
              <div className="now-row"><span className="k">Dimming</span><span className="v">0 to 100%, analog</span></div>
              <div className="now-row"><span className="k">Input</span><span className="v">USB-C PD, 20 V</span></div>
              <div className="now-row"><span className="k">Cooling</span><span className="v">Passive</span></div>
              <div className="now-row"><span className="k">Size</span><span className="v">75 × 75 × 300 mm</span></div>
              <div className="now-row"><span className="k">Mass</span><span className="v">1.66 kg</span></div>
            </div>

            <div className="now-block">
              <span className="eyebrow">My role</span>
              <p className="fg-second" style={{ fontSize: "var(--u-text-sm)", lineHeight: 1.5 }}>
                Full product ownership: industrial design, mechanical detailing, analog circuit design, thermal validation, sourcing, assembly, photography, launch.
              </p>
            </div>
          </aside>
        </div>

        <ProjectNav currentId="ava" setRoute={setRoute} />
      </div>
    </div>
  );
}

/* ============================================================
   PROJECT 02: Stratco Cambodia Engineering & Design Department
   ============================================================ */
function ProjectStratco({ setRoute }) {
  return (
    <div className="page">
      <div className="shell-bleed">
        <PageHead
          eyebrow="Project 02 / Stratco Cambodia"
          title="Building an Engineering & Design Department"
          meta={[
            ["Role", "Design & Engineering Manager"],
            ["Reporting", "GM, Stratco Cambodia"],
            ["Period", "Jan to May 2026"],
            ["Team", "2 design engineers (1 junior)"],
            ["Scope", "21-project portfolio"],
            ["Output", "5 products led to production in 4 months"],
          ]}
        />

        <img className="ava-hero" src="assets/stratco-dept-banner.jpg" alt="Stratco Cambodia Engineering and Design Department building, in-factory" />

        <div className="proj-body">
          <div className="main">

            <div className="patr">
              <div className="patr-cell"><span className="k">Problem</span><span className="v">Recruited by the Group CEO. Two engineers were working informally inside production, with no defined workflow, no documentation standard, and no live leadership visibility.</span></div>
              <div className="patr-cell"><span className="k">Approach</span><span className="v">Build the function as a documented operating model. Three-phase workflow with proportional effort weighting (Brief 10, Design 55, Sample/Prod 35), daily-refreshed SharePoint tracker as the single source of truth, embedded with production.</span></div>
              <div className="patr-cell"><span className="k">Tools</span><span className="v">SharePoint and Power Automate for live tracking. IEEE-format Report Style Guide v1.0. Aluminium-printed Workflow Standard. 90-day project cadence.</span></div>
              <div className="patr-cell"><span className="k">Result</span><span className="v">21-project portfolio under oversight, 5 to production in 4 months. Leadership had real-time portfolio status without status meetings. Departmental infrastructure remains in place.</span></div>
            </div>

            <section>
              <SectionTitle num="1.0">Brief</SectionTitle>
              <div className="prose">
                <p>
                  Stratco, a manufacturer of structural building products, had a limited engineering function in its Cambodia operation: design work happened informally within production, without a defined workflow, documentation standard, or live visibility to leadership. I was recruited by the Group CEO to formalise it: lead the team, define the workflow, and turn the project pipeline into something leadership could see.
                </p>
                <p>
                  Product imagery is withheld for commercial reasons. The artefacts shown below are anonymous engineering and QA detail. The substance of the role was the function-building.
                </p>
              </div>
            </section>

            <section>
              <SectionTitle num="2.0">By the numbers</SectionTitle>
              <div className="stat-row">
                <div className="stat"><span className="num">21</span><span className="k">Projects in portfolio</span></div>
                <div className="stat"><span className="num">05<span className="unit">to prod</span></span><span className="k">Led to production in 4 months</span></div>
                <div className="stat"><span className="num">02</span><span className="k">Engineers managed</span></div>
                <div className="stat"><span className="num">06</span><span className="k">Stakeholders briefing work</span></div>
              </div>
              <p className="fg-faint mono" style={{ fontSize: 11, marginTop: "var(--u-space-xl)", marginBottom: 10, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                Anonymised production output, from the 5 shipped
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--u-space-md)" }}>
                <img src="assets/stratco-padoor.jpg" alt="Finished pre-hung door, in factory aisle" style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg-elevated)" }} />
                <img src="assets/stratco-handipod.jpg" alt="Production panel ready for despatch" style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg-elevated)" }} />
                <img src="assets/stratco-poolpump.jpg" alt="Assembled fabrication detail, interior view" style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg-elevated)" }} />
              </div>
            </section>

            <section>
              <SectionTitle num="3.0">Departmental workflow</SectionTitle>
              <div className="phase-bar" aria-hidden="true">
                <div className="phase-seg" style={{ flex: 10 }} data-weight="10">
                  <span className="seg-pct">10%</span>
                  <span className="seg-name">Brief</span>
                </div>
                <div className="phase-seg phase-seg--primary" style={{ flex: 55 }} data-weight="55">
                  <span className="seg-pct">55%</span>
                  <span className="seg-name">Design</span>
                </div>
                <div className="phase-seg" style={{ flex: 35 }} data-weight="35">
                  <span className="seg-pct">35%</span>
                  <span className="seg-name">Sample / Production data</span>
                </div>
              </div>
              <div className="phase-cards">
                <div className="phase-card">
                  <h4>01. Brief</h4>
                  <p className="phase-card-sub">Project Definition Brief</p>
                  <ul>
                    <li>Problem capture</li>
                    <li>Competitor / IP research</li>
                    <li>Acceptance criteria up front</li>
                  </ul>
                </div>
                <div className="phase-card">
                  <h4>02. Design</h4>
                  <p className="phase-card-sub">Design and engineering report</p>
                  <ul>
                    <li>Detailed design</li>
                    <li>FEA / calculation</li>
                    <li>Report (Style Guide v1.0)</li>
                  </ul>
                </div>
                <div className="phase-card">
                  <h4>03. Sample / Production</h4>
                  <p className="phase-card-sub">First-article and handoff</p>
                  <ul>
                    <li>DFM review</li>
                    <li>First-article QA</li>
                    <li>Production sign-off</li>
                  </ul>
                </div>
              </div>
              <figure style={{ margin: "var(--u-space-xl) 0 0" }}>
                <img src="assets/stratco-workflow-poster.jpg" alt="The aluminium-printed workflow standard poster mounted in the department" style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)" }} />
                <figcaption className="fg-faint mono" style={{ fontSize: 11, marginTop: 8, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                  Workflow standard, aluminium-printed, mounted in the department
                </figcaption>
              </figure>
            </section>

            <section>
              <SectionTitle num="4.0">Team and management</SectionTitle>
              <div className="prose">
                <p>
                  Two design engineers in the team, one junior. Defined the workload distribution and the design review cadence, trained the team on the new procedures and walked them through the workflow standard, and stepped into review on the higher-priority briefs. The team's output during the period included five products that reached production.
                </p>
                <p>
                  Operating cadence: worked between the dedicated D&amp;E office and the factory floor. Fortnightly portfolio updates to Australian executives across five business units. Standard cadence of 90 days per small project.
                </p>
                <p>
                  Project management infrastructure: a daily-refreshed SharePoint tracker via Power Automate, the engineering report style guide, and the workflow standard shown above. Leadership saw current portfolio status without calling a meeting.
                </p>
              </div>
              <figure style={{ margin: "var(--u-space-lg) 0 0" }}>
                <img src="assets/stratco-office-sign.jpg" alt="Engineering and Design Department office, title sign over the desk, planning whiteboard at the back" style={{ width: "100%", aspectRatio: "16/10", objectFit: "cover", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)" }} />
              </figure>
            </section>

            <section>
              <SectionTitle num="5.0">Featured technical work: Universal Steel Testing Rig</SectionTitle>
              <div className="prose">
                <p>
                  The one Stratco project shareable in full: the universal lateral-load testing rig. Cambodia previously relied on the Adelaide facility for testing HandiMate sheds, with weeks of turnaround per validation. The brief: commission an on-site rig for HM1 to HM10 against AS/NZS 1170.2 N1 to N4 wind requirements.
                </p>
                <p>
                  Black-steel SHS 75 x 75 x 4.5 mm primary frame, EA 30 x 30 x 3.5 mm bracing, M16 chemical-anchored to slab. 6.0 x 3.0 x 2.7 m envelope, 817.4 kg. Downgauged from 5.0 mm to 4.5 mm wall stock for local availability; released design is a <strong>64% displacement improvement</strong> on the initial concept. Static FEA in Inventor 2026.2, peak field stress 35.6 MPa (<strong>8% of 300 MPa yield</strong>). Approved N1 to N4. Calibration protocol issued for the maximum-height load position.
                </p>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--u-space-md)", margin: "var(--u-space-xl) 0 var(--u-space-lg)" }}>
                <img src="assets/rig-hero-workshop.jpg" alt="Half-fabricated rig frame in the workshop" style={{ width: "100%", aspectRatio: "1/2", objectFit: "cover", borderRadius: "var(--u-radius-md)", background: "var(--u-bg-elevated)" }} />
                <img src="assets/rig-welded-detail.jpg" alt="Welded joint detail on the rig frame" style={{ width: "100%", aspectRatio: "1/2", objectFit: "cover", borderRadius: "var(--u-radius-md)", background: "var(--u-bg-elevated)" }} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--u-space-md)" }}>
                <figure style={{ margin: 0 }}>
                  <img src="assets/rig-fea-stress.jpg" alt="Von Mises stress visualisation at 10 kN proof load" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg-elevated)" }} />
                  <figcaption className="fg-faint mono" style={{ fontSize: 10, marginTop: 6, letterSpacing: "0.08em", textTransform: "uppercase" }}>Von Mises stress (MPa)</figcaption>
                </figure>
                <figure style={{ margin: 0 }}>
                  <img src="assets/rig-fea-displacement.jpg" alt="Displacement field at 10 kN proof load" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg-elevated)" }} />
                  <figcaption className="fg-faint mono" style={{ fontSize: 10, marginTop: 6, letterSpacing: "0.08em", textTransform: "uppercase" }}>Displacement (mm)</figcaption>
                </figure>
                <figure style={{ margin: 0 }}>
                  <img src="assets/rig-fea-sf.jpg" alt="Safety factor distribution at 10 kN proof load" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: "var(--u-radius-md)", border: "1px solid var(--u-border)", background: "var(--u-bg-elevated)" }} />
                  <figcaption className="fg-faint mono" style={{ fontSize: 10, marginTop: 6, letterSpacing: "0.08em", textTransform: "uppercase" }}>Safety factor</figcaption>
                </figure>
              </div>

              <div className="spec-block" style={{ marginTop: "var(--u-space-xl)" }}>
                <div className="spec"><span className="k">Assembly mass</span><span className="v lg">817.4 kg</span></div>
                <div className="spec"><span className="k">Envelope</span><span className="v lg">6.0 x 3.0 x 2.7 m</span></div>
                <div className="spec"><span className="k">Equipment rating</span><span className="v lg">10 t / 98.1 kN</span></div>
                <div className="spec"><span className="k">N4 operating load</span><span className="v lg">6.86 kN</span></div>
                <div className="spec"><span className="k">Peak stress at proof</span><span className="v lg" style={{ color: "var(--u-primary)" }}>8% of 300 MPa</span></div>
                <div className="spec"><span className="k">Displacement vs initial</span><span className="v lg" style={{ color: "var(--u-primary)" }}>64% better</span></div>
              </div>

              <p className="fg-faint mono" style={{ fontSize: 11, marginTop: "var(--u-space-xl)", marginBottom: 10, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                Wind region operating loads (AS/NZS 1170.2, long side)
              </p>
              <div className="rig-region-table">
                <div className="rig-region-head">
                  <span>Region</span>
                  <span>Pressure</span>
                  <span>Strength</span>
                  <span>Serviceability</span>
                </div>
                {[
                  ["N1", "0.66 kPa", "2.12 kN", "1.02 kN"],
                  ["N2", "0.92 kPa", "2.95 kN", "1.03 kN"],
                  ["N3", "1.44 kPa", "4.62 kN", "1.56 kN"],
                  ["N4", "2.14 kPa", "6.86 kN", "2.31 kN"],
                ].map(([r, p, s, sv]) => (
                  <div key={r} className="rig-region-row">
                    <span className="region">{r}</span>
                    <span>{p}</span>
                    <span>{s}</span>
                    <span>{sv}</span>
                  </div>
                ))}
              </div>
              <p className="fg-faint mono" style={{ fontSize: 10, marginTop: 8, letterSpacing: "0.06em" }}>
                Approved N1 to N4 across all three load-application heights.
              </p>

              <p className="fg-faint mono" style={{ fontSize: 11, marginTop: "var(--u-space-xl)", marginBottom: 10, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                N4 displacement by load-application height
              </p>
              <div className="stat-row">
                <div className="stat"><span className="num">3.11<span className="unit">mm</span></span><span className="k">Low height. Acceptable.</span></div>
                <div className="stat"><span className="num">5.39<span className="unit">mm</span></span><span className="k">Mid height. Acceptable with note.</span></div>
                <div className="stat"><span className="num">8.16<span className="unit">mm</span></span><span className="k">Max height. Calibration protocol issued.</span></div>
              </div>
            </section>

          </div>

          <aside className="side">
            <div className="now-block">
              <span className="eyebrow">Headlines</span>
              <div className="now-row"><span className="k">Portfolio</span><span className="v">21 projects</span></div>
              <div className="now-row"><span className="k">Shipped</span><span className="v">5 in 4 months</span></div>
              <div className="now-row"><span className="k">Direct reports</span><span className="v">2 (1 junior)</span></div>
              <div className="now-row"><span className="k">Reports to</span><span className="v">GM Cambodia</span></div>
            </div>

            <div className="now-block">
              <span className="eyebrow">Featured: Testing rig</span>
              <div className="now-row"><span className="k">Mass</span><span className="v">817.4 kg</span></div>
              <div className="now-row"><span className="k">Rating</span><span className="v">10 t (98.1 kN)</span></div>
              <div className="now-row"><span className="k">Stress at proof</span><span className="v" style={{ color: "var(--u-primary)" }}>8% of yield</span></div>
              <div className="now-row"><span className="k">Improvement</span><span className="v" style={{ color: "var(--u-primary)" }}>64% displacement</span></div>
            </div>

            <div className="now-block">
              <span className="eyebrow">Confidentiality</span>
              <p className="fg-second" style={{ fontSize: "var(--u-text-sm)", lineHeight: 1.5 }}>
                Stratco product names and identifying imagery are withheld for commercial reasons. The rig is the one piece of work shareable in full.
              </p>
            </div>
          </aside>
        </div>

        <ProjectNav currentId="stratco" setRoute={setRoute} />
      </div>
    </div>
  );
}

/* ============================================================
   PROJECT 03: Robotic Hand (personal R&D)
   ============================================================ */
function ProjectHand({ setRoute }) {
  return (
    <div className="page">
      <div className="shell-bleed">
        <PageHead
          eyebrow="Project 03 / Personal R&D"
          title="Robotic Hand"
          meta={[
            ["Role", "Researcher / Engineer / Designer"],
            ["Period", "2020 to present"],
            ["Honours pivot", "Project Vision Sixth Sense (2023)"],
            ["Award", "First Class Honours, RMIT"],
            ["Status", "Foundational R&D"],
            ["Discipline", "Mech, electronics, design research"],
          ]}
        />

        <img className="ava-hero" src="assets/hand-hero-collective.jpg" alt="Seven Robotic Hand prototype variants in a line, showing four years of mechanical iteration" />

        <div className="proj-body">
          <div className="main">

            <div className="patr">
              <div className="patr-cell"><span className="k">Problem</span><span className="v">Robotic articulation is hard. Assistive navigation aids stop at the white cane's range. Two questions, one multi-year project: a tendon-driven hand mechanism from 2020, then a wearable haptic glove for blind navigation as the 2023 honours pivot.</span></div>
              <div className="patr-cell"><span className="k">Approach</span><span className="v">One prototype per engineering question. Seven hand prototypes across four years. The honours pivot took the hand-tracking and haptic findings forward into a wearable, validated through field interviews with white-cane users.</span></div>
              <div className="patr-cell"><span className="k">Tools</span><span className="v">Fusion 360 for design. Blender for visualisation. Arduino and Teensy stacks. In-house PCB design. FDM 3D printing for prototypes. Field interviews with white-cane users for design research.</span></div>
              <div className="patr-cell"><span className="k">Result</span><span className="v">First Class Honours, RMIT (2023). Seven hand prototypes, one smart-glove submitted as the honours capstone. Engineering vocabulary built here: actuation, sensor selection, prototyping cadence, design research methods.</span></div>
            </div>

            <section>
              <SectionTitle num="1.0">Origin and arc</SectionTitle>
              <div className="prose">
                <p>
                  Started in 2020 as a personal research project on tendon-driven articulation. Visible joints, exposed pulleys, fastener-rich. Seven prototypes across four years, each one closing one engineering question and opening the next.
                </p>
                <p>
                  In 2023 the work pivoted. Rather than the next hand prototype, the hand-tracking and haptic feedback findings evolved into a wearable smart-glove for blind navigation, submitted as my final honours project. <strong>First Class Honours, RMIT.</strong>
                </p>
                <p>
                  This is the foundational R&amp;D piece in my engineering practice. The vocabulary built here: actuation kinematics, sensor selection, prototyping cadence.
                </p>
              </div>
            </section>

            <section>
              <SectionTitle num="2.0">Mechanism</SectionTitle>
              <div className="prose">
                <p>
                  Tendon-driven actuation with the actuator pack housed in the forearm. Each finger has its own tendon routed through low-friction guides and pulleys, with return springs in the dorsal side. Wrist rotation handled by a separate gear stage at the forearm interface.
                </p>
              </div>
              <div className="ava-grid">
                <div className="tall"><img src="assets/hand-schematic.jpg" alt="Robotic Hand mechanical schematic with cyan tendons highlighted" /></div>
                <img className="wide" src="assets/hand-render-white.jpg" alt="Clean white render of the Robotic Hand, three-quarter view" />
                <img className="wide" src="assets/hand-cad-wrist.jpg" alt="CAD detail of the wrist actuator pack and gear linkage" />
              </div>
            </section>

            <section>
              <SectionTitle num="3.0">Honours pivot: electro-tactile glove for blind navigation</SectionTitle>
              <div className="prose">
                <p>
                  Project Vision Sixth Sense (2023). A wearable glove for blind and low-vision users to navigate physical space without a white cane. Time-of-flight sensors on the dorsal surface and at the fingertips map nearby objects; vibration motors over the metacarpals translate that spatial map into haptic feedback under the skin.
                </p>
                <p>
                  Sensor stack: <strong>VL53L5CX</strong> multi-zone ToF, <strong>Grid-EYE</strong> infrared thermal array, OLED status. PCB designed in-house. Microcontroller (ATtiny vs Teensy) and battery sizing driven by wearable form-factor and haptic motor count.
                </p>
                <p>
                  Design research: field interviews with white-cane users on existing aids and acceptability (social acceptability, interference with object manipulation, design language reading as assistive technology versus medical device). Two glove design directions prototyped to render and physical sample.
                </p>
              </div>
              <div className="ava-grid">
                <div className="tall"><img src="assets/hand-glove-sketches.jpg" alt="Hand-drawn design exploration page for the smart glove with componentry list" /></div>
                <img className="wide" src="assets/hand-glove-palm.jpg" alt="Smart glove render, palm view, showing sensor mount and finger TOF positions" />
                <img className="wide" src="assets/hand-glove-back.jpg" alt="Smart glove render, back view, showing haptic motor mounts" />
              </div>
            </section>

            <section>
              <SectionTitle num="4.0">Status</SectionTitle>
              <div className="prose">
                <p>
                  Hand work sits in long-running R&amp;D. Most recent active iteration (2024) was on hand-tracking with twin BNO055 IMUs in the forearm and wrist for joint-angle inference without external cameras. The honours glove work is documented and not actively being prototyped further.
                </p>
              </div>
            </section>

          </div>

          <aside className="side">
            <div className="now-block">
              <span className="eyebrow">Headlines</span>
              <div className="now-row"><span className="k">Period</span><span className="v">2020 to present</span></div>
              <div className="now-row"><span className="k">Iterations</span><span className="v">7+ prototypes</span></div>
              <div className="now-row"><span className="k">Honours</span><span className="v" style={{ color: "var(--u-primary)" }}>First Class</span></div>
              <div className="now-row"><span className="k">Domain</span><span className="v">Mech + electronics + design research</span></div>
              <div className="now-row"><span className="k">Status</span><span className="v">Long-running R&amp;D</span></div>
            </div>

            <div className="now-block">
              <span className="eyebrow">Honours project</span>
              <p className="fg-second" style={{ fontSize: "var(--u-text-sm)", lineHeight: 1.5 }}>
                <strong>Project Vision Sixth Sense</strong> (2023). Wearable electro-tactile glove for blind and low-vision users navigating physical space. First Class Honours, RMIT.
              </p>
            </div>

            <div className="now-block">
              <span className="eyebrow">Sensor stack</span>
              <p className="fg-second mono" style={{ fontSize: 11, lineHeight: 1.6, letterSpacing: "0.02em" }}>
                VL53L5CX time-of-flight. Grid-EYE thermal. BNO055 IMU. Ultraleap hand tracking. OLED status. Vibration motors for haptic feedback. Teensy and ATtiny microcontrollers.
              </p>
            </div>
          </aside>
        </div>

        <ProjectNav currentId="hand" setRoute={setRoute} />
      </div>
    </div>
  );
}

Object.assign(window, { ProjectAva, ProjectStratco, ProjectHand });
