// About / My story (route: #/work) — v9
//
// Spec (round 5):
//   - Short 2-paragraph intro, no header
//   - Horizontal nav row: Background · First career · The pivot · Teaching · ai-aflat.ro · The book
//   - Horizontal interactive timeline (click/hover to expand details)
//   - Six biographical sections; titles styled prominently in accent blue
//   - Highlighted key phrases per section
//   - Photos full-width with black band + edge fade — NO captions
//   - No sidebar (the timeline carries the factual scaffolding)

const STORY_SECTIONS = [
{ id: "early", label: "Background", num: "01" },
{ id: "engineer", label: "First career", num: "02" },
{ id: "pivot", label: "The pivot", num: "03" },
{ id: "teaching", label: "Teaching", num: "04" },
{ id: "aiaflat", label: "ai-aflat.ro", num: "05" },
{ id: "book", label: "The book", num: "06" }];


function scrollToStorySection(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 72;
  window.scrollTo({ top, behavior: "smooth" });
}

function StoryIntro() {
  return (
    <div className="story-intro fadein">
      <p>
        I'm Vlad Tudor. I'm an engineer by training, an AI builder by trade, and someone who's spent the better part of a decade trying to turn complicated ideas into things that actually work. This page is the longer version of that — where the work started, where it took me, and what I'm doing now.
      </p>
    </div>);

}

function StoryNav({ active }) {
  return (
    <nav className="story-nav" aria-label="Sections of this page">
      {STORY_SECTIONS.map((s) =>
      <a
        key={s.id}
        href={"#" + s.id}
        className={"story-nav__item" + (active === s.id ? " is-active" : "")}
        onClick={(e) => {e.preventDefault();scrollToStorySection(s.id);}}>
        
          <span className="story-nav__num">{s.num}</span>
          <span className="story-nav__label">{s.label}</span>
        </a>
      )}
    </nav>);

}

function StoryAnchor({ children }) {
  return <h2 className="story-anchor">{children}</h2>;
}

const STORY_MILESTONES = [
// oldest → newest (left to right)
{
  year: "2019", role: "B.Sc.", org: "Systems Engineering · UPB", kind: "muted",
  desc: "Bachelor's in Automatic Control & Computer Science from Politehnica University of Bucharest — the foundation for everything that followed."
},
{
  year: "2019", role: "Started", org: "ML Engineer", kind: "accent",
  desc: "Left industrial automation and switched into machine-learning engineering, betting on AI before it was obvious."
},
{
  year: "2019–23", role: "Teaching Assistant", org: "Politehnica Bucharest", kind: "muted",
  desc: "Four years running Automatic Control labs in Prof. Ioan Dumitrache's department. The full lab series was recorded on YouTube during the pandemic."
},
{
  year: "2021", role: "Founded", org: "Sapio AI", kind: "accent",
  desc: "Started Sapio AI as an innovation studio. Today: a multidisciplinary team of eight building applied AI for legaltech, medtech, retail and SaaS."
},
{
  year: "2023", role: "M.Sc.", org: "Complex Systems · UPB", kind: "muted",
  desc: "Master's thesis: unsupervised learning from visual data — an app that sorted a photo collection by semantic content."
},
{
  year: "2024", role: "Founded", org: "ai-aflat.ro", kind: "warm",
  desc: "Free AI assistant for Romanian legislation. Bootstrapped, word-of-mouth growth to ~15,000 users and ~120,000 questions; pilots with the Romanian Bar Council and a city hall."
},
{
  year: "2025–26", role: "CTO", org: "CogniSync", kind: "accent",
  desc: "Technical coordinator at a Romanian legaltech startup — building the kind of company I'd want to have started myself."
},
{
  year: "2025–26", role: "AI Lead", org: "dConnection", kind: "accent",
  desc: "Advisor at an Austrian personal-AI-assistant startup, helping shape the technical direction."
}];


