/* global React */
const { useState, useEffect } = React;

/* ============================================================
   TIMELINE / EXPERIENCE
   Companies are top-level; phases (e.g. multiple roles at one
   company) nest as sub-rows inside the expanded view.
   ============================================================ */
const EXPERIENCE = [
{
  id: "metso",
  period: "06.2024 — Now",
  co: "Metso",
  loc: "Krakow, Poland",
  role: "Senior Software Engineer & Product Owner",
  detailMeta: "Industrial Digital Twin · 3 phases",
  summary:
  <p>
        Joined as a <strong>Full-stack Developer</strong> on a digital-twin platform for the minerals
        processing industry; promoted into <strong>Feature Owner</strong> and now a dual
        <strong> Senior Software Engineer + Product Owner</strong> role. Three roles, one mission.
      </p>,

  tags: [".NET 9", "C# 13", "React 18", "Microsoft Orleans", "Azure", "Terraform", "DataDog", "Digital Twin", "AI-native"],
  now: true,
  phases: [
  {
    period: "Feb 2026 — Now",
    duration: "4 mos",
    role: "Senior Software Engineer & Product Owner",
    meta: "Dual role · NOW",
    now: true,
    body:
    <>
            <p>
              Acting in a <strong>dual role as Product Owner</strong> while remaining hands-on as a Senior
              Software Engineer. Leading end-to-end development and delivery of the digital-twin solution
              with <strong>.NET, React, and Microsoft Azure</strong>.
            </p>
            <p>
              Driving an <strong>AI-native development approach</strong> — embedding intelligent capabilities
              for advanced analytics, automation, and data-driven decision-making. Defining high-level
              architecture, shaping technical direction, and bridging engineering with product through
              roadmap planning, requirements, and stakeholder collaboration.
            </p>
          </>

  },
  {
    period: "Dec 2025 — Now",
    duration: "6 mos",
    role: "Feature Owner",
    meta: "Concurrent",
    body:
    <>
            <p>
              Feature Owner of the <strong>Digital Twin product</strong>. Managing a development team,
              communicating with business and stakeholders, and creating development plans and feature
              roadmaps aligned to <strong>quarterly objectives</strong>.
            </p>
            <p>
              Backlog ownership, scope definition, requirements clarification. Coordinating delivery,
              presenting <strong>Digital Twin demonstrations</strong>, and ensuring alignment with Metso's
              product strategy and digitalization goals.
            </p>
          </>

  },
  {
    period: "06.2024 — 12.2025",
    duration: "1.5 yrs",
    role: "Full-stack Software Developer",
    meta: "IC track",
    body:
    <>
            <p>
              Building distributed services in <strong>C# 13 / .NET 9</strong> with <strong>Microsoft
              Orleans</strong>, shaping the <strong>React 18</strong> UI on top, and migrating legacy VM
              workloads to <strong>Azure</strong> with Terraform-managed infrastructure.
            </p>
            <p>
              Stood up service & infra observability with <strong>DataDog</strong>, set up CI/CD on
              <strong> GitHub Actions</strong>, and contributed to architectural decisions across the squad.
            </p>
          </>

  }]

},
{
  id: "siemens",
  period: "06.2022 — 05.2024",
  co: "Siemens DISW",
  loc: "Katowice, Poland",
  role: ".NET Developer",
  detailMeta: "Enterprise software · AWS",
  body:
  <>
        <p>
          Built back-end APIs in <strong>C# / .NET</strong> for industry-leading EDA tooling. Applied
          <strong> functional C#</strong> for scalable solutions and integrated multiple third-party services.
        </p>
        <p>
          Owned <strong>GitLab CI/CD</strong> pipelines and managed cloud infrastructure on <strong>AWS</strong>
          with IaC. Drove security & compliance, set up service observability, and participated in the full
          lifecycle of product development.
        </p>
      </>,

  tags: [".NET", "C# Functional", "GitLab CI/CD", "AWS", "IaC", "Observability", "Security & compliance"]
},
{
  id: "autocab",
  period: "04.2020 — 05.2022",
  co: "Autocab Ltd (an Uber company)",
  loc: "Stockport, England",
  role: "Software Developer",
  detailMeta: "Mobility platform · .NET + Angular",
  body:
  <>
        <p>
          Developed REST APIs in <strong>ASP.NET / ASP.NET Core</strong> and integrated them into
          <strong> Angular</strong> UIs. Designed and managed <strong>MS SQL and MongoDB</strong> databases,
          maintaining a long tail of legacy ASP.NET projects alongside greenfield work.
        </p>
        <p>
          Built server logic for a new <strong>food-delivery product</strong> for taxi companies, owned
          production deployments, and authored technical documentation for the platform's APIs.
        </p>
      </>,

  tags: ["ASP.NET Core", "Angular", "MS SQL", "MongoDB", "Legacy modernisation", "Production deploys"]
},
{
  id: "csi",
  period: "09.2019 — 04.2020",
  co: "CSI Media",
  loc: "Crewe, England",
  role: "Junior Web Developer",
  detailMeta: "Agency · Microservices",
  body:
  <>
        <p>
          Built web applications in <strong>ASP.NET / ASP.NET Core</strong>, maintained and extended
          microservices, and worked across <strong>MVC and MVVM</strong> architectural patterns with several
          ORM frameworks.
        </p>
      </>,

  tags: ["ASP.NET", "Microservices", "MVC", "MVVM", "ORMs"]
},
{
  id: "tribal",
  period: "02.2019 — 07.2019",
  co: "Tribal Group",
  loc: "Swansea, Wales",
  role: "Support Consultant",
  detailMeta: "Dynamics 365 · First role",
  body:
  <>
        <p>
          Provided support to <strong>Dynamics 365</strong> customers and deployed software to customer sites —
          first taste of professional software delivery alongside finishing my BSc.
        </p>
      </>,

  tags: ["Dynamics 365", "Customer support", "Deployments"]
}];


