/* global React */
const { useState: useStateCareer } = React;

function Career() {
  const [expanded, setExpanded] = useStateCareer("fom");

  /*
   * Timeline spans Feb 2018 – present (8 yrs = 96 months base).
   * Range values are fractions of the 2018–2026 span for the visual bar.
   * Reserve Officer overlaps FOM on a separate track — shown as independent block.
   */
  const roles = [
    {
      id: "reserve",
      idLabel: "R.01",
      title: "Reserve Officer",
      company: "Ministerie van Defensie",
      type: "Part-time",
      dates: "Feb 2026 — Present",
      duration: "4 mos",
      location: "Netherlands · Hybrid",
      range: { from: 0.979, to: 1.0 },
      summary:
        "Serving as a Reserve Officer alongside a civilian career, completing initial officer training and developing structured military leadership skills.",
      bullets: [
        "Leadership and team management under structured command — translates directly into civilian cross-functional leadership.",
        "Resilience and decision-making under pressure: operating effectively when the situation is unclear and the stakes are high.",
        "Committed to serving alongside the active fleet and bringing specialist civilian expertise — logistics, commercial, and product — to the Reserve.",
      ],
    },
    {
      id: "fom",
      idLabel: "R.02",
      title: "Freight Operations Manager",
      company: "DSV — Global Transport & Logistics",
      type: "Full-time",
      dates: "Jan 2025 — Present",
      duration: "1 yr 5 mos",
      location: "Moerdijk, North Brabant, NL · On-site",
      range: { from: 0.865, to: 1.0 },
      summary:
        "Commercial and product accountability for DSV Contract Logistics' distribution proposition. Repositioning freight from an operational cost line into a defined, modular, value-priced product portfolio serving B2B and B2C demand.",
      bullets: [
        "Repositioned the commercial model — moved freight from bespoke per-customer setups and cost-plus pricing toward a modular product catalogue priced on delivered value.",
        "Product governance: established the governance framework, catalogue definition, change control, pricing discipline, and service KPIs that allow freight propositions to scale without eroding margin or service consistency.",
        "Personally led solution design conversations with customer leadership, translating network, service, and sustainability ambitions into commercially defensible distribution architectures.",
        "Cross-functional commercial leadership across carrier partners, warehouse operations, IT, and commercial — none of which report into the role.",
        "Strategic positioning: anticipating the consolidation of parcel and pallet flows and the customer shift toward outcome-based contracting.",
      ],
    },
    {
      id: "kam",
      idLabel: "R.03",
      title: "Key Account Manager",
      company: "DSV — Global Transport & Logistics",
      type: "Full-time",
      dates: "Jan 2023 — Feb 2025",
      duration: "2 yrs 2 mos",
      location: "Moerdijk, North Brabant, NL · On-site",
      range: { from: 0.615, to: 0.875 },
      summary:
        "Full commercial ownership of DSV's strategic regional customer portfolio. Single point of accountability for the customer relationship, the contract, the commercial structure, and the operational outcome — the closest equivalent to a P&L owner inside the regional commercial organisation.",
      bullets: [
        "Portfolio ownership. Owned the commercial relationship and contracted scope for the region's strategic accounts, including the largest by revenue. Single decision-maker on pricing, scope, renewals, and escalations.",
        "Repositioned customer relationships from transactional to strategic. Restructured engagement with the largest accounts around their long-term business agenda — sustainability, network resilience, cost-to-serve — turning annual renegotiations into multi-year partnerships.",
        "Creative commercial structuring as a competitive weapon. Designed and won contract structures (gain-share, tiered service, value-based pricing) that solved customer problems competitors couldn't price for.",
        "Led innovation as a commercial lever, not a cost. Brought sustainability and technology investments to the commercial table as differentiators — converting them into incremental scope and customer commitment.",
        "Mobilised operations, finance, IT, and senior leadership — none reporting to the role — to deliver against commercial commitments to strategic customers.",
        "Trusted counterpart at customer C-suite and procurement leadership level, navigating decisions that determined multi-year contract direction.",
      ],
    },
    {
      id: "cm",
      idLabel: "R.04",
      title: "Contract Manager",
      company: "DSV — Global Transport & Logistics",
      type: "Full-time",
      dates: "May 2022 — Jul 2023",
      duration: "1 yr 3 mos",
      location: "Tholen, Zeeland, NL · On-site",
      range: { from: 0.531, to: 0.677 },
      summary:
        "Commercial and operational accountability for a multi-site logistics portfolio — 60,000 m², 150 FTE — serving high-value pharmaceutical and chemical customers under SQAS and PharmaQMS-certified operations.",
      bullets: [
        "P&L and contract authority: final decision-maker on contract negotiation, scope changes, pricing discipline, and escalations for a regulated, audit-intensive customer base.",
        "Led the region's largest commercial relationship. Primary commercial counterpart for the largest regional handling account; negotiated contract expansions that grew scope and share-of-wallet while restructuring economics in DSV's favour.",
        "15% efficiency improvement and a material reduction in compliance issues across the regulated pharma and chemical portfolio.",
        "Deployed cleaning robotics and drone-based inventory systems in a regulated pharmaceutical and chemical environment — 30% reduction in labour-intensive processes without compromising SQAS or PharmaQMS standing.",
        "Built the leadership layer across multiple locations, developing the bench that allowed the portfolio to absorb growth and complexity without commercial slippage.",
        "Maintained SQAS and PharmaQMS certifications and surpassed audit benchmarks — the foundation that makes DSV credible to customers whose own business licence depends on supplier rigour.",
      ],
    },
    {
      id: "om",
      idLabel: "R.05",
      title: "Operations Manager",
      company: "DSV — Global Transport & Logistics",
      type: "Full-time",
      dates: "Sep 2019 — May 2022",
      duration: "2 yrs 9 mos",
      location: "Bergen op Zoom, North Brabant, NL · On-site",
      range: { from: 0.198, to: 0.531 },
      summary:
        "Site-level commercial and operational leadership of a 25,000 m² chemical production logistics site running 24/7 with 80 FTE — site P&L, the customer relationship, and the leadership team.",
      bullets: [
        "Site P&L ownership. Owned the financial and service performance of a complex, safety-critical operation serving a strategic chemical customer.",
        "Day-to-day senior interface to the customer's site and supply chain leadership, translating changing requirements into operational adjustments and contractual conversations.",
        "Drove sustained improvements in productivity, safety, and quality across a 24/7 operation — the foundation that allows a logistics business to promise outcomes and deliver them.",
        "Decided to introduce the first fully-electric chassis-cab box truck for on-site logistics — an operational choice that became a public-facing sustainability story and a differentiator with the customer.",
        "Leadership of leaders: led 80 FTE across shifts through a layer of shift and team leads, developing the leadership pipeline that allowed the site to scale.",
      ],
    },
    {
      id: "mt",
      idLabel: "R.06",
      title: "Management Trainee — Product Development",
      company: "DSV — Global Transport & Logistics",
      type: "Full-time",
      dates: "Sep 2018 — Aug 2019",
      duration: "1 yr",
      location: "Moerdijk, North Brabant, NL",
      range: { from: 0.073, to: 0.188 },
      summary:
        "Specialised management traineeship focused on product development in warehouse automation and supply chain optimisation.",
      bullets: [
        "Development of warehouse robot concepts and supply chain operation optimisation in partnership with Smart Robotics and TU Eindhoven.",
        "Track-and-trace development throughout the full supply chain.",
        "Set up 3D printing as a logistics-support product for customers.",
      ],
    },
    {
      id: "intern",
      idLabel: "R.07",
      title: "Graduation Internship",
      company: "DSV — Global Transport & Logistics",
      type: "Internship",
      dates: "Feb 2018 — Sep 2018",
      duration: "8 mos",
      location: "Moerdijk, North Brabant, NL",
      range: { from: 0.0, to: 0.073 },
      summary:
        "Master's thesis research into the inbound container flow between the Port of Rotterdam and Moerdijk — redesign of a reliable and sustainable inbound control tower solution.",
      bullets: [
        "Research and design of the inbound control tower solution to prevent supply chain disruptions.",
        "Redesign of the reliable and sustainable inbound process — Port to shelf.",
        "Via TU Delft MSc Systems Engineering, Policy Analysis & Management.",
      ],
    },
  ];

  const timelineYears = ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026"];

  const earlierRoles = [
    {
      period: "2017 – 2021",
      title: "Publisher",
      org: "Van Haren Publishing",
      note: "Freelance publisher via Lake Project. Technical and logistics subject matter.",
    },
    {
      period: "2013 – 2018",
      title: "Technical Support Specialist",
      org: "Science Centre Delft · TU Delft",
      note: "Maintenance and design of exhibits. Event support and education. 5 yrs 8 mos alongside studies.",
    },
    {
      period: "Feb – May 2017",
      title: "Advisor Demand (Intern)",
      org: "PostNL",
      note: "Research into packaging flows of trolleys, bins, and bags in the letter department. Proposed new packaging flows.",
    },
    {
      period: "2015 – 2016",
      title: "European Business Tour",
      org: "Dispuut Verkeer · TU Delft",
      note: "Organised the European Business Tour for 30 MSc students. Visits to Airbus, Port of Hamburg, Kühne & Nagel, and others.",
    },
    {
      period: "2012 – 2014",
      title: "Board & Committee Member",
      org: "BOSS Real Estate & Housing · TU Delft",
      note: "Board member (activities), then member of the Business Tour Committee. Organised excursions to real estate companies for MSc students.",
    },
    {
      period: "2009 – 2010",
      title: "Technische Commissie",
      org: "Delftsche Studenten Aeroclub",
      note: "Responsible for planning, operations, and maintenance of rolling stock.",
    },
  ];

  return (
    <section className="av-career" id="career">
      <div className="av-career__inner">

        <header className="av-career__head">
          <div className="lp-section-eyebrow">
            <span className="lp-section-eyebrow__line" />
            <span className="lp-section-eyebrow__num">// 03</span>
            <span>Career</span>
          </div>
          <h2 className="av-career__title">
            Eight years.<br />
            One company.<br />
            <em>Every layer.</em>
          </h2>
          <p className="av-career__lead">
            TU Delft engineering background. Joined DSV as a graduating intern in 2018 and built across the full operational and commercial width — site management, regulated environments, strategic accounts, and distribution product design. Three products built and operated in parallel. Reserve Officer from 2026.
          </p>

          <div className="av-career__meta">
            <div>
              <span className="t-micro av-career__meta-label">Tenure at DSV</span>
              <span className="av-career__meta-value">8 yrs 4 mos</span>
            </div>
            <div>
              <span className="t-micro av-career__meta-label">Roles held</span>
              <span className="av-career__meta-value">7 across DSV</span>
            </div>
            <div>
              <span className="t-micro av-career__meta-label">Military</span>
              <span className="av-career__meta-value">Reserve Officer · Active</span>
            </div>
            <div>
              <span className="t-micro av-career__meta-label">Education</span>
              <span className="av-career__meta-value">TU Delft · MSc Engineering</span>
            </div>
          </div>
        </header>

        <div className="av-career__timeline">
          <div className="av-career__timeline-label">
            <span>// Tenure ribbon 2018 – 2026 · click a block to expand the role</span>
            <span>2018 — 2026</span>
          </div>
          <div className="av-career__timeline-bar">
            {roles.map((r) => {
              const left = r.range.from * 100;
              const width = (r.range.to - r.range.from) * 100;
              return (
                <button
                  key={r.id}
                  className={`av-career__timeline-block ${expanded === r.id ? "is-active" : ""}`}
                  style={{ left: `${left}%`, width: `${width}%` }}
                  onClick={() => setExpanded(r.id)}
                  title={r.title}
                >
                  {width > 6 ? r.idLabel : ""}
                </button>
              );
            })}
            {timelineYears.map((y, i) => (
              <React.Fragment key={y}>
                <div className="av-career__timeline-tick" style={{ left: `${(i / (timelineYears.length - 1)) * 100}%` }} />
                <div className="av-career__timeline-ticklabel" style={{ left: `${(i / (timelineYears.length - 1)) * 100}%` }}>
                  {y}
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>

        <ol className="av-career__list">
          {roles.map((r) => {
            const isOpen = expanded === r.id;
            return (
              <li key={r.id} className={`av-role ${isOpen ? "is-open" : ""}`}>
                <button
                  className="av-role__head"
                  onClick={() => setExpanded(isOpen ? null : r.id)}
                  aria-expanded={isOpen}
                >
                  <div className="av-role__id">{r.idLabel}</div>
                  <div className="av-role__head-main">
                    <div className="av-role__title">{r.title}</div>
                    <div className="av-role__company">{r.company}</div>
                  </div>
                  <div className="av-role__head-meta">
                    <div className="av-role__dates">{r.dates}</div>
                    <div className="av-role__duration">{r.duration}</div>
                  </div>
                  <div className="av-role__chev" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="6 9 12 15 18 9" />
                    </svg>
                  </div>
                </button>

                {isOpen && (
                  <div className="av-role__body">
                    <div className="av-role__loc">▸ {r.type} · {r.location}</div>
                    <p className="av-role__summary">{r.summary}</p>
                    <ul className="av-role__bullets">
                      {r.bullets.map((b, i) => (
                        <li key={i}>{b}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </li>
            );
          })}
        </ol>

        <div className="av-career__divider">Earlier experience</div>

        <div className="av-career__early">
          {earlierRoles.map((e, i) => (
            <div key={i} className="av-early-card">
              <div className="av-early-card__period">{e.period}</div>
              <h3 className="av-early-card__title">{e.title}</h3>
              <div className="av-early-card__org">{e.org}</div>
              <p className="av-early-card__note">{e.note}</p>
            </div>
          ))}
        </div>

        <div className="av-career__cta">
          <a href="/resume/alexander-van-der-plas-cv.pdf" className="btn btn--ghost" download>
            Download CV ↓
          </a>
          <a
            href="https://www.linkedin.com/in/alexandervanderplas"
            className="av-career__linkedin"
            target="_blank"
            rel="noopener noreferrer"
          >
            ↗ View full profile on LinkedIn
          </a>
        </div>

      </div>
    </section>
  );
}

window.Career = Career;