/* global React, Icon, SectionHeader, Reveal */

const ROLES = [
  {
    period: "2025 — Present",
    duration: "Current",
    current: true,
    logo: "IS", logoVariant: "insyntive",
    role: "Founder",
    company: "Insyntive",
    title: "Digital systems studio · AI · automation · analytics",
    desc: "Building digital solutions focused on AI workflow systems, automation, analytics, and modern digital products for businesses and teams.",
    tags: ["AI workflows", "Automation", "Analytics", "Digital products", "Systems"],
  },
  {
    period: "2024 — Present",
    duration: "Current",
    current: true,
    logo: "ITM",
    role: "Section Lead",
    company: "PT Indo Tambangraya Megah Tbk",
    title: "Section of Management System & Business Process · ITM Group",
    desc: "Leading group-level management systems and business process standardization across ITM Group entities — from policy design to dashboard rollout.",
    tags: ["SAP S/4HANA", "BPM", "Management systems", "Dashboards", "Group rollout"],
  },
  {
    period: "2022 — 2024",
    duration: "2 yrs",
    logo: "AEI",
    role: "Unit Head",
    company: "PT Adaro Energy Indonesia Tbk",
    title: "System Development & Logistic Division",
    desc: "Headed system development for the Logistic Division — owning ERP integrations, fuel supply systems, and operational reporting across the group.",
    tags: ["SAP S/4HANA", "ERP", "FUMS Transport", "Logistics systems", "Reporting"],
  },
  {
    period: "2018 — 2022",
    duration: "4 yrs",
    logo: "PAMA",
    role: "Officer",
    company: "PT Pamapersada Nusantara",
    title: "System Development for Supply Management",
    desc: "Designed and rolled out internal systems for supply management — including the Fosto Oil Management System and Used Equipment platform.",
    tags: ["Ellipse 9", "Supply chain", "Mini ERP", "Fosto Oli", "Use It"],
  },
];

function Journey() {
  return (
    <section id="journey" className="section journey">
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="Professional journey"
            eyebrowIcon="route"
            title='From enterprise floors to <span class="grad">founder seat.</span>'
            subtitle="Eight years building data and systems inside Indonesia's largest energy and resources groups — now bringing that practice to teams as Insyntive."
          />
        </Reveal>

        <div className="timeline">
          {ROLES.map((r, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className={`tl-item ${r.current ? "tl-item--current" : ""}`}>
                <div className="tl-node" />
                <div className="tl-card">
                  <div className="tl-period">
                    <span className="tl-period-range">{r.period}</span>
                    {r.current
                      ? <span className="tl-period-badge">Current</span>
                      : <span className="tl-period-dur">{r.duration}</span>}
                  </div>
                  <div className="tl-body">
                    <div className="tl-head">
                      <div className={`tl-logo ${r.logoVariant ? "tl-logo--" + r.logoVariant : ""}`}>
                        {r.logo}
                      </div>
                      <div>
                        <div className="tl-role">{r.role}</div>
                        <h3 className="tl-company">{r.company}</h3>
                      </div>
                    </div>
                    <p className="tl-title" dangerouslySetInnerHTML={{ __html: r.title }} />
                    <p className="tl-desc">{r.desc}</p>
                    <div className="tl-tags">
                      {r.tags.map(t => <span className="pill" key={t}>{t}</span>)}
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Journey = Journey;