function PhaseRow({ phase, idx, total, isOpen, onToggle }) {
  return (
    <div className={`tl-phase ${isOpen ? "open" : ""}`} onClick={(e) => {e.stopPropagation();onToggle(idx);}}>
      <div className="tl-phase-rail" aria-hidden="true">
        <div className={`tl-phase-dot ${phase.now ? "now" : ""}`}></div>
        {idx < total - 1 && <div className="tl-phase-line"></div>}
      </div>
      <div className="tl-phase-main">
        <div className="tl-phase-head">
          <div>
            <div className="tl-phase-period">
              {phase.period} <span className="dur">· {phase.duration}</span>
            </div>
            <h4 className="tl-phase-role">{phase.role}</h4>
          </div>
          <div className="tl-phase-meta">{phase.meta}</div>
        </div>
        <div className="tl-phase-body">
          {phase.body}
        </div>
      </div>
    </div>);

}

function TimelineRow({ entry, open, onToggle }) {
  // All phases open by default — recruiters/hiring-managers can scan everything at once.
  const [openPhases, setOpenPhases] = useState(
    () => new Set(entry.phases ? entry.phases.map((_, i) => i) : [])
  );
  const togglePhase = (i) => {
    setOpenPhases((prev) => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i);else next.add(i);
      return next;
    });
  };
  const hasPhases = !!entry.phases;
  return (
    <div className={`tl-row ${open ? "open" : ""} ${hasPhases ? "has-phases" : ""}`} onClick={onToggle} role="button" tabIndex={0}
    onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();onToggle();}}}>
      <div className="tl-period">
        {entry.period}
        {entry.now && <span className="now-tag">NOW</span>}
        {hasPhases && <div className="tl-period-sub">{entry.phases.length} roles</div>}
      </div>
      <div className="tl-main">
        <h3 className="tl-role">{entry.role}</h3>
        <div className="tl-co">
          <strong>{entry.co}</strong>
          <span className="dot">·</span>
          {entry.loc}
        </div>
      </div>
      <div className="tl-toggle" aria-hidden="true">+</div>

      <div className="tl-detail">
        <div className="tl-detail-meta">{entry.detailMeta}</div>
        <div className="tl-detail-body">
          {entry.summary || entry.body}
          {hasPhases &&
          <div className="tl-phases">
              {entry.phases.map((p, i) =>
            <PhaseRow
              key={i}
              phase={p}
              idx={i}
              total={entry.phases.length}
              isOpen={openPhases.has(i)}
              onToggle={togglePhase} />

            )}
            </div>
          }
          <div className="tl-tags">
            {entry.tags.map((t) => <span key={t} className="tl-tag">{t}</span>)}
          </div>
        </div>
      </div>
    </div>);

}

function TimelineSection() {
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <section id="experience" className="section">
      <Reveal as="div" className="section-head">
        <div className="section-num">02 / Work</div>
        <div>
          <h2 className="section-title">
            A career of shipping, <em>credibly.</em>
          </h2>
          <p className="section-sub">
            Click any row to expand. Companies with multiple roles unfold as a sub-timeline.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="timeline">
          {EXPERIENCE.map((e, i) =>
          <TimelineRow
            key={e.id}
            entry={e}
            open={openIdx === i}
            onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />

          )}
        </div>
      </Reveal>
    </section>);

}

/* ============================================================
   EDUCATION  ·  British universities
   ============================================================ */
