/* global React */

function About() {
  const pillars = [
    {
      num: "A.01",
      title: "Commercial leadership",
      blurb: "Eight years building and owning high-value commercial relationships at DSV — from strategic account management to distribution product architecture. P&L owner, contract architect, value-based pricing specialist. The kind of commercial leader who designs the structure, wins the deal, and is still there when operations need to deliver on it.",
      meta: ["P&L ownership", "Value-based pricing", "Strategic accounts"],
    },
    {
      num: "A.02",
      title: "Product thinking",
      blurb: "Three products shipped and operated — not designed and handed off. Podfy (proof-of-delivery SaaS for Benelux carriers), JustFit (AI adaptive training coach), and Lake Project (logistics commercial advisory). TU Delft analytical rigour applied at every scale: define the problem precisely, design modularly, govern rigorously.",
      meta: ["3 products live", "End-to-end ownership", "Modular design"],
    },
    {
      num: "A.03",
      title: "Operational excellence",
      blurb: "Ran multi-site logistics portfolios — 60,000 m², 150 FTE, SQAS- and PharmaQMS-certified pharmaceutical and chemical operations. Site P&L, 24/7 operations, regulatory credibility as a commercial lever. Drove 15% efficiency improvements and 30% reduction in labour-intensive processes through robotics and drone deployment in regulated environments.",
      meta: ["Multi-site P&L", "Pharma · chemical", "SQAS · PharmaQMS"],
    },
    {
      num: "A.04",
      title: "Military discipline",
      blurb: "Reserve Officer, Ministry of Defence (Feb 2026 – present). Structured leadership training, operational decision-making under pressure, and command discipline carried directly into civilian work. The military teaches you to lead clearly when the situation is unclear — a skill that transfers directly to cross-functional commercial and operational leadership.",
      meta: ["Reserve Officer", "Leadership under pressure", "Decision-making"],
    },
  ];

  return (
    <section className="av-about" id="about">
      <header className="av-about__head">
        <div>
          <div className="lp-section-eyebrow">
            <span className="lp-section-eyebrow__line" />
            <span className="lp-section-eyebrow__num">// 02</span>
            <span>Profile</span>
          </div>
          <h2 className="av-about__title">
            Four things<br />
            that define<br />
            <em>the work.</em>
          </h2>
        </div>
        <p className="av-about__lead">
          The discipline is consistent across every context — logistics operations, commercial product architecture, software development, or military leadership. Understand the problem analytically. Design something modular and governed. Lead the change cross-functionally. Leave something that runs without you.
        </p>
      </header>

      <ol className="av-about__list">
        {pillars.map((p) => (
          <li key={p.num} className="av-pillar">
            <div className="av-pillar__num">{p.num}</div>
            <div className="av-pillar__body">
              <h3 className="av-pillar__title">{p.title}</h3>
              <p className="av-pillar__blurb">{p.blurb}</p>
            </div>
            <ul className="av-pillar__meta">
              {p.meta.map((m, i) => (
                <li key={i}>
                  <span className="av-pillar__meta-dot" />
                  {m}
                </li>
              ))}
            </ul>
            <div className="av-pillar__chev" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                <line x1="5" y1="12" x2="19" y2="12" />
                <polyline points="13 6 19 12 13 18" />
              </svg>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

window.About = About;