/* global React, ArrowGlyph */
// ============================================================
// Ways to work together  +  Lead magnet (product-research filter)
// Uses the site's own token classes (.section/.container/.display/
// .eyebrow/.btn/.label-mono) so it adapts to every palette + mode.
// ============================================================

// GHL inbound webhook — feeds the "[JSB] Free Checklist" automation.
// Same endpoint the standalone Free Checklist page uses, so both forms
// enrol leads into the one workflow.
const GHL_WEBHOOK_URL = "https://services.leadconnectorhq.com/hooks/wYXBidtXouCwrtpTJG30/webhook-trigger/8b63d1ea-59e1-4aaa-a806-fad1308be66c";

// The checklist file. Save the PDF as exactly this name and upload it to the
// site root (next to index.html). Submitting the form downloads it instantly.
const PDF_FILE = "before-you-spend-a-dollar.pdf";

function LMCheck() {
  return (
    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M3 7.4l2.6 2.6L11 4.4" stroke="#14201a" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function WaysToWork({ onBook }) {
  return (
    <section className="section" id="ways">
      <div className="container">
        <div className="ways-head">
          <div>
            <div className="eyebrow">Ways to work together</div>
            <h2 className="display" style={{ marginTop: 18 }}>
              Three honest paths.<br /><em>One</em> next move.
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: "38ch" }}>
            No tiers, no upsells — just three ways in, depending on where
            you are and how closely you want to work with me.
          </p>
        </div>

        <div className="ways-grid">
          <article className="way-card">
            <div className="way-top">
              <span className="way-num">01 · Self-paced</span>
              <span className="way-price">Instant access</span>
            </div>
            <h3 className="display way-name">Learn the system</h3>
            <p className="way-for">For sellers who want to start now, on their own time and budget.</p>
            <div className="way-rule"></div>
            <ul className="way-list">
              <li>The full playbook: product → listing → ads → the boring middle</li>
              <li>Templates, calculators &amp; checklists I use daily</li>
              <li>Lifetime access and the private community</li>
            </ul>
            <div className="way-foot">
              <div className="way-cad">Start today · go at your pace</div>
              <button className="btn btn--ghost" onClick={onBook}>Get instant access <ArrowGlyph /></button>
            </div>
          </article>

          <article className="way-card way-card--feature">
            <span className="way-tag">Most sellers start here</span>
            <div className="way-top">
              <span className="way-num">02 · Cohort</span>
              <span className="way-price">By application</span>
            </div>
            <h3 className="display way-name">Build with a group</h3>
            <p className="way-for">For sellers who want structure, accountability and a room of peers.</p>
            <div className="way-rule"></div>
            <ul className="way-list">
              <li>A live, guided program over a few focused weeks</li>
              <li>Weekly group calls with me — your questions, real answers</li>
              <li>A small cohort, capped on purpose</li>
            </ul>
            <div className="way-foot">
              <div className="way-cad">By application · next cohort soon</div>
              <button className="btn btn--primary" onClick={onBook}>Apply for the cohort <ArrowGlyph /></button>
            </div>
          </article>

          <article className="way-card">
            <div className="way-top">
              <span className="way-num">03 · 1:1</span>
              <span className="way-price">By application</span>
            </div>
            <h3 className="display way-name">Work with me directly</h3>
            <p className="way-for">For committed sellers ready to move fast with a coach in their corner.</p>
            <div className="way-rule"></div>
            <ul className="way-list">
              <li>Private sessions, built around your products</li>
              <li>Direct access to me between calls</li>
              <li>Fully tailored — no generic curriculum</li>
            </ul>
            <div className="way-foot">
              <div className="way-cad">By application only · a few seats</div>
              <button className="btn btn--ghost" onClick={onBook}>Request a 1:1 spot <ArrowGlyph /></button>
            </div>
          </article>
        </div>

        <p className="ways-note">
          Not sure which fits? <a href="#" onClick={(e) => { e.preventDefault(); onBook && onBook(); }}>Book a discovery call</a> and
          I'll point you to the right path — even if it isn't with me.
        </p>
      </div>
    </section>
  );
}