const SCHOOLS = [
{
  id: "manchester",
  wordmark: "MANCHESTER",
  sub: "The University of",
  crestText: "UoM",
  color: "#6A2C91", // Eminence purple — official Manchester brand
  colorSoft: "rgba(106, 44, 145, 0.14)",
  motto: "Cognitio · Sapientia · Humanitas",
  city: "Manchester · England",
  flag: "🏴󠁧󠁢󠁥󠁮󠁧󠁿",
  degree: "MSc — Advanced Computer Science",
  classification: "Distinction",
  years: "2019 — 2020",
  russell: true,
  bullets: [
  "Russell Group · ranked top-30 globally",
  "Thesis: IoT data pipelines + Natural Language interfaces",
  "Distributed systems · Machine learning · HCI"]

},
{
  id: "swansea",
  wordmark: "SWANSEA",
  wordmark2: "UNIVERSITY",
  sub: "Prifysgol Abertawe",
  crestText: "SU",
  color: "#9E1B32", // Swansea / Welsh red
  colorSoft: "rgba(158, 27, 50, 0.14)",
  motto: "Gweithio dros Wybodaeth · Working for Knowledge",
  city: "Swansea · Wales",
  flag: "🏴󠁧󠁢󠁷󠁬󠁳󠁿",
  degree: "BSc (Hons) — Software Engineering",
  classification: "First Class Honours",
  years: "2016 — 2019",
  russell: false,
  bullets: [
  "Founded 1920 · cornerstone laid by King George V",
  "Thesis: OpenCV-based document scanner",
  "Software architecture · Algorithms · Web systems"]

}];


