/* 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, bookLabel = "Book a 30-min discovery call" }) {
  const [longOpen, setLongOpen] = React.useState(false);

  const chapters = [
    {
      year: "2010 — 2012",
      title: "The right life, on paper.",
      body: "Architecture degree, then a sales job at Fuji Xerox selling photocopiers. It taught me one thing fast: the people winning weren't the smartest — they'd just picked a better game. Then the redundancies came, and I realised a salary is only someone else's permission to keep going. So I quit cold turkey, moved back in with my parents, and gave myself five years to build a life nobody could switch off.",
    },
    {
      year: "2013",
      title: "The first dollar.",
      body: "I locked myself in a room and got to work. Stopped reading about business and started doing it — 80% action, 20% learning, in that order. I put up my first website, and that November a cheque landed for $116.90. Tiny money. But it was proof the thing was real. That was the spark.",
    },
    {
      year: "2014",
      title: "The climb.",
      body: "I found Fulfilment by Amazon and went all in. My first product — a digital cooking thermometer — hit $13,000 a month. I launched a second, a third. One went #1 Best Seller in two months at over 500% profit. I thought I'd cracked it, so I did what everyone does: bought heavier inventory, partnered up, launched five and six products at once. Scaling.",
    },
    {
      year: "2015",
      title: "Zero, overnight.",
      body: "Then one morning Amazon emailed to say my account was suspended. No warning, no appeal that worked. Income to zero, literally overnight. I fought for the accounts, the brands, the products — and I lost, hard, then lost more. That's the part nobody puts on a highlight reel. It cost me around $100K of my own money, and $50K more paid to coaches to claw my way back out.",
    },
    {
      year: "2015 — 2017",
      title: "The thing I was actually good at.",
      body: "Rebuilding, I noticed something. Other sellers kept asking how I'd done it — and I could answer in my sleep. So I switched seats: started consulting and marketing for other brands instead, and found my first three clients in a single month. Then I started coaching. Turns out the mistakes were the asset all along.",
    },
    {
      year: "2017 — today",
      title: "Still in the arena.",
      body: "Since then I've consulted brands, coached thousands of students, and travelled the world — sourcing amazing products along the way. I still sell my own products, still source, still take the risks I'm asking you to take. And here's why I sit at the table with you: I made every expensive mistake there is, in the wrong order, so you don't have to. That's the whole job now — to put you in the right sequence from day one. I can't promise you'll succeed. I can promise your odds with me in your corner are 10× what they'd be alone.",
    },
  ];

  const beliefs = [
    {
      kind: "yes",
      tag: "I believe",
      title: "Year one isn't about scale. It's about getting 3–5 products right.",
      body: "Year one is for learning what sells and why. Buy heavy inventory or chase catalog size too early, and you just scale your mistakes.",
    },
    {
      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 2014</div>
                <div className="ab__yoe-split">
                  <div>
                    <strong>9</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. 2017 · sold since 2014</span>
            </div>
          </Reveal>

          <div>
            <Reveal className="ab__head">
              <div className="eyebrow">About</div>
              <h2 className="display">A <i style={{ color: "#5A7D3E" }}>coach</i>, not a guru.<br />And not for everyone.</h2>
              <p className="ab__lead">
                <strong>Three 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}>
                  {bookLabel} <ArrowGlyph />
                </button>
                <button
                  className="btn btn--ghost"
                  onClick={() => setLongOpen((o) => !o)}
                  aria-expanded={longOpen}
                  aria-controls="ab-long"
                >
                  {longOpen ? "Hide the longer version" : "Read the longer version"}
                </button>
                <span className="label-mono">— or scroll on for receipts</span>
              </div>

              <div id="ab-long" className={`ab__long ${longOpen ? "is-open" : ""}`} aria-hidden={!longOpen}>
                <div className="ab__long-clip">
                  <div className="ab__long-inner">
                    <div className="ab__long-head">
                      <div className="eyebrow">The longer version</div>
                      <span>2010 — today · the whole arc</span>
                    </div>
                    <div className="ab__long-body">
                      {chapters.map((c, i) => (
                        <div className="ab__chapter" key={i}>
                          <div className="ab__chapter-year">{c.year}</div>
                          <div className="ab__chapter-text">
                            <h5>{c.title}</h5>
                            <p>{c.body}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });