/* 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 cohort wins</div>
            <h2 className="display">The receipts.<br />Not a stock photo.</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>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 · $15,890 / 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>
          </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>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

// =========================================================
// VIDEO TESTIMONIALS
// =========================================================
function Videos() {
  const v = [
  { kind: "note", name: "Danielle", 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", src: "assets/fb-waldek.png" },
  { kind: "receipt", name: "Tanja M.", role: "231 units · 3 SKUs", chip: "FB · receipt", src: "assets/fb-tanja.png" },
  { kind: "receipt", name: "Patricia M.", role: "$6,613 · 147 units", chip: "FB · receipt", src: "assets/fb-patricia.png" },
  { kind: "receipt", name: "Mared J.", role: "300 units · £7,500", chip: "FB · receipt", src: "assets/fb-mared.png" }];

  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">Hear them tell it.<br />Or read it raw.</h2>
          </div>
          <div className="s-head__right">
            A handwritten note. A handful of unedited Facebook messages.
            One video (more coming). No "before / after." Just the actual mail
            and messages this work generates.
          </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">{it.chip}</div>
                    <div className="vid__receipt-img">
                      <img src={it.src} alt={`Facebook message from ${it.name}`} />
                    </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"><strong>{it.name}</strong> · {it.role}</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 · june cohort · <strong>6 of 8 seats taken</strong>
            </div>
            <div className="cta-end__handsign">
              <img className="cta-end__avatar" src="assets/jay-direct.jpg" 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 onSubmit = (e) => {
    e.preventDefault();
    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"
                  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="#book">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</a>
            </div>
            <div className="foot__col">
              <h5>Elsewhere</h5>
              <a href="#">LinkedIn <span className="foot__meta">18k</span></a>
              <a href="#">Twitter / X <span className="foot__meta">2.4k</span></a>
              <a href="#">Instagram <span className="foot__meta">@jaybansal</span></a>
              <a href="#">WhatsApp <span className="foot__meta">NZ business hrs</span></a>
              <a href="mailto:hello@jaysbansal.com">hello@jaysbansal.com</a>
            </div>
          </div>
        </div>

        <div className="foot__base">
          <span>© 2026 Jay Bansal</span>
          <span>made carefully · not in a hurry</span>
        </div>
      </div>
    </footer>);

}

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