function EducationSection() {
  return (
    <section id="education" className="section edu-section">
      <Reveal as="div" className="section-head">
        <div className="section-num">03 / Education</div>
        <div>
          <h2 className="section-title">
            British-university <em>trained.</em>
          </h2>
          <p className="section-sub">
            Five years on UK campuses — first in Wales, then a Russell-Group MSc with Distinction in Manchester.
            British academic rigour underwrites every line of code I ship.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="edu-banner">
          <div className="edu-banner-rule" aria-hidden="true"></div>
          <div className="edu-banner-text">
            <span className="edu-banner-flag" aria-hidden="true">🇬🇧</span>
            <span>Educated in the United Kingdom · 2016 – 2020</span>
          </div>
          <div className="edu-banner-rule" aria-hidden="true"></div>
        </div>

        <div className="edu-grid">
          {SCHOOLS.map((s) =>
          <div
            key={s.id}
            className="edu-card"
            style={{
              "--uni": s.color,
              "--uni-soft": s.colorSoft
            }}>
            
              <div className="edu-card-head">
                <div className="edu-crest" aria-hidden="true">
                  <div className="edu-crest-shield">
                    <span>{s.crestText}</span>
                  </div>
                  <div className="edu-crest-rule"></div>
                </div>
                <div className="edu-meta">
                  <div className="edu-years">{s.years}</div>
                  {s.russell && <div className="edu-russell">RUSSELL GROUP</div>}
                </div>
              </div>

              <div className="edu-wordmark">
                <div className="edu-sub">{s.sub}</div>
                <div className="edu-name">{s.wordmark}</div>
                {s.wordmark2 && <div className="edu-name-2">{s.wordmark2}</div>}
                <div className="edu-motto">{s.motto}</div>
              </div>

              <div className="edu-city">
                <span className="edu-flag">{s.flag}</span>
                {s.city}
              </div>

              <div className="edu-degree">
                <div className="edu-degree-name">{s.degree}</div>
                <div className="edu-degree-class">
                  <span className="edu-class-pip"></span>
                  {s.classification}
                </div>
              </div>

              <ul className="edu-bullets">
                {s.bullets.map((b, i) =>
              <li key={i}>{b}</li>
              )}
              </ul>
            </div>
          )}
        </div>

        <div className="cert-block">
          <div className="cert-head">
            <div className="cert-head-label">Certifications</div>
            <div className="cert-head-rule" aria-hidden="true"></div>
            <div className="cert-head-meta">Microsoft · 2025 — 2026</div>
          </div>
          <div className="cert-grid">
            {[
              { title: "Microsoft Certified: Azure Fundamentals", code: "AZ-900", issuer: "Microsoft", issued: "Jan 2026" },
              { title: "Essentials with Azure Fundamentals", code: "Microsoft Learn", issuer: "Microsoft", issued: "Nov 2025" }
            ].map((c, i) => (
              <div key={i} className="cert-card">
                <div className="cert-mark" aria-hidden="true">
                  <div className="cert-mark-tile cert-tile-r"></div>
                  <div className="cert-mark-tile cert-tile-g"></div>
                  <div className="cert-mark-tile cert-tile-b"></div>
                  <div className="cert-mark-tile cert-tile-y"></div>
                </div>
                <div className="cert-body">
                  <div className="cert-issuer">{c.issuer}</div>
                  <div className="cert-title">{c.title}</div>
                  <div className="cert-meta">
                    <span className="cert-code">{c.code}</span>
                    <span className="cert-dot">·</span>
                    <span>Issued {c.issued}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </section>);

}

/* ============================================================
   ABOUT
   ============================================================ */
function AboutSection() {
  return (
    <section id="about" className="section">
      <Reveal as="div" className="section-head">
        <div className="section-num">04 / About</div>
        <div>
          <h2 className="section-title">
            Two roles, <em>one mindset.</em>
          </h2>
        </div>
      </Reveal>

      <Reveal>
        <div className="about-grid">
          <div>
            <p className="about-text">
              I'm <span className="accent">Marcin Kolber</span> — a .NET & React engineer who builds the
              thing and owns the why. British-universities graduate (MSc Distinction, Manchester) now
              shipping distributed systems out of Kraków.
            </p>
            <p className="about-text">
              I split my week between writing <span className="accent">.NET and React</span> and being the
              Product Owner who decides what gets written. Same person on both sides of the refinement
              table — fewer translation losses, sharper backlog.
            </p>
            <p className="about-text">
              I'm at my best on small, senior teams shipping into a real domain — industrial IoT, mobility,
              EDA, anything where correctness matters and stakeholders are demanding. I prefer
              written-first comms, short feedback loops, and roadmaps that survive contact with reality.
            </p>
          </div>

          <div className="about-side">
            <div className="about-portrait">
              <img src="assets/portrait.jpg" alt="Marcin Kolber" loading="lazy" />
              <div className="about-portrait-tag">
                <span className="dot"></span>
                <span>MARCIN KOLBER · 2026</span>
              </div>
            </div>
            <div className="about-card">
              <div className="about-card-title">Quick facts</div>
              <ul className="about-card-list">
                <li><span>Based</span><span className="v">Kraków, Poland</span></li>
                <li><span>Time-zone</span><span className="v">CET / UTC+1</span></li>
                <li><span>Languages</span><span className="v">PL (native) · EN (C2)</span></li>
                <li><span>Modes</span><span className="v">On-site · Hybrid · Remote</span></li>
                <li><span>Email</span><span className="v">marcin.kolber1@gmail.com</span></li>
              </ul>
            </div>
          </div>
        </div>
      </Reveal>
    </section>);

}

/* ============================================================
   NOW
   ============================================================ */
function NowSection() {
  const items = [
  {
    tag: "Exploring",
    title: "Probabilistic, data-driven selection",
    body: "Designing and implementing a probabilistic, data-driven selection mechanism — moving the platform from deterministic rules to evidence-weighted decisions."
  },
  {
    tag: "Driving",
    title: "AI tools across the software team",
    body: "Embedding AI-assisted development into the team's daily loop — Copilot, Claude, AI integration tools — codifying patterns, reviewing outputs, keeping judgement human."
  },
  {
    tag: "Improving",
    title: "Digital twin & simulation platform",
    body: "Constant improvement and enhancement of the digital-twin and simulation platform — performance, accuracy, scalability, and the developer experience around it."
  }];

  return (
    <section id="now" className="section">
      <Reveal as="div" className="section-head">
        <div className="section-num">05 / Now</div>
        <div>
          <h2 className="section-title">
            What I'm <em>doing this quarter.</em>
          </h2>
          <p className="section-sub">Updated May 2026</p>
        </div>
      </Reveal>

      <Reveal>
        <div className="now-grid">
          {items.map((it, i) =>
          <div key={i} className="now-card">
              <div className="now-card-tag">
                <span className="live"></span>{it.tag}
              </div>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </div>
          )}
        </div>
      </Reveal>
    </section>);

}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer id="contact" className="foot">
      <h2 className="foot-mark">
        Always <em>learning,</em><br />always <em>growing.</em>
      </h2>
      <div>
        <div className="foot-links">
          <a href="mailto:marcin.kolber1@gmail.com">marcin.kolber1@gmail.com</a>
          <a href="tel:+48695854423">+48 695 854 423</a>
          <a href="https://github.com/marcinkolber" target="_blank" rel="noreferrer">@marcinkolber ↗</a>
        </div>
        <div className="foot-meta">
          © 2026 Marcin Kolber<br />
          Hand-built · No frameworks were harmed
        </div>
      </div>
    </footer>);

}

Object.assign(window, { TimelineSection, EducationSection, AboutSection, NowSection, Footer });