function LeadMagnet({ eyebrow = "Free · 1-page PDF" } = {}) {
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | sending | done | error

  const submit = (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)) { setStatus("error"); return; }

    // Google Ads — Checklist Opt-in conversion
    if (typeof gtag === "function") {
      gtag('event', 'conversion', { 'send_to': 'AW-757764531/o5ATCLfZjL0cELOjqukC' });
    }

    // Enrol the lead into the GHL "Free Checklist" automation.
    if (GHL_WEBHOOK_URL) {
      const params = new URLSearchParams({
        email: v,
        source: "Homepage checklist opt-in"
      });
      // GET + no-cors so the browser never blocks the fire-and-forget request.
      fetch(GHL_WEBHOOK_URL + "?" + params.toString(), {
        method: "GET",
        mode: "no-cors"
      }).catch(() => {});
    }
    // Deliver the checklist instantly.
    const a = document.createElement("a");
    a.href = PDF_FILE;
    a.setAttribute("download", PDF_FILE);
    document.body.appendChild(a);
    a.click();
    a.remove();
    setStatus("done");
  };

  return (
    <section className="section section--tight" id="checklist">
      <div className="container" style={{ position: "relative" }}>
        <div className="lm-note-m" aria-hidden="true">
          <span className="lm-note-m-txt">Keep this in your pocket!</span>
          <svg className="lm-note-m-arrow" viewBox="0 0 96 80" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M60 4 C 30 20, 28 48, 50 72" />
            <path d="M50 72 l -15 -7" />
            <path d="M50 72 l 7 -15" />
          </svg>
        </div>
        <div className="lm-band">
          <div className="lm-copy">
            <div className="eyebrow eyebrow--accent">{eyebrow}</div>
            <h3 className="display">The filter I run before a student spends a <em>dollar</em>.</h3>
            <p className="lm-desc">
              The exact product-research checks I use to kill bad ideas fast —
              so your first product isn't your most expensive lesson.
            </p>
            <ul className="lm-bullets">
              <li>The 5 filters every idea must clear before you spend a dollar</li>
              <li>Real demand, honest margin &amp; competition you can actually beat</li>
              <li>The fastest way to kill a bad product — while saying no is still free</li>
            </ul>

            {status === "done" ? (
              <p className="lm-success">Your checklist is downloading now. If it didn't start, <a href={PDF_FILE} download>grab it here</a>. Stuck on any of it? Email me at <a href="mailto:hello@jaysbansal.com">hello@jaysbansal.com</a>.</p>
            ) : (
              <form className="lm-form" onSubmit={submit} noValidate>
                <input
                  className="lm-input"
                  type="email"
                  placeholder="you@email.com"
                  value={email}
                  onChange={(e) => { setEmail(e.target.value); if (status === "error") setStatus("idle"); }}
                  aria-label="Your email address"
                  aria-invalid={status === "error"}
                />
                <button className="btn btn--primary btn--lg" type="submit">
                  {status === "sending" ? "Sending…" : "Send me the checklist"}
                </button>
              </form>
            )}
            <p className="lm-micro">
              {status === "error" ? "Please enter a valid email address." : "Instant download. No spam — unsubscribe anytime."}
            </p>
          </div>

          <div className="doc-wrap" aria-hidden="true">
            <div className="doc">
              <div className="doc__k">Product-research filter</div>
              <div className="doc__h">Before you<br />spend a dollar</div>
              <ul className="doc__list">
                <li className="doc__item"><span className="doc__dot"><LMCheck /></span>Real demand, not a fad</li>
                <li className="doc__item"><span className="doc__dot"><LMCheck /></span>Margin after every fee</li>
                <li className="doc__item"><span className="doc__dot"><LMCheck /></span>Competition you can beat</li>
                <li className="doc__item"><span className="doc__dot"><LMCheck /></span>A clear angle to win</li>
                <li className="doc__item"><span className="doc__dot"><LMCheck /></span>Sane size &amp; shipping</li>
              </ul>
              <div className="doc__rule"></div>
              <div className="doc__foot">1-page PDF · free</div>
            </div>
          </div>
        </div>
        <div className="lm-anno" aria-hidden="true" style={{ left: -98, top: 66 }}>
          <span className="lm-anno-txt">Keep this in your pocket!</span>
          <svg className="lm-anno-arrow" viewBox="0 0 128 40" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M4 10 C 42 20, 84 26, 122 28" />
            <path d="M122 28 l -15 -6" />
            <path d="M122 28 l -13 8" />
          </svg>
        </div>
      </div>
    </section>
  );
}
