/* global React, Reveal, ArrowGlyph */
const { useState: useS3, useEffect: useE3, useRef: useR3 } = React;

// =========================================================
// BEFORE / AFTER — the real receipt
// =========================================================
function BeforeAfter() {
  return (
    <section id="proof" className="section">
      <div className="container">
        <div className="ba">
          <Reveal className="ba__title">
            <div className="eyebrow">Real wins · cohort + consulting</div>
            <h2 className="display"><i style={{ color: "#5A7D3E" }}><span style={{ fontStyle: "normal", color: "#181A16" }}>The</span> receipts.</i><br /><span style={{ color: "#181A16" }}>Not stock photos.</span></h2>
            <p className="lead">
              Tim from Switzerland and Dan from Australia, both posting to
              our private cohort group the night their spike landed. Two
              students, two countries, two products — <b style={{ fontStyle: "italic", fontWeight: 400 }}>same playbook</b>. No
              edits. No re-shoots. Their words, their dashboards.
            </p>
            <div className="ba__meta">
              <div className="ba__meta-row">
                <span className="ba__meta-key">Channel</span>
                <span className="ba__meta-val">ImportXperts cohort (private FB group)</span>
              </div>
              <div className="ba__meta-row">
                <span className="ba__meta-key">Tim</span>
                <span className="ba__meta-val ba__meta-val--win">Handheld fan · $12,020 / 30 days · sold out in five</span>
              </div>
              <div className="ba__meta-row">
                <span className="ba__meta-key">Dan</span>
                <span className="ba__meta-val ba__meta-val--win">Month 4 · $9,140 / 30 days · doubled best day</span>
              </div>
              <div className="ba__meta-row">
                <span className="ba__meta-key">Consulting</span>
                <span className="ba__meta-val ba__meta-val--win">Highest month · $73,567 / 30 days · 254 units</span>
              </div>
            </div>
          </Reveal>

          <Reveal>
            <div className="receipts">
              <figure className="receipt receipt--back">
                <div className="receipt__tape receipt__tape--tl"></div>
                <div className="receipt__tape receipt__tape--br"></div>
                <img src="assets/tim-receipt.jpg" alt="Tim's Facebook post to the ImportXperts cohort, dated December 14 2019, showing his Amazon Seller dashboard." />
                <figcaption className="receipt__cap">
                  <span>tim · ch → us</span>
                  <span>december · cohort</span>
                </figcaption>
              </figure>
              <figure className="receipt receipt--front">
                <div className="receipt__tape receipt__tape--tl"></div>
                <div className="receipt__tape receipt__tape--br"></div>
                <img src="assets/dan-receipt.jpg" alt="Dan's Facebook post to the ImportXperts cohort, dated December 21 2020, celebrating a record sales day in his fourth month on Amazon US." />
                <figcaption className="receipt__cap">
                  <span>dan · au → us</span>
                  <span>december · cohort</span>
                </figcaption>
              </figure>
              <figure className="receipt receipt--consult">
                <div className="receipt__tape receipt__tape--tl"></div>
                <div className="receipt__badge">Consulting client</div>
                <img src="assets/consulting-receipt.jpg" alt="Amazon Seller Central sales summary for a consulting client showing $73,567.56 in ordered product sales and 254 units over 30 days." />
                <figcaption className="receipt__cap">
                  <span>consulting · highest month</span>
                  <span>$73,567 · 254 units</span>
                </figcaption>
              </figure>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

// =========================================================
// VIDEO TESTIMONIALS
// =========================================================
function Videos() {
  const v = [
  { kind: "note", name: "Danielle A.", role: "handwritten · 2021", chip: "Handwritten · 2021", big: true,
    src: "assets/note-danielle.png",
    quote: "Thanks for helping me achieve my Amazon goals and dreams this year. What a ride!! Looking forward to the next chapter." },
  { kind: "receipt", name: "Waldek S.", role: "UK · £10K Dec", chip: "FB · receipt",
    av: "assets/av-waldek2.png", fullName: "Waldek Sydorko", action: "Love", time: "2m", react: "love", reactCount: 2,
    msg: "My sales for December were around 10000£. Really chuffed about it and thanks Anna and Jay for your guidance. I've ordered couple of more products to launch in Feb-March" },
  { kind: "receipt", name: "Tanja M.", role: "231 units · 3 SKUs", chip: "FB · receipt",
    av: "assets/av-tanja2.png", fullName: "Tanja Mütsch", action: "Like", time: "1m",
    msg: "Happy New Year to everyone! 🙂 We have 3 products available on amazon and sold 231 items since mid Oct. Thanks Anna and Jay! 🙂 On average, how long does it take to optimize PPC to the max when improving it on a daily basis?" },
  { kind: "receipt", name: "Patricia M.", role: "$6,613 · 147 units", chip: "FB · receipt",
    av: "assets/av-patricia2.png", fullName: "Patricia McKinney-Lins", action: "Like", time: "1m", react: "like", reactCount: 3,
    msg: "147 units sold in December for $6613. 116 of first product; 31 of my second product. Still trying to figure out PPC" },
  { kind: "receipt", name: "Mared J.", role: "300 units · £7,500", chip: "FB · receipt",
    av: "assets/av-mared2.png", fullName: "Mared Jenkins", action: "Like", time: "2m", react: "like", reactCount: 2,
    msg: "I sold all 300 units of my first product, around £7,500 sales 👍 Thanks both!!" }];

  return (
    <section className="section">
      <div className="container">
        <Reveal className="s-head">
          <div>
            <div className="eyebrow">Said by the people who did the work</div>
            <h2 className="display">Read it raw.<br /><span style={{ fontStyle: "italic", color: "#5A7D3E" }}>Unedited and unfiltered.</span></h2>
          </div>
          <div className="s-head__right">
            A handwritten note. Facebook posts and comments,
            screenshotted as-is. No "before / after," no edited testimonials —
            just what students actually said.
          </div>
        </Reveal>

        <div className="vids">
          {v.map((it, i) => {
            const classes = "vid" + (
            it.big ? " vid--big" : "") + (
            it.kind === "receipt" ? " vid--receipt" : "") + (
            it.kind === "note" ? " vid--note" : "");
            const Tag = it.href ? "a" : "div";
            const tagProps = it.href ? { href: it.href, target: "_blank", rel: "noopener noreferrer" } : {};
            return (
              <Reveal key={i} {...tagProps} as={Tag} className={classes} delay={i * 60}>
                {it.kind === "video" &&
                <>
                    {it.src && <img className="vid__bg-img" src={it.src} alt={`${it.name} video thumbnail`} />}
                    <div className="vid__chip">{it.chip}</div>
                    <div className="vid__play">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M6 4l11 6-11 6V4z" />
                      </svg>
                    </div>
                    <div className="vid__overlay">
                      <h4>{it.name}</h4>
                      <span>{it.role}</span>
                      <span style={{ opacity: 0.6, marginTop: 4 }}>{it.label}</span>
                    </div>
                  </>
                }
                {it.kind === "receipt" &&
                <>
                    <div className="vid__chip vid__chip--br">{it.chip}</div>
                    <div className="vid__receipt-img vid__receipt-img--msg">
                      <div className="fbmsg">
                        <img className="fbmsg__av" src={it.av} alt="" />
                        <div className="fbmsg__col">
                          <div className="fbmsg__bubble">
                            <div className="fbmsg__name">{it.fullName}</div>
                            <p className="fbmsg__text">{it.msg}</p>
                            {it.reactCount &&
                            <div className="fbmsg__react">
                                {it.react === "love" &&
                                <>
                                    <span className="fbmsg__rx fbmsg__rx--like">👍</span>
                                    <span className="fbmsg__rx fbmsg__rx--love">❤️</span>
                                  </>
                                }
                                {it.react === "like" &&
                                <span className="fbmsg__rx fbmsg__rx--like">👍</span>
                                }
                                <span className="fbmsg__rx-count">{it.reactCount}</span>
                              </div>
                            }
                          </div>
                          <div className="fbmsg__meta">
                            <span className={"fbmsg__action" + (it.action === "Love" ? " is-love" : "")}>{it.action}</span>
                            <span className="fbmsg__sep">·</span>
                            <span className="fbmsg__bold">Reply</span>
                            <span className="fbmsg__sep">·</span>
                            <span>{it.time}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="vid__receipt-meta">
                      <span className="vid__receipt-name">{it.name}</span>
                      <span className="vid__receipt-tag">{it.role}</span>
                    </div>
                  </>
                }
                {it.kind === "note" &&
                <>
                    <div className="vid__note-img">
                      <img src={it.src} alt="Handwritten thank-you note from Danielle, 2021" />
                    </div>
                    <div className="vid__note-caption">
                      <div className="vid__note-tag">The kind of mail this work generates</div>
                      <p className="vid__note-quote">"{it.quote}"</p>
                      <div className="vid__note-byline"><span className="vid__receipt-name">{it.name}</span> <span className="vid__note-role">{it.role}</span></div>
                    </div>
                  </>
                }
              </Reveal>);

          })}
        </div>
      </div>
    </section>);

}

// =========================================================
// FINAL CTA + FOOTER
// =========================================================
function FinalCTA({ onBook }) {
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div className="cta-end">
            <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>
              what happens on the call
            </div>
            <h2 className="display">A 30-min talk. Then a clear next step.</h2>
            <p>
              You walk me through where you are. I tell you, plainly, whether
              I think I can help — and if so, which track fits. If not, I'll
              point you to who or what does.
            </p>

            <div className="cta-end__agenda">
              <div className="cta-end__step">
                <div className="cta-end__step-num">01</div>
                <div className="cta-end__step-time">10 min</div>
                <div className="cta-end__step-label">Where you are</div>
              </div>
              <div className="cta-end__step">
                <div className="cta-end__step-num">02</div>
                <div className="cta-end__step-time">10 min</div>
                <div className="cta-end__step-label">The questions that matter</div>
              </div>
              <div className="cta-end__step">
                <div className="cta-end__step-num">03</div>
                <div className="cta-end__step-time">10 min</div>
                <div className="cta-end__step-label">A clear next step</div>
              </div>
            </div>

            <div className="cta-end__actions">
              <button className="btn btn--primary btn--lg" onClick={onBook}>
                Book your discovery call <ArrowGlyph />
              </button>
              <a className="btn btn--ghost btn--lg" href="#story">Read the story first</a>
            </div>

            <div className="cta-end__alt">
              <strong>Not ready for a call?</strong> Send me a one-paragraph
              email at <a href="mailto:hello@jaysbansal.com">hello@jaysbansal.com</a> telling
              me where you're stuck. I read every one and reply within 48 hours.
            </div>

            <div className="cta-end__sig">
              currently booking · 1:1 and the next small cohort
            </div>
            <div className="cta-end__handsign">
              <img className="cta-end__avatar" src="assets/jay-avatar.png" alt="Jay" />
              <span className="cta-end__handsign-name">— Jay</span>
              <span className="cta-end__handsign-meta">calling from auckland · usually mornings your time</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

function Footer() {
  const [submitted, setSubmitted] = useS3(false);
  const [email, setEmail] = useS3("");
  const WAITLIST_ENDPOINT = "https://formspree.io/f/mredvqgv";
  const onSubmit = (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)) return;
    if (WAITLIST_ENDPOINT) {
      fetch(WAITLIST_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({ email: v, _subject: "New cohort waitlist signup", source: "cohort-waitlist" }),
      }).catch(() => {});
    }
    setSubmitted(true);
  };

  return (
    <footer className="foot">
      <div className="container">
        <div className="foot__top">
          <div className="foot__left">
            <div className="foot__brand" style={{ fontWeight: "400" }}><span className="foot__brand-mark"></span> Jay · Bansal</div>
            <div className="foot__manifesto">
              Built slowly. <em style={{ fontWeight: "400" }}>Shared freely.</em><br />
              Twice a year I open a few seats. The rest of the time, I'm in the work.
            </div>

            <div className="foot__waitlist">
              <div className="foot__waitlist-label">Get a note when seats open</div>
              {submitted ?
              <div className="foot__waitlist-done">
                  <span className="foot__waitlist-tick" aria-hidden="true">
                    <svg viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                  You're in. I'll write when seats open — and the Launch Sequence is on its way.
                </div> :

              <form className="foot__form" onSubmit={onSubmit}>
                  <input
                  className="foot__input"
                  type="email"
                  placeholder="your email"
                  aria-label="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required />
                
                  <button className="foot__submit" type="submit">
                    Join <ArrowGlyph />
                  </button>
                </form>
              }
              <div className="foot__fine">
                Twice-a-year cohort openings + a few essays. No course-selling. Unsubscribe any time.
              </div>

              <div className="foot__welcome">
                <div className="foot__gift" aria-hidden="true">
                  <div className="foot__gift-line"></div>
                  <div className="foot__gift-line"></div>
                  <div className="foot__gift-line"></div>
                  <div className="foot__gift-line"></div>
                  <div className="foot__gift-line"></div>
                </div>
                <div className="foot__welcome-text">
                  <div className="foot__welcome-key">+ welcome gift</div>
                  The <strong>Launch Sequence</strong> — the one-page playbook
                  I run with every new 1:1 client. Lands in your inbox the
                  moment you join.
                </div>
              </div>
            </div>

            <div className="foot__sig">
              <span className="foot__sig-name">— Jay</span>
              <span className="foot__sig-meta">
                Auckland, NZ<br />
                usually mornings your time
              </span>
            </div>
          </div>

          <div className="foot__cols">
            <div className="foot__col">
              <h5>Work with me</h5>
              <a href="#programs">1:1 coaching</a>
              <a href="#programs">Cohort program</a>
              <a href="#programs">Single-session audit</a>
              <a href="https://jaysbansal.com/discovery-call/" rel="noopener noreferrer">Discovery call</a>
            </div>
            <div className="foot__col">
              <h5>Read / Watch</h5>
              <a href="#wins">Case studies</a>
              <a href="https://www.youtube.com/@JaySBansal" target="_blank" rel="noopener">YouTube <span className="foot__meta">@jaysbansal</span></a>
            </div>
            <div className="foot__col">
              <h5>Elsewhere</h5>
              <a href="https://www.linkedin.com/in/jaysbansal/" target="_blank" rel="noopener noreferrer">LinkedIn <span className="foot__meta">@jaysbansal</span></a>
              <a href="https://www.facebook.com/jaysbansal" target="_blank" rel="noopener noreferrer">Facebook <span className="foot__meta">@jaysbansal</span></a>
              <a href="https://www.instagram.com/amazonpreneur/" target="_blank" rel="noopener noreferrer">Instagram <span className="foot__meta">@amazonpreneur</span></a>
              <a href="https://x.com/jaysbansal" target="_blank" rel="noopener noreferrer">Twitter / X <span className="foot__meta">@jaysbansal</span></a>
              <a href="https://www.meetup.com/selling-on-amazon/" target="_blank" rel="noopener noreferrer">Meetup <span className="foot__meta">selling-on-amazon</span></a>
              <a href="https://wa.me/64272255529?text=Hi%20Jay%20%E2%80%94%20just%20read%20through%20your%20site%20and%20it%20really%20landed.%20I%20want%20my%20time%20back%2C%20and%20I'd%20like%20an%20honest%20chat%20about%20whether%20this%20is%20my%20way%20out." target="_blank" rel="noopener noreferrer" onClick={() => { if (typeof gtag === "function") { gtag('event', 'conversion', { 'send_to': 'AW-757764531/ijKzCMvGo70cELOjqukC' }); } }}>WhatsApp <span className="foot__meta">NZ business hrs</span></a>
              <a href="mailto:hello@jaysbansal.com">hello@jaysbansal.com</a>
            </div>
            <div className="foot__col">
              <h5>Tools I use</h5>
              <a href="https://get.junglescout.com/jaysingh4709" target="_blank" rel="noopener noreferrer sponsored">JungleScout</a>
              <a href="https://jingsourcing.com/a/jaybansal" target="_blank" rel="noopener noreferrer sponsored">JingSourcing</a>
              <a href="http://shopify.pxf.io/jayb" target="_blank" rel="noopener noreferrer sponsored">Shopify</a>
              <a href="https://wise.com/invite/irhc/sumeets130" target="_blank" rel="noopener noreferrer sponsored">Wise</a>
              <a href="https://revolut.com/referral/?referral-code=sumeet7h3d!APR1-26-AR-AU-H3&geo-redirect" target="_blank" rel="noopener noreferrer sponsored">Revolut</a>
              <a href="https://hostinger.com/?REFERRALCODE=JLTBANSALATW" target="_blank" rel="noopener noreferrer sponsored">Hostinger</a>
              <a href="https://www.skool.com/signup?ref=2bd8abd81fb148eaa5a4b86b2cce3583" target="_blank" rel="noopener noreferrer sponsored">Skool</a>
              <a href="https://www.xolo.io/ref/SUMSIN1" target="_blank" rel="noopener noreferrer sponsored">Xolo</a>
            </div>
          </div>
        </div>

        <div className="foot__base">
          <span>© 2026 Bansal International OÜ</span>
          <span className="foot__legal">
            <a href="privacy.html">Privacy</a>
            <span aria-hidden="true">·</span>
            <a href="terms.html">Terms</a>
            <span aria-hidden="true">·</span>
            <a href="legal.html">Legal Notice</a>
            <span aria-hidden="true">·</span>
            <button type="button" onClick={() => window.openCookieSettings && window.openCookieSettings()}>Cookie settings</button>
          </span>
          <span className="foot__disclosure">Some links on this site are affiliate links — I may earn a small commission at no extra cost to you.</span>
          <span>made carefully · not in a hurry</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { BeforeAfter, Videos, FinalCTA, Footer });