// Journey timeline — DreamIT story from 2011 (Green IT) to today.

function Journey() {
  const milestones = [
    { year: "2011", t: "Green IT founded", d: "Kashim Uddin Masum, then a young engineer in Dhaka, opens a two-desk software shop under the name Green IT. First client ships in six weeks." },
    { year: "2014", t: "First SaaS product", d: "Launch of an inventory + accounts platform for Bangladesh SMEs. 80+ paying businesses on the platform by year-end." },
    { year: "2017", t: "International expansion", d: "Studio opens delivery for clients in UAE, KSA, and Malaysia. Manpower & overseas-services vertical becomes a core pillar." },
    { year: "2019", t: "Mobile-first era", d: "Native iOS & Android team formed. First million-download consumer app shipped on Google Play." },
    { year: "2021", t: "Dream Group born", d: "Green IT rebrands and consolidates under Dream Group — adding Dream International, Workforce, and Tourism as sister concerns." },
    { year: "2023", t: "DreamIT Labs launches", d: "AI division spun up. 4UAI, Soulmate Go, Bondhon, Probashi Info, and MoneyBag all in active development." },
    { year: "2026", t: "240+ products. One team.", d: "Today: DreamIT is the technology arm of Dream Group — 11 in-house products, a 60-person team, and clients shipping across four continents." },
  ];
  return (
    <section className="s" id="journey">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow eyebrow-dot">Journey / 09</span>
            <h2>Fifteen years.<br/>One <span className="accent">obsession</span>.</h2>
          </div>
          <p className="lead">
            From a two-desk software shop in Dhaka to the technology engine of Dream Group —
            the long version of how DreamIT came to be.
          </p>
        </div>
        <div className="journey reveal">
          <div className="journey-line" />
          {milestones.map((m, i) => (
            <div className="journey-row" key={m.year}>
              <div className="journey-year">
                <span className="journey-dot" />
                <span className="journey-year-text">{m.year}</span>
              </div>
              <div className="journey-card">
                <div className="journey-num">{String(i+1).padStart(2,"0")} / 0{milestones.length}</div>
                <h3>{m.t}</h3>
                <p>{m.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Journey = Journey;