/* global React, Reveal, ArrowGlyph */

// =========================================================
// HONEST PATH (landing variant) — identical to the home-page
// HonestPath (same verbatim rows + closing line), but opens
// with Jay's origin beat: a new headline, a short story, and
// the whiteboard-office photo. Used on the paid-traffic page
// only; the home page keeps the plain HonestPath.
// =========================================================
function HonestPathLanding({ onBook, showCta = false }) {
  return (
    <>
    <section id="honest" className="section hp hp--dark" data-screen-label="How I found the way out">
      <div className="container">
        <Reveal className="hp__head hpl__head wo__head">
          <div className="eyebrow">How I found the way out</div>
          <h2 className="display hp__title hpl__title wo__title">
            I was stuck too.<br /><em>Here&rsquo;s how I got out.</em>
          </h2>
        </Reveal>

        {/* All three artifacts in one horizontal row (cascading down),
            with the written beats below. Cold-traffic, high-level. */}
        <div className="wo2">
          <div className="wo2__top">
            <div className="wo2__left">
              <Reveal className="wo2__item wo2__item--pain">
                <span className="wo2__tag">The pain</span>
                <span className="wo2__pol">
                  <span className="wo2__tape" aria-hidden="true"></span>
                  <span className="wo2__zoom">
                    <img src="assets/jay-grind-years.jpg" alt="Jay during the grind years" />
                  </span>
                  <span className="wo2__cap">close or you don&rsquo;t eat</span>
                </span>
              </Reveal>
            </div>

            <div className="wo2__right">
              <div className="wo2__shots">
                <div className="wo2__shotrow">
                  <Reveal className="wo2__item wo2__item--check" delay={90}>
                    <span className="wo2__tag">The grind</span>
                    <span className="wo2__pol wo2__pol--check">
                      <span className="wo2__tape" aria-hidden="true"></span>
                      <img src="assets/first-check.jpg" alt="Jay's first check — Crosstown Services, $116.90, November 2013" />
                      <span className="wo2__cap">my first two sales &mdash; 18 months apart, never cashed</span>
                    </span>
                  </Reveal>
                  <span className="wo2__note">
                    <svg className="wo2__arrow" viewBox="0 0 44 46" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      <path d="M24 44 C 28 30, 21 14, 12 5" />
                      <path d="M12 5 l 12 3" />
                      <path d="M12 5 l -1 12" />
                    </svg>
                    <span>my first two sales online</span>
                  </span>
                </div>

                <div className="wo2__shotrow">
                  <Reveal className="wo2__item wo2__item--amazon" delay={180}>
                    <span className="wo2__tag">Then Amazon</span>
                    <span className="wo2__pol">
                      <span className="wo2__tape" aria-hidden="true"></span>
                      <img src="assets/first-1000-sales.jpg" alt="Jay's first 1,000 Amazon sales" />
                      <span className="wo2__cap">it finally clicked</span>
                    </span>
                  </Reveal>
                  <span className="wo2__note">
                    <svg className="wo2__arrow" viewBox="0 0 44 46" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      <path d="M24 44 C 28 30, 21 14, 12 5" />
                      <path d="M12 5 l 12 3" />
                      <path d="M12 5 l -1 12" />
                    </svg>
                    <span>the first 1,000 sales online</span>
                  </span>
                </div>
              </div>

              <Reveal className="wo2__draft" delay={240}>
                <p className="wo2__draft-l1">I trained as an architect.</p>
                <p className="wo2__draft-l2">Then the recession took the jobs.</p>
                <p className="wo2__draft-l3">Then sales paid the bills.</p>
                <p className="wo2__draft-l4"><em>Then I found the way out.</em></p>
                <div className="wo2__draft-foot">
                  Architect <span>&rarr;</span> Recession <span>&rarr;</span> Sales <span>&rarr;</span> Amazon
                </div>
              </Reveal>
            </div>
          </div>

          <div className="wo2__cols">
            <div className="wo2__meter" aria-hidden="true">
              <div className="wo2__seg">Stuck</div>
              <div className="wo2__seg">The turn</div>
              <div className="wo2__seg">The way out</div>
            </div>
            <div className="wo2__cols-grid">
              <Reveal className="wo2__col" delay={120}>
                <p className="hpl__hand wo2__voice">Couldn&rsquo;t picture twenty more years.</p>
                <p>12-hour days. Commission-only. Close or you don&rsquo;t eat. Drive-through meals. Drowning.</p>
              </Reveal>
              <Reveal className="wo2__col" delay={200}>
                <p className="hpl__hand wo2__voice">So I made a decision.</p>
                <p>I stopped wishing and started looking. Same as you, right now. Tried everything to get out: affiliate, web agency, ads. Made my 1st sale online.</p>
              </Reveal>
              <Reveal className="wo2__col" delay={280}>
                <p className="hpl__hand wo2__voice">The first thing that ever worked.</p>
                <p>Then Amazon clicked. Buying and selling. The oldest business there is. First 1,000 sales.</p>
              </Reveal>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="cost" className="section" data-screen-label="The real cost of the dream">
      <CostOfDream />
    </section>
    </>
  );
}

