// subpages.jsx — Markaloud, Work, About, Contact full pages

// Edit this line whenever — it shows on the home page as the "Now" status.
const NOW_LINE = "Now (May ’26) — closed beta with university pilots; booking engagements from July";

const PUBLICATIONS = [
  {
    year: "2026",
    title: "The Influence of Vapour Post-Processing of ABS 3D Printed Parts on Impact Strength",
    authors: "Griffiths, C., Rees, A., & Morgan, A.",
    venue: "Rapid Prototyping Journal · 32(2) · 410–421",
    doi: "https://doi.org/10.1108/rpj-09-2024-0373",
    repo: "https://cronfa.swan.ac.uk/Record/cronfa70815",
  },
  {
    year: "2025",
    title: "Automated Cold Embossing for the Integration of Optical Lenses onto the Surface of ABS 3D-Printed Parts",
    authors: "Griffiths, C., Rees, A., Morgan, A., & Thomas, A.",
    venue: "Polymers · 17(13) · 1745",
    doi: "https://doi.org/10.3390/polym17131745",
    repo: "https://cronfa.swan.ac.uk/Record/cronfa69862",
  },
  {
    year: "2023",
    title: "Optimisation of 3D Printing for Microcellular Polymers",
    authors: "Griffiths, C., Rees, A., Morgan, A., & Korkees, F.",
    venue: "Polymers · 15(19) · 3910",
    doi: "https://doi.org/10.3390/polym15193910",
    repo: "https://cronfa.swan.ac.uk/Record/cronfa64691",
  },
  {
    year: "2021",
    title: "Comparison of a BAT and Genetic Algorithm Generated Sequence Against Lead-Through Programming When Assembling a PCB Using a 6-Axis Robot",
    authors: "Griffiths, C., Giannetti, C., Andrzejewski, K., & Morgan, A.",
    venue: "IEEE Transactions on Industrial Informatics · 18(2)",
    doi: "https://doi.org/10.1109/tii.2021.3082877",
    repo: "https://cronfa.swan.ac.uk/Record/cronfa56974",
  },
  {
    year: "2021",
    title: "Environmental Effects on Reliability and Accuracy of MFCC-Based Voice Recognition for Industrial Human-Robot Interaction",
    authors: "Morgan, A., Birch, B., Griffiths, C., & Morgan, A.",
    venue: "Proceedings of the IMechE, Part B · 235(12) · 1939–1948",
    doi: "https://doi.org/10.1177/09544054211014492",
    repo: "https://cronfa.swan.ac.uk/Record/cronfa56932",
  },
  {
    year: "—",
    inProgress: true,
    title: "Introducing RSIPI: A Python Interface for KUKA Robot Sensor Interface",
    authors: "Morgan, A.",
    venue: "In preparation · companion to the rsi-pi library",
    repo: "https://github.com/otherworld-dev/rsi-pi",
  },
];

function PageHead({ kicker, title, sub }) {
  return (
    <section className="page-head">
      <div className="wrap">
        <span className="kicker fade-in">{kicker}</span>
        <h1 className="t-h1 fade-in" data-delay="1">{title}</h1>
        {sub && <p className="sub fade-in" data-delay="2">{sub}</p>}
      </div>
    </section>
  );
}

// ─── Markaloud product page ──────────────────────────────────────────────

