// Our Journey — vertical editorial timeline with per-item scroll reveals.
function HpJourney({ bg }) {
  const [sectionRef, revealed] = window.useReveal({ threshold: 0.05 });

  const milestones = [
    {
      year: "Sep 2021",
      title: "E-commerce, India.",
      body: "Started selling on Amazon and Flipkart. First lessons in customer psychology, listing economics, and what makes a product actually move at retail scale.",
      tag: "Origin",
    },
    {
      year: "2022",
      title: "Flipkart Gold Seller.",
      body: "Hit Gold tier on Flipkart while quietly researching the affiliate marketing space — the unit economics looked nothing like e-commerce.",
      tag: "Milestone",
    },
    {
      year: "2023",
      title: "ZillionData Marketing LLP.",
      body: "Formed a dedicated affiliate entity in India. Started scaling paid media across Google, Meta, YouTube and native — Nutra and digital products first.",
      tag: "Founded",
    },
    {
      year: "2024",
      title: "ClickBank Platinum — 1st.",
      body: "First Platinum award at ClickBank. The Nutra book of work earned it.",
      tag: "Award",
    },
    {
      year: "2025",
      title: "ClickBank Platinum — 2nd.",
      body: "Second Platinum, back-to-back. Crossed $2M+ in tested ad spend across the studio.",
      tag: "Award",
    },
    {
      year: "2026",
      title: "Founded Scale Media LLC.",
      body: "As US and European offer owners came on board, currency conversion became friction. Registered a US replica of ZillionData in Wyoming — same operators, same playbook, now USD-native.",
      tag: "Founded",
    },
    {
      year: "2026",
      title: "Digistore24 Super Affiliate.",
      body: "Became Super Affiliate of Digistore24 and attended super affiliate event in Brazil. Expanded into Lead Generation — Home Improvement, Auto Insurance, Health Insurance and Financial.",
      tag: "Award",
    },
  ];

  return (
    <section id="journey" ref={sectionRef} className="hp-section" style={{ background: bg, borderTop: "1px solid var(--rule)" }}>
      <div className="hp-container">
        <div className={"hp-eyebrow-row fade-up " + (revealed ? "is-revealed" : "")}>
          <span className="eyebrow" style={{ borderBottom: "1px solid var(--coral)", paddingBottom: 2 }}>
            Our journey
          </span>
          <span className="eyebrow hp-hide-sm">Sep 2021 → today · India to Wyoming</span>
        </div>

        <h2
          className={"fade-up " + (revealed ? "is-revealed" : "")}
          style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: "clamp(32px, 5vw, 64px)", lineHeight: 1.02,
            letterSpacing: "-0.045em", margin: 0, color: "var(--ink)", maxWidth: "20ch",
            marginBottom: 64, "--hp-delay": "100ms",
          }}>
          From a Flipkart shop in India{" "}
          <span style={{ fontWeight: 200 }}>to a Wyoming-registered media-buying studio.</span>
        </h2>

        <ol className="hp-timeline">
          {milestones.map((m, i) => (
            <TimelineItem key={i} m={m} index={i} />
          ))}
        </ol>
      </div>
    </section>
  );
}

function TimelineItem({ m, index }) {
  const [ref, revealed] = window.useReveal({ threshold: 0.2 });
  return (
    <li
      ref={ref}
      className={"hp-tl-item fade-up " + (revealed ? "is-revealed" : "")}
      style={{ "--hp-delay": (index * 60) + "ms" }}
    >
      <div className="hp-tl-rail">
        <span className="hp-tl-dot" aria-hidden="true" />
      </div>
      <div className="hp-tl-meta">
        <span className="eyebrow">{m.year}</span>
        <span className="hp-tl-tag">{m.tag}</span>
      </div>
      <div className="hp-tl-body">
        <h3 className="hp-tl-title">{m.title}</h3>
        <p className="hp-tl-text">{m.body}</p>
      </div>
    </li>
  );
}

window.HpJourney = HpJourney;