// =========================================================
// THE DREAM — AS SOLD VS AS CHARGED. One section replacing the
// old "Promise vs. reality" + separate cost sections. Sits right
// after the origin story and before The Method. Two halves on the
// dark forest band: the guru fantasy (struck through) on top, then
// the real cream receipt below. This is the ONLY place cost lives.
// =========================================================
function CostOfDream() {
  return (
      <div className="container cr__merged">
        {/* Left: eyebrow + headline + promise. Right: receipt. Side by side. */}
        <div className="cr__split">
          <div className="cr__left">
            <Reveal className="hp__head hp__head--cost">
              <div className="eyebrow">The dream &middot; As sold vs as charged</div>
              <h2 className="display hp__title cr__headline">
                <span style={{ fontStyle: "normal" }}>They sold you a fantasy.</span><br />
                <em>Here&rsquo;s what it actually cost me.</em>
              </h2>
            </Reveal>

            <Reveal className="cr__promise">
              <div className="cr__promise-label">The promise &mdash; what they sell</div>
              <ul className="cr__promise-list">
                <li>
                  <span className="cr__promise-quote">&ldquo;Six figures in weeks.&rdquo;<span className="cr__strike" aria-hidden="true"></span></span>
                </li>
                <li>
                  <span className="cr__promise-quote">&ldquo;Quit your job in 90 days.&rdquo;<span className="cr__strike" aria-hidden="true"></span></span>
                </li>
                <li>
                  <span className="cr__promise-quote">&ldquo;Hit $10K a month and you&rsquo;re free.&rdquo;<span className="cr__strike" aria-hidden="true"></span></span>
                </li>
              </ul>
            </Reveal>
          </div>

          <div className="cr-stage">
            <div className="cr__cue">&darr; the real invoice &darr;</div>
            <Reveal className="cr">
            <div className="cr__head">
              <h3>The cost of the dream</h3>
              <span>What it really took</span>
            </div>

            <div className="cr__rows">
              <div className="cr__row cr__row--money">
                <span className="cr__label">Coaching</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">$50,000+</span>
              </div>
              <div className="cr__row cr__row--money">
                <span className="cr__label">Trial &amp; error</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">$100,000+</span>
              </div>
              <div className="cr__subhead">Unseen costs</div>
              <div className="cr__row">
                <span className="cr__label">No income</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">3 years</span>
              </div>
              <div className="cr__row">
                <span className="cr__label">No dating</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">7 years</span>
              </div>
              <div className="cr__row">
                <span className="cr__label">No support structure</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">none</span>
              </div>
              <div className="cr__row">
                <span className="cr__label">Sleep</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">what sleep?</span>
              </div>
              <div className="cr__row">
                <span className="cr__label">Rethinking everything</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">nightly</span>
              </div>
              <div className="cr__row">
                <span className="cr__label">Social life</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">on hold</span>
              </div>
              <div className="cr__row">
                <span className="cr__label">My core 20s</span>
                <span className="cr__dots" aria-hidden="true"></span>
                <span className="cr__val">all of them</span>
              </div>
            </div>

            <div className="cr__total">
              <span className="cr__total-lbl">The real price</span>
              <span className="cr__amt">$150K</span>
            </div>
            <div className="cr__stamp">&mdash; and nobody else will tell you &mdash;</div>
          </Reveal>
          <Reveal className="cr__anno" delay={120}>
            <span className="cr__anno-amt">I paid the tuition.</span>
            <span className="cr__anno-sub">You don&rsquo;t have to.</span>
            <svg className="cr__anno-arrow" viewBox="0 0 128 40" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M4 30 C 46 26, 86 22, 122 14" />
              <path d="M122 14 l -16 -2" />
              <path d="M122 14 l -9 13" />
            </svg>
          </Reveal>
          </div>

          <Reveal className="cr__handoff">
            <p>
              <span style={{ fontSize: 20 }}>Now the timeline in your head is honest.</span>{" "}
              <em style={{ fontSize: 22 }}>So let me show you the one thing that made it worth it.</em> &darr;
            </p>
          </Reveal>
        </div>
      </div>
  );
}

Object.assign(window, { HonestPathLanding, CostOfDream });
