/* global React, Reveal, ArrowGlyph */

// =========================================================
// METHOD — the one idea most sellers miss: imagery sells.
// Sits between the origin story and "how I work".
// A drag-to-compare slider over a genuine rebrand of my own product.
// =========================================================
function MethodCompare() {
  const [split, setSplit] = React.useState(50);
  const ref = React.useRef(null);
  const dragging = React.useRef(false);

  const moveTo = (clientX) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    let p = ((clientX - r.left) / r.width) * 100;
    p = Math.max(3, Math.min(97, p));
    setSplit(p);
  };
  const onDown = (e) => {
    dragging.current = true;
    moveTo(e.clientX);
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
  };
  const onMove = (e) => { if (dragging.current) moveTo(e.clientX); };
  const onUp = () => { dragging.current = false; };
  const onKey = (e) => {
    if (e.key === "ArrowLeft")  { e.preventDefault(); setSplit((s) => Math.max(3, s - 4)); }
    if (e.key === "ArrowRight") { e.preventDefault(); setSplit((s) => Math.min(97, s + 4)); }
  };

  return (
    <div
      className="mthc"
      ref={ref}
      style={{ "--split": split + "%" }}
      onPointerDown={onDown}
      onPointerMove={onMove}
      onPointerUp={onUp}
      onPointerLeave={onUp}
    >
      <div className="mthc__layer mthc__after">
        <img src="assets/cmp-after-aligned.png" alt="The rebranded listing image — clean, premium, instantly legible" draggable="false" />
      </div>
      <div className="mthc__layer mthc__before">
        <img src="assets/cmp-before.png" alt="The original listing image — busy, generic, hard to read" draggable="false" />
      </div>

      <span className="mthc__tag mthc__tag--before">Before</span>
      <span className="mthc__tag mthc__tag--after">After</span>

      <div className="mthc__seam">
        <button
          className="mthc__handle"
          aria-label="Drag to compare before and after"
          onKeyDown={onKey}
        >
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M10 7l-5 5 5 5M14 7l5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>

      <span className="mthc__hint" aria-hidden="true">drag to compare</span>
    </div>
  );
}

function Method({ onBook }) {
  return (
    <section id="method" className="section mth" data-screen-label="Method">
      <div className="container">
        <div className="mth__grid">
          <Reveal className="mth__copy">
            <div className="eyebrow">The method</div>
            <h2 className="display mth__title">
              Most sellers show their product. <em>Almost nobody sells it.</em>
            </h2>
            <p className="mth__intro">
              Here&rsquo;s the shift that changed everything for me, and for the
              students who get it: <b>people buy from imagery.</b> Not a longer bullet
              list, not a louder claim &mdash; the picture does the selling, or it doesn&rsquo;t.
            </p>

            <div className="mth__points">
              <div className="mth__point">
                <span className="mth__point-k">Just showing it</span>
                <p>The buyer compares specs, can&rsquo;t feel the difference, and picks the cheapest.</p>
              </div>
              <div className="mth__point">
                <span className="mth__point-k">Actually selling it</span>
                <p>The buyer feels what it&rsquo;s for in half a second &mdash; and picks yours.</p>
              </div>
            </div>

            <div className="mth__cta">
              <button className="btn btn--primary" onClick={onBook}>
                Book a discovery call <ArrowGlyph />
              </button>
              <span className="label-mono">this is most of the work</span>
            </div>
          </Reveal>

          <Reveal className="mth__show" delay={90}>
            <MethodCompare />
          </Reveal>
        </div>

        <Reveal className="mth__caption">
          <span className="mth__caption-mark">¶</span>
          A real rebrand of one of my own products. Same bottle, same capsules
          inside &mdash; the only thing that changed was how it was shown. The market noticed.
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Method });