/* global React, Reveal, ArrowGlyph */

function SoundLikeYou({ 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 feel <em>lost for direction</em>, like everyone else got a map you didn't.</>
  },
  {
    n: "03",
    text: <>You keep buying courses, and somehow you're <em>more confused than before.</em></>
  },
  {
    n: "04",
    text: <>Some weeks, quietly, you wonder if you should <em>just give up</em>.</>
  },
  {
    n: "05",
    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">
              Five 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>
            <div className="sl__payoff">
              If any of these read like a transcript of your last 3am thought —
              <strong> you're exactly who I built this for.</strong>
            </div>
            <div className="sl__cta-row">
              <button className="btn btn--primary" onClick={onBook}>
                Book a 30-min discovery call <ArrowGlyph />
              </button>
            </div>
          </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>
            )}
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { SoundLikeYou });