function StoryTimeline() {
  const [active, setActive] = React.useState(null);
  const closeDetail = (e) => {
    if (e) e.stopPropagation();
    setActive(null);
  };
  const detail = active != null ? STORY_MILESTONES[active] : null;
  return (
    <section className="story-timeline" aria-label="Career markers">
      <ol className="story-tl">
        {STORY_MILESTONES.map((m, i) => {
          const isActive = active === i;
          return (
            <li
              key={i}
              className={
                "story-tl__item story-tl__item--" + (i % 2 === 0 ? "above" : "below") +
                " story-tl__item--" + m.kind + (isActive ? " is-active" : "")
              }>
              <button
                type="button"
                className="story-tl__btn"
                aria-expanded={isActive}
                aria-controls="story-tl-detail"
                onClick={(e) => {
                  e.stopPropagation();
                  setActive(isActive ? null : i);
                }}>
                <div className="story-tl__txt">
                  <span className="story-tl__role">{m.role}</span>
                  <span className="story-tl__org">{m.org}</span>
                </div>
                <span className="story-tl__node" aria-hidden="true"></span>
                <time className="story-tl__yr">{m.year}</time>
              </button>
            </li>);

        })}
      </ol>
      <div
        id="story-tl-detail"
        className={"story-tl-detail" + (detail ? " is-open" : "")}
        role="region"
        aria-live="polite">
        {detail &&
        <div className="story-tl-detail__inner">
            <div className="story-tl-detail__meta">
              <time className="story-tl-detail__yr">{detail.year}</time>
              <span className="story-tl-detail__role">{detail.role}</span>
              <span className="story-tl-detail__org">{detail.org}</span>
            </div>
            <p className="story-tl-detail__body">{detail.desc}</p>
            <button
            type="button"
            className="story-tl-detail__close"
            aria-label="Close"
            onClick={closeDetail}>
            ×
          </button>
          </div>
        }
      </div>
    </section>);

}

function StoryEarlyYears() {
  return (
    <section id="early" className="story-section story-section--row story-section--photo-right">
      <div className="story-row">
        <div className="story-row__col">
          <StoryAnchor>How it started.</StoryAnchor>
          <div className="story-prose story-prose--col">
            <p>
              Apart from opening up toys to see how they work, my passion for engineering started in primary school. In second grade I joined a computer club, where a remarkable teacher — Mrs. Mariana Chiș — opened up the world of programming for a roomful of kids. I learned C++, started entering competitions, and in fifth grade made it to the national stage of the informatics olympiad. <em>None of it felt like a career at the time; it felt like a cool game.</em>
            </p>
            <p>
              I lost the thread for a while, and rediscovered it years later — only this time with Arduinos and Raspberry Pis on the desk. When I discovered that <em>code could turn into actual physical movement</em>, it was a real aha! moment. I started building anything that came to mind: plants were being watered automatically at home, another contraption was playing YouTube music at the press of a button. I DIY-ed every problem I could find an excuse to DIY. I still keep a workbench at home for the same reason.
            </p>
          </div>
        </div>
        <figure className="story-row__photo">
          <div className="story-row__band">
            <img
              src="assets/diy-photo.webp"
              alt="Overhead shot of a workbench: electronics, soldering iron, multimeter, coffee."
              loading="lazy" />
            
          </div>
        </figure>
      </div>
    </section>);

}

