/* global React, Reveal, ArrowGlyph */

// =========================================================
// ABOUT — homepage block. Lives between Quiz and Before/After.
// Short, opinion-led, links out to a fuller /about page.
// =========================================================
function About({ onBook }) {
  const beliefs = [
    {
      kind: "yes",
      tag: "I believe",
      title: "Most sellers should kill 50% of their SKUs in year one.",
      body: "Catalogs that grow before they're profitable bury good products under bad ones. Cutting is the work.",
    },
    {
      kind: "yes",
      tag: "I believe",
      title: "Sequence beats strategy, almost every time.",
      body: "The five right moves in the wrong order will lose to the wrong moves in the right order. I obsess over the order.",
    },
    {
      kind: "no",
      tag: "I don't",
      title: "Promise you a revenue number.",
      body: "Anyone who does is selling you the dream, not the work. Your numbers depend on your product, your patience, and the market.",
    },
    {
      kind: "no",
      tag: "I don't",
      title: "Take on every seller who books a call.",
      body: "If your product or budget isn't ready, I'll tell you straight — and tell you what to fix first. That call is still free.",
    },
  ];

  return (
    <section id="about" className="section ab">
      <div className="container">
        <div className="ab__grid">
          <Reveal className="ab__portrait-col">
            <div className="ab__portrait">
              <img src="assets/jay-direct.jpg" alt="Jay Bansal — portrait, studio session, May 2026" />
              <div className="ab__portrait-meta">
                <strong>Jay Bansal</strong>
                <span>Auckland · independent</span>
              </div>
              <div className="ab__yoe">
                <div className="ab__yoe-num"><em>12</em> yrs</div>
                <div className="ab__yoe-lbl">selling online<br />since 2013</div>
                <div className="ab__yoe-split">
                  <div>
                    <strong>6</strong>
                    <span>yrs coaching</span>
                  </div>
                  <div>
                    <strong>3,000+</strong>
                    <span>students</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="ab__sig">
              <div className="ab__sig-name">— Jay</div>
              <span>est. 2020 · sold since 2016</span>
            </div>
          </Reveal>

          <div>
            <Reveal className="ab__head">
              <div className="eyebrow">About</div>
              <h2 className="display">A coach, not a guru.<br />And not for everyone.</h2>
              <p className="ab__lead">
                <strong>Five years</strong> selling before I coached a soul. <strong>$100K</strong> of my own money lost
                in trial-and-error. <strong>$50K</strong> paid to other coaches who pulled me back out.
                <strong>Suspended accounts</strong>, dead listings — every kind of expensive mistake there was to make.
                Now I sit next to first-time sellers — at tables, on screens, on beaches —
                and walk them past every single one.
                <strong> I can't promise you'll succeed. But I can promise this: your odds with me in your corner are 10× what they'd be alone.</strong>
              </p>
            </Reveal>

            <Reveal>
              <div className="ab__beliefs-head">
                <div className="eyebrow">What I believe · what I don't</div>
                <span>04 positions</span>
              </div>

              <div className="ab__beliefs">
                {beliefs.map((b, i) => (
                  <div key={i} className={`ab__belief ab__belief--${b.kind}`}>
                    <div className="ab__belief-tag">{b.tag}</div>
                    <h4>{b.title}</h4>
                    <p>{b.body}</p>
                  </div>
                ))}
              </div>

              <div className="ab__cta-row">
                <button className="btn btn--primary" onClick={onBook}>
                  Book a 30-min call <ArrowGlyph />
                </button>
                <a className="btn btn--ghost" href="#">
                  Read the longer version
                </a>
                <span className="label-mono">— or scroll on for receipts</span>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });