/* 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.
// ============================================================

// To enable automatic delivery, set this to your email provider's
// form-submit endpoint (MailerLite / ConvertKit / Beehiiv / Formspree…).
// While empty, the form falls back to a pre-filled email to hello@jaysbansal.com.
const LEAD_ENDPOINT = "https://formspree.io/f/mredvqgv";

// 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">Limited spots</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() {
  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; }
    // Push the email to Formspree (lands in your inbox + dashboard).
    if (LEAD_ENDPOINT) {
      fetch(LEAD_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({ email: v, _subject: "New checklist signup", source: "Before you spend a dollar checklist" }),
      }).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">
        <div className="lm-band">
          <div className="lm-copy">
            <div className="eyebrow eyebrow--accent">Free · 1-page PDF</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 7 questions that disqualify 90% of "good" products</li>
              <li>My rough margin math, before you order a sample</li>
              <li>The red flags I never ignore on a listing</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>
    </section>
  );
}