/* global React, Reveal, ArrowGlyph */

// =========================================================
// HONEST PATH — the part most coaches leave out.
// Sits between "You've said some version of this" and the origin story.
// Holds three lines that must stay verbatim.
// =========================================================
function HonestPath({ onBook }) {
  const rows = [
    {
      mark: "$0",
      tag: "where it started",
      myth: <>&ldquo;Start with nothing and scale to six figures in weeks.&rdquo;</>,
      // verbatim: "I started with $0 and begged and borrowed"
      text: <>I started with $0 and begged and borrowed to place that first order. <b>No safety net, no rich uncle</b> &mdash; just a small bet I couldn&rsquo;t really afford to lose.</>,
    },
    {
      mark: "3 yrs",
      tag: "the real timeline",
      myth: <>&ldquo;Quit your job in your first 90 days.&rdquo;</>,
      // verbatim: "it took me three years to replace my income"
      text: <>It took me three years to replace my income. Not three weeks, not one lucky product &mdash; <b>three years of small, boring, repeatable moves.</b></>,
    },
    {
      mark: "$10K",
      tag: "the part nobody mentions",
      myth: <>&ldquo;Hit a $10K month and you&rsquo;re finally free.&rdquo;</>,
      // verbatim: "$10K month… still wasn't freedom yet"
      text: <>Even my first $10K month&hellip; still wasn&rsquo;t freedom. The money was real, but the business needed me in every chair. <b>Freedom came later</b> &mdash; when the system ran without me.</>,
    },
  ];

  return (
    <section id="honest" className="section hp" data-screen-label="Honest path">
      <div className="container">
        <Reveal className="hp__head">
          <div className="eyebrow">The honest path</div>
          <h2 className="display hp__title">
            The honest way out is slower than they sell you.
            <em> It&rsquo;s also the only one that lasts.</em>
          </h2>
          <p className="hp__intro">
            If you&rsquo;ve been burned by someone promising a shortcut, I get it &mdash;
            you&rsquo;re not naive, the pitch was just good. Here&rsquo;s every promise
            next to <em>what actually happened.</em>
          </p>
        </Reveal>

        <div className="hp__track">
          {rows.map((r, i) => (
            <Reveal key={i} className="hp__step" delay={i * 110}>
              <div className="hp__node" aria-hidden="true"></div>
              <div className="hp__mark-num">{r.mark}</div>
              <div className="hp__mark-tag">{r.tag}</div>
              <p className="hp__myth">
                <span className="hp__k">The pitch</span>
                <span className="hp__v">{r.myth}</span>
              </p>
              <p className="hp__truth">
                <span className="hp__k">The truth</span>
                <span className="hp__v">{r.text}</span>
              </p>
            </Reveal>
          ))}
        </div>

        <Reveal className="hp__foot">
          <p className="hp__foot-line">
            I tell you this so the timeline in your head is honest from day one.
            Build it the right way and you get both &mdash; <b>the business, and your life back.</b>
          </p>
          <button className="btn btn--primary" onClick={onBook}>
            Book a discovery call <ArrowGlyph />
          </button>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { HonestPath });