function MarkaloudPage({ go }) {
  return (
    <main>
      <PageHead
        kicker="● Featured product · Live beta"
        title={<>Markaloud — the academic <span style={{ color: "var(--accent)" }}>audio-marking</span> tool.</>}
        sub="Markers record. Markaloud transcribes, timestamps, and structures feedback against your rubric — so students get constructive coaching, not just a grade."
      />

      <section className="section">
        <div className="wrap">
          <div className="section-tag">
            <div className="t-eyebrow"><span className="dot"></span>How it works</div>
            <div className="right">01 → 03</div>
          </div>
          <div className="howit-grid">
            <div className="howit-card fade-in">
              <div className="step">01 / Capture</div>
              <h3 className="t-h3">Record once, in the room.</h3>
              <p>Markers speak naturally during or after the viva. No transcription, no templates, no second admin pass.</p>
            </div>
            <div className="howit-card fade-in" data-delay="1">
              <div className="step">02 / Structure</div>
              <h3 className="t-h3">AI maps against your rubric.</h3>
              <p>Audio is timestamped, diarised, and aligned to your assessment criteria. Strengths, gaps and actions get separated.</p>
            </div>
            <div className="howit-card fade-in" data-delay="2">
              <div className="step">03 / Deliver</div>
              <h3 className="t-h3">Constructive, not corrective.</h3>
              <p>Students receive feedback as a structured, listenable artefact — with the moments to revisit pinned in time.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 64, alignItems: "center" }}>
          <div className="fade-in">
            <div className="t-eyebrow"><span className="dot"></span>Inside the app</div>
            <h2 className="t-h2" style={{ marginTop: 18 }}>
              A rubric-aware audio review surface, designed for the way markers actually work.
            </h2>
            <p className="t-body" style={{ marginTop: 18 }}>
              Markaloud isn't a transcription tool with a chat slapped on. The model is trained on
              constructive-feedback patterns, and the UI is built so educators stay in flow —
              keyboard-first, fast scrub, comments that pin to time.
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="https://www.markaloud.cloud" target="_blank" rel="noreferrer">
                Visit markaloud.cloud <span className="arr">↗</span>
              </a>
              <a className="btn btn-ghost" href="/contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
                Request pilot access
              </a>
            </div>
          </div>
          <div className="fade-in" data-delay="2">
            <MarkaloudMock />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-tag">
            <div className="t-eyebrow"><span className="dot"></span>What's inside</div>
            <div className="right">Capabilities</div>
          </div>
          <div className="featlist">
            {[
              ["WAV / MP3 / m4a", "Recordings up to 90 min · multi-speaker diarisation"],
              ["Rubric-aligned", "Import QAA, university-specific or custom rubrics"],
              ["Time-pinned comments", "Strengths · Actions · Next — pinned to seconds"],
              ["Reviewer-in-the-loop", "Drafts are suggestions; you stay in control"],
              ["Cohort analytics", "Spot common gaps across a cohort, not just individuals"],
              ["GDPR & DPIA-ready", "EU/UK data residency, full audit trail"],
            ].map(([h, p], i) => (
              <div className="item fade-in" key={h} data-delay={Math.min(i + 1, 5)}>
                <div className="icon">{String(i + 1).padStart(2, "0")} ▸</div>
                <h4>{h}</h4>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ContactCTA go={go} />
    </main>
  );
}

// ─── Work / portfolio page ───────────────────────────────────────────────

function WorkPage({ go }) {
  return (
    <main>
      <PageHead
        kicker="● Selected work · 2018 — 2026"
        title={<>Things I've built — across <span style={{ color: "var(--accent)" }}>software</span>, hardware and the spaces in between.</>}
        sub="A non-exhaustive list. Most of my engagements are under NDA; the cases below are public or anonymised summaries."
      />
      <section className="section">
        <div className="wrap">
          <WorkGrid />
        </div>
      </section>
      <ContactCTA go={go} />
    </main>
  );
}

// ─── About page ──────────────────────────────────────────────────────────

function AboutPage({ go }) {
  return (
    <main className="cv-mode">
      <PageHead
        kicker="● About"
        title={<>I work across the stack — <span style={{ color: "var(--accent)" }}>and across</span> the bench.</>}
      />
      <section className="section">
        <div className="wrap" style={{ display: "flex", justifyContent: "flex-end", marginBottom: -32 }}>
          <button
            className="btn btn-ghost print-cv-btn"
            onClick={() => window.print()}
            style={{ height: 36, fontSize: 12.5 }}>
            ↓ Download as PDF / CV
          </button>
        </div>
      </section>
      <section className="section">
        <div className="wrap about-grid">
          <div className="left">
            <div className="avatar" style={{
              padding: 0,
              background: "var(--bg-2)",
              overflow: "hidden",
              position: "relative",
            }}>
              <img src="assets/adam-portrait.png"
                alt="Adam Morgan in front of a KUKA robot arm"
                style={{
                  width: "100%", height: "100%",
                  objectFit: "cover",
                  display: "block",
                  filter: "saturate(0.95) contrast(1.02)",
                }}/>
              <div style={{
                position: "absolute", left: 14, bottom: 14, right: 14,
                display: "flex", justifyContent: "space-between",
                fontFamily: "var(--font-mono)", fontSize: 10,
                color: "var(--fg-1)", letterSpacing: "0.12em",
                textShadow: "0 1px 2px rgba(0,0,0,0.8)",
              }}>
                <span>● ADAM MORGAN</span>
                <span>KUKA · ARM-04</span>
              </div>
            </div>
          </div>
          <div className="fade-in">
            <p>
              I'm Adam Morgan. After eight years in robotics research and teaching
              at Swansea University, I'm <strong style={{ color: "var(--fg)" }}>going
              independent in July 2026</strong> to run
              <strong style={{ color: "var(--fg)" }}> Otherworld Dev Ltd</strong> — a
              software, AI &amp; robotics engineering practice. This page is the
              foundation: the work I take with me, and the work I'm taking on next.
            </p>
            <p>
              The route here wasn't linear. I started in
              <strong style={{ color: "var(--fg)" }}> logistics IT</strong> at UPS,
              moved into <strong style={{ color: "var(--fg)" }}>RockIT</strong> — an
              award-winning MSP — running proactive monitoring across ~3,800 machines,
              then joined Swansea as an
              <strong style={{ color: "var(--fg)" }}> IT technician and research
              assistant</strong> on ASTUTE2020. Eight years there pulled me through
              into a <strong style={{ color: "var(--fg)" }}>MSc by Research in
              Robotics</strong> and the academic post I currently hold.
            </p>
            <p>
              The route turns out to be the value. As a
              <strong style={{ color: "var(--fg)" }}> full-stack software engineer</strong>
              with an AI &amp; robotics specialism — and operations and infrastructure
              underneath — I know what it looks like when software meets the warehouse
              floor, when an MSP ticket queue meets a real deadline, when a research
              idea meets a department that has to actually run it. I ship across the
              stack: web apps in Vue and Next, robot control loops in Python and KRL,
              ML pipelines on Whisper and YOLO, firmware on ESP32 and RP2040. Otherworld
              is where I take that next — building
              <a href="/markaloud" style={{ color: "var(--accent)" }}> Markaloud</a> and
              other products like
              <a href="https://github.com/otherworld-dev/Shopping-List" target="_blank" rel="noreferrer" style={{ color: "var(--accent)" }}> Shopping List</a>,
              and taking on consulting and build engagements for teams that need
              a generalist who can cross hardware, firmware, ML and the people problem.
            </p>
            <p>
              I care about systems that are honest with their users and tools that
              respect the people using them. If that sounds like your problem,
              we'll probably get on.
            </p>
            <div className="skills">
              <div className="skill"><div className="l">Software</div><div className="v">Python · TypeScript · C / C++ / C# · Java · PHP</div></div>
              <div className="skill"><div className="l">Web stack</div><div className="v">Vue 3 · Next · React · FastAPI · SQL</div></div>
              <div className="skill"><div className="l">ML / AI</div><div className="v">PyTorch · Whisper · YOLO · LLM tooling</div></div>
              <div className="skill"><div className="l">Robotics languages</div><div className="v">KRL · ROS · Festo / Siemens PLC</div></div>
              <div className="skill"><div className="l">Robots operated</div><div className="v">KUKA KR16-2, iiwa, KMR · UR3 · Mitsubishi RV-4FL-D · Baxter · Unitree</div></div>
              <div className="skill"><div className="l">Embedded</div><div className="v">RP2040 · ESP32 · STM32 · Raspberry Pi</div></div>
              <div className="skill"><div className="l">Manufacturing</div><div className="v">FDM · SLA · Klipper · SolidWorks · PCB</div></div>
              <div className="skill"><div className="l">Infra</div><div className="v">MSP-grade ops · Linux · VMware · Hyper-V · Nextcloud</div></div>
            </div>
            <div style={{ marginTop: 32 }}>
              <div className="t-eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot"></span>The route
              </div>
              <div className="route-timeline" style={{
                display: "grid",
                gridTemplateColumns: "auto auto 1fr",
                columnGap: 24, rowGap: 0,
                fontFamily: "var(--font-mono)",
                fontSize: 13,
                borderTop: "1px solid var(--line)",
              }}>
                {[
                  ["2008–2010", "UPS",            "Tech support inside Europe's largest delivery hub"],
                  ["2011–2014", "RockIT (MSP)",   "Proactive engineer → team manager · 3,800 machines"],
                  ["2015–2019", "Swansea IT",     "Servers, domain control, 30TB+ backup ops"],
                  ["2015–2022", "ASTUTE2020",     "Robotics + photogrammetry research assistant"],
                  ["2021",      "MSc by Research", "Robotics — Swansea University"],
                  ["2022–Jul '26", "Lecturer in Robotics", "Swansea · Mechanical Engineering · runs the robotics lab"],
                  ["Jul 2026 →",   "Otherworld Dev Ltd", "Going full-time independent — AI &amp; robotics practice"],
                ].map(([y, k, v]) => (
                  <React.Fragment key={k}>
                    <div style={{ padding: "12px 16px 12px 0", color: "var(--fg-4)", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>
                      {y}
                    </div>
                    <div style={{ padding: "12px 0", color: "var(--accent)", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>
                      {k}
                    </div>
                    <div style={{ padding: "12px 0 12px 24px", color: "var(--fg-2)", borderBottom: "1px solid var(--line)" }}>
                      {v}
                    </div>
                  </React.Fragment>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 56 }}>
              <div className="t-eyebrow" style={{ marginBottom: 18 }}>
                <span className="dot"></span>Selected publications
                <span style={{ color: "var(--fg-4)", marginLeft: 12, letterSpacing: "0.04em", textTransform: "none", fontSize: 11 }}>
                  · 5 published · 1 in progress
                </span>
              </div>
              <div style={{ borderTop: "1px solid var(--line)" }}>
                {PUBLICATIONS.map((p) => (
                  <div key={p.title} className="pub-row" style={{
                    display: "grid",
                    gridTemplateColumns: "auto 1fr auto",
                    columnGap: 24,
                    padding: "20px 0",
                    borderBottom: "1px solid var(--line)",
                    alignItems: "start",
                  }}>
                    <div style={{
                      fontFamily: "var(--font-mono)",
                      fontSize: 12,
                      color: p.inProgress ? "#f5a623" : "var(--accent)",
                      letterSpacing: "0.08em",
                      paddingTop: 3,
                      width: 84,
                    }}>
                      {p.inProgress ? "IN PROGRESS" : p.year}
                    </div>
                    <div>
                      <div style={{
                        fontSize: 15, color: "var(--fg)",
                        fontWeight: 600, letterSpacing: "-0.005em",
                        lineHeight: 1.35,
                      }}>
                        {p.title}
                      </div>
                      <div style={{
                        marginTop: 6, color: "var(--fg-2)",
                        fontSize: 13.5, lineHeight: 1.5,
                      }}>
                        {p.authors}
                      </div>
                      <div style={{
                        marginTop: 4, color: "var(--fg-3)",
                        fontFamily: "var(--font-mono)", fontSize: 11.5,
                        letterSpacing: "0.04em",
                      }}>
                        {p.venue}
                      </div>
                    </div>
                    <div style={{ paddingTop: 4, display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-end", whiteSpace: "nowrap" }}>
                      {p.doi && (
                        <a href={p.doi} target="_blank" rel="noreferrer"
                          style={{
                            color: "var(--accent)",
                            fontFamily: "var(--font-mono)",
                            fontSize: 11.5, letterSpacing: "0.04em",
                          }}>
                          DOI ↗
                        </a>
                      )}
                      {p.repo && (
                        <a href={p.repo} target="_blank" rel="noreferrer"
                          style={{
                            color: "var(--fg-3)",
                            fontFamily: "var(--font-mono)",
                            fontSize: 11.5, letterSpacing: "0.04em",
                          }}>
                          Repository ↗
                        </a>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
      <ContactCTA go={go} />
    </main>
  );
}

// ─── Contact page ────────────────────────────────────────────────────────

function ContactPage() {
  const [state, setState] = React.useState({ name: "", email: "", subject: "consulting", message: "" });
  const [status, setStatus] = React.useState("");
  const [sending, setSending] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!state.name || !state.email || !state.message) {
      setStatus("⚠ Please fill in name, email and a short message.");
      return;
    }
    setSending(true);
    setStatus("→ Sending…");
    setTimeout(() => {
      setSending(false);
      setStatus("✓ Thanks — I'll reply within 48 hours.");
    }, 900);
  };

  return (
    <main>
      <PageHead
        kicker="● Contact"
        title={<>Let's <span style={{ color: "var(--accent)" }}>talk</span>.</>}
        sub="The fastest way is email. The form below routes there too — pick whichever you like."
      />
      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div className="fade-in">
            <form className="form" onSubmit={submit}>
              <div className="form-row">
                <div className="field">
                  <label>Your name</label>
                  <input value={state.name} onChange={(e) => setState(s => ({ ...s, name: e.target.value }))} placeholder="Eleanor Hughes"/>
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" value={state.email} onChange={(e) => setState(s => ({ ...s, email: e.target.value }))} placeholder="you@company.com"/>
                </div>
              </div>
              <div className="field">
                <label>What's this about?</label>
                <select value={state.subject} onChange={(e) => setState(s => ({ ...s, subject: e.target.value }))}>
                  <option value="consulting">Consulting / build engagement</option>
                  <option value="markaloud">Markaloud — pilot or partnership</option>
                  <option value="advise">Advisory / diligence</option>
                  <option value="other">Something else</option>
                </select>
              </div>
              <div className="field">
                <label>Tell me about it</label>
                <textarea value={state.message} onChange={(e) => setState(s => ({ ...s, message: e.target.value }))} placeholder="A paragraph is plenty — what you're working on, what you'd like help with, and your timeline."></textarea>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <button className="btn btn-primary" type="submit" disabled={sending}>
                  {sending ? "Sending…" : "Send"} <span className="arr">→</span>
                </button>
                <span className="form-status">{status}</span>
              </div>
            </form>
          </div>
          <div className="fade-in" data-delay="2">
            <div className="t-eyebrow"><span className="dot"></span>Direct lines</div>
            <div className="contact-side" style={{ marginTop: 20 }}>
              <div className="contact-row"><span>Email</span><span className="v">contact@otherworld.dev</span></div>
              <div className="contact-row"><span>Markaloud</span><span className="v">markaloud.cloud ↗</span></div>
              <div className="contact-row"><span>LinkedIn</span><span className="v">/in/a-j-morgan ↗</span></div>
              <div className="contact-row"><span>GitHub</span><span className="v">github.com/otherworld-dev ↗</span></div>
              <div className="contact-row"><span>Company</span><span className="v">Otherworld Dev Ltd · England &amp; Wales</span></div>
              <div className="contact-row"><span>Location</span><span className="v">Swansea, UK · remote / hybrid</span></div>
            </div>
            <div style={{ marginTop: 32, padding: 20, border: "1px solid var(--line)", borderRadius: 12, background: "var(--bg-1)" }}>
              <div className="t-mono" style={{ color: "var(--accent)", marginBottom: 8 }}>● Available from July 2026</div>
              <div style={{ color: "var(--fg-1)", fontSize: 14, lineHeight: 1.55 }}>
                Wrapping up my academic post and going
                <strong style={{ color: "var(--fg)" }}> full-time independent</strong>
                in July 2026. Now booking consulting and build engagements from
                that date onward.
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Home composes everything ────────────────────────────────────────────

function HomePage({ go, treatment }) {
  return (
    <main>
      <Hero go={go} />
      <MarkaloudFeature treatment={treatment} go={go} />
      <section className="section">
        <div className="wrap">
          <div className="section-tag">
            <div className="t-eyebrow"><span className="dot"></span>Selected work</div>
            <div className="right">
              <a href="/work" onClick={(e) => { e.preventDefault(); go("work"); }}
                 style={{ color: "var(--accent)", textDecoration: "none" }}>
                Index ↗
              </a>
            </div>
          </div>
          <WorkGrid limit={6}/>
        </div>
      </section>
      <section className="section-sm">
        <div className="wrap" style={{ display: "flex", justifyContent: "center" }}>
          <div className="t-eyebrow">
            <span className="dot"></span>{NOW_LINE}
          </div>
        </div>
      </section>
      <ContactCTA go={go}/>
    </main>
  );
}

Object.assign(window, {
  MarkaloudPage, WorkPage, AboutPage, ContactPage, HomePage, PageHead,
});