/* global React, Reveal, ArrowGlyph */

// =========================================================
// SOUND LIKE YOU (landing variant) — identical to the
// home-page SoundLikeYou, with two items removed for the
// paid-traffic page: the old 02 ("lost for direction",
// overlaps 01) and old 04 ("wonder if you should give up",
// too dark right before a cold-traffic CTA). Remaining three
// are renumbered and the headline updated to match.
// Home page keeps all five.
// =========================================================
function SoundLikeYouLanding({ onBook }) {
  const items = [
  {
    n: "01",
    text: <><em style={{ fontWeight: "400" }}>Drowning in info-overload</em> — every YouTube guru says something different, and you can't tell who's right.</>
  },
  {
    n: "02",
    text: <>You keep buying courses, and somehow you're <em>more confused than before.</em></>
  },
  {
    n: "03",
    text: <>You don't know <em>who to trust</em> — the loudest voices feel the least real.</>
  }];


  return (
    <section id="soundlike" className="section sl">
      <div className="container">
        <div className="sl__grid">
          <Reveal className="sl__head">
            <div className="eyebrow">Sound familiar?</div>
            <h2 className="display">
              A few quiet thoughts you&rsquo;ve probably had.<br />
              <em>None of them mean you&rsquo;re failing.</em>
            </h2>
            <p>
              You&rsquo;ve built a career &mdash; maybe a good one. So it stings that this
              is the thing that won&rsquo;t click yet. There&rsquo;s nothing wrong with you.
              There&rsquo;s just no one in your corner yet.
            </p>
          </Reveal>

          <div className="sl__list">
            {items.map((it, i) =>
            <Reveal key={i} delay={i * 80}>
                <div className="sl__item">
                  <div className="sl__num">{it.n}</div>
                  <div className="sl__txt" style={{ fontWeight: "400" }}>{it.text}</div>
                </div>
              </Reveal>
            )}
            <Reveal delay={items.length * 80}>
              <div className="sl__payoff" style={{ marginTop: "36px" }}>
                If any of these read like a transcript of your last 3am thought —
                <strong> you're exactly who I built this for.</strong>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { SoundLikeYouLanding });