/* global React, Reveal, ArrowGlyph */

function SoundLikeYou({ onBook }) {
  const items = [
    {
      n: "01",
      text: (<><em>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 like you?</div>
            <h2 className="display">
              Five things every new seller feels.<br />
              <em>None of them mean you're failing.</em>
            </h2>
            <p>
              If you've been at this a while and you're stuck in your own head —
              there's nothing wrong with you. There'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 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">{it.text}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SoundLikeYou });