function StoryFirstCareer() {
  return (
    <section id="engineer" className="story-section story-section--row story-section--photo-left">
      <div className="story-row">
        <figure className="story-row__photo">
          <div className="story-row__band">
            <img
              src="assets/industrial-engineering.webp"
              alt="In front of a wall of electrical control panels at a factory."
              loading="lazy" />
            
          </div>
        </figure>
        <div className="story-row__col">
          <StoryAnchor>Working as an industrial engineer.</StoryAnchor>
          <div className="story-prose story-prose--col">
            <p>
              I studied at the Faculty of Automatic Control and Computer Science at Politehnica University of Bucharest and trained as an industrial systems engineer. My first job followed naturally — programming the systems that control industrial electrical switchgear, the equipment that routes high-power electricity safely through a building.
            </p>
            <p>
              A few months in, through a piece of luck I'm still grateful for, I was put in charge of <em>automating the entire backup power system at a 300-person factory in Alexandria</em>. The job was making sure that when the grid dropped, the generators picked up cleanly and the auxiliary supplies took over without a hitch. (Kudos to the team at Electrotel.) Later I worked on energy management systems for solar parks, and on automated switchgear for industrial plants in the Middle East. <em>Real hardware, software controlling thousands of watts at a time.</em> It was quite the thrill.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function StoryPivot() {
  return (
    <section id="pivot" className="story-section">
      <StoryAnchor>Going all-in on AI.</StoryAnchor>
      <div className="story-prose">
        <p>
          The decision to switch came out of university. I'd been exposed to AI in my studies, and the more I read, the more it became clear this was what I wanted to be working on. I also knew that trying to make the switch by applying to AI jobs in parallel with my engineering work wasn't going to get me there. So I <em>went cold turkey</em> — resigned from my job and spent several months building projects that would prove I could do the work.
        </p>
        <p>
          The timing was, in retrospect, terrible. It was early 2020. Covid was in full force, the job market had paused, and nobody knew what came next. My break came through a small startup that essentially said: <em>we can't pay you unless you produce results we can sell.</em> I took the deal. It worked. Sometime in those months I figured out two things at once — that AI was what I wanted to do for the long run, and that <em>I worked better when I was the one carrying the risk.</em> This probably created my appetite for entrepreneurship later on.
        </p>
      </div>
    </section>);

}

function StoryTeaching() {
  return (
    <section id="teaching" className="story-section story-section--row story-section--photo-right">
      <div className="story-row">
        <div className="story-row__col">
          <StoryAnchor>Teaching at university.</StoryAnchor>
          <div className="story-prose story-prose--col">
            <p>
              In 2018 I started as a teaching assistant for my thesis coordinator, <strong>prof. Ioan Sacală</strong>. A year later I was given the chance to have my own lab for Professor Ioan Dumitrache's <strong>Automatic Control</strong> class, and I kept teaching it for three years. The part I liked most was <em>the students who walked in unconvinced</em> — the challenge was finding a way to present the work I loved that made sense to someone who didn't yet care about it. Sometimes that worked, sometimes it didn't, but I walked out of that experience having learnt a great deal myself.
            </p>
            <p>
              When Covid moved everything online, I built out the full lab series as video lessons and decided to put them on YouTube so anyone could follow along, <em>including students from other faculties who'd never had access</em>. They're still up. I no longer teach formally, but I make time for younger colleagues and people at the start of their careers — the early years are confusing enough that having someone to talk to who's a few steps ahead is worth more than almost any specific advice.
            </p>
          </div>
        </div>
        <figure className="story-row__photo">
          <div className="story-row__band">
            <img
              src="assets/teaching.webp"
              alt="Teaching a lab at Politehnica University of Bucharest."
              loading="lazy" />
            
          </div>
        </figure>
      </div>
    </section>);

}

function StoryAiAflat() {
  return (
    <section id="aiaflat" className="story-section">
      <StoryAnchor>ai-aflat, the legal AI assistant.</StoryAnchor>
      <div className="story-prose">
        <p>
          <strong>ai-aflat.ro</strong> was my break from contract development work into something that resembled entrepreneurship. After years of building AI systems for clients, I wanted to build <em>something useful for a wider public</em> — not for a single customer, but for anyone who needed it.
        </p>
        <p>
          I wrote the first version in my spare time in the summer of 2024 and launched it quietly that autumn. The premise was simple: there's a gap between how people naturally ask questions and how laws are written, and language models had finally gotten good enough to bridge it. The app grew almost entirely by word of mouth — to around <em>fifteen thousand users and a hundred and twenty thousand questions</em>, and a community of volunteer developers and domain experts who started contributing. I found myself doing all the things a founder does at once: marketing, business development, keeping the code up to date, talking to partners.
        </p>
        <p>
          The project picked up national coverage on television and online, and strong feedback from the legal community. It now runs pilots with the Romanian Bar Council, a city hall, and a foundation working on election information, with B2B partnerships funding the infrastructure. The public version is free and stays free. <em>Legal information shouldn't be a privilege of the people who can afford a lawyer.</em>
        </p>
      </div>
    </section>);

}

function StoryBook() {
  return (
    <section id="book" className="story-section story-section--row story-section--photo-right">
      <div className="story-row">
        <div className="story-row__col">
          <StoryAnchor>The future book.</StoryAnchor>
          <div className="story-prose story-prose--col">
            <p>
              Now I'm writing a book I think of as <em>an anthology of the technological progress that brought us to the AI systems of today</em>. I want to trace how a long line of brilliant ideas — in mathematics, in logic, in electronics — accumulated into the computers we now take for granted, and from there into the intelligent systems we're building on top of them. And in following that thread, I want to look honestly at the philosophical questions waiting for us at the edge of this new kind of technology.
            </p>
            <p>
              It's the slowest project I've taken on, and <em>the one I'm most certain matters</em>. I've spent close to a decade inside this field, including the years before ChatGPT when explaining a neural network to someone meant starting from scratch. I'd like to leave behind something that helps the next generation form correct intuitions about AI rather than inherited ones.
            </p>
          </div>
        </div>
        <figure className="story-row__photo">
          <div className="story-row__band">
            <img
              src="assets/writing-photo.webp"
              alt="Writing in a notebook at night."
              loading="lazy" />
            
          </div>
        </figure>
      </div>
    </section>);

}

function WorkPage({ copy }) {
  return (
    <div className="story-page">
      <div className="page">
        <StoryIntro />
        <StoryTimeline />
      </div>

      {/* Sections live OUTSIDE the .page wrapper so the photo bands
           can break out to full viewport width. Each section provides
           its own centered prose width. */}
      <main className="story-main" data-comment-anchor="aa14c4e25c-main-245-7">
        <StoryEarlyYears />
        <StoryFirstCareer />
        <StoryPivot />
        <StoryTeaching />
        <StoryAiAflat />
        <StoryBook />
      </main>
    </div>);

}

// Loaded after page-rest.jsx, so this WorkPage wins.
Object.assign(window, { WorkPage });