/* global React, Reveal, MethodCompare */

// =========================================================
// METHOD (landing variant) — Draft 1 "Editorial split":
// full-width title up top, then a text | before-after split,
// then a marquee of product listings across the bottom.
// =========================================================
const MTH_PRODUCTS = [
  {
    img: "assets/listing-hockey-hero.jpg",
    title: "Field Hockey Skills Training Mat \u2014 Designed by Olympian Shea McAleese",
    brand: "Inside Hockey",
    dollars: "139", cents: "00",
  },
  {
    img: "assets/listing-skinnies-hero.webp",
    title: "Kalahari Kabu Beef Biltong \u0026 Jerky Maker",
    brand: "Kalahari Kabu",
    dollars: "399", cents: "00",
  },
  {
    img: "assets/mrq-frother.jpg",
    title: "SpecChef Electric Milk Frother \u0026 Warmer",
    brand: "SpecChef",
    dollars: "49", cents: "00",
  },
  {
    img: "assets/mrq-sunscreen.jpg",
    title: "Skinnies Sungel SPF30 Waterless Sunscreen",
    brand: "Skinnies",
    dollars: "29", cents: "00",
  },
];

function MethodListingCard({ p, hidden }) {
  return (
    <div className="mth__listing" aria-hidden={hidden ? "true" : undefined} aria-label={hidden ? undefined : "Example Amazon listing built to sell"}>
      <div className="mth__listing-photo">
        <img src={p.img} alt={hidden ? "" : p.title} />
      </div>
      <div className="mth__listing-info">
        <p className="mth__listing-title">{p.title}</p>
        <div className="mth__listing-meta">
          <span className="mth__stars" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
          <span className="mth__listing-brand">{p.brand}</span>
        </div>
        <p className="mth__listing-price"><span className="mth__cur">$</span>{p.dollars}<span className="mth__cents">{p.cents}</span></p>
      </div>
    </div>
  );
}

function MethodLanding({ onBook }) {
  return (
    <section id="method" className="section mth mth--split" data-screen-label="Method">
      <div className="container">
        <Reveal className="mth__head">
          <div className="eyebrow">The method</div>
          <h2 className="display mth__title">
            Most people obsess over the product. <em>Almost nobody learns to sell it.</em>
          </h2>
        </Reveal>

        <div className="mth__grid">
          <Reveal className="mth__copy">
            <p className="mth__intro" style={{ marginBottom: "22px" }}>
              The truth is, almost nobody fails at Amazon purely because the product was wrong. They fail at
              <strong> one of 3 walls</strong> &mdash; and they usually <em className="em">blame the wrong one.</em>
            </p>
            <ol className="mth__walls mth__walls--ledger">
              <li className="mth__wall mth__wall--ledger">
                <span className="mth__wall-n">01</span>
                <div className="mth__wall-body">
                  <p>First, they pick a product they <span className="uline">can&rsquo;t win with</span> &mdash; then spend months finding out later.</p>
                </div>
              </li>
              <li className="mth__wall mth__wall--ledger mth__wall--key">
                <span className="mth__wall-n">02</span>
                <div className="mth__wall-body">
                  <p>The one that surprises people. Even with the right product, they never fully learn how to <span className="uline">actually sell it.</span></p>
                </div>
              </li>
              <li className="mth__wall mth__wall--ledger">
                <span className="mth__wall-n">03</span>
                <div className="mth__wall-body">
                  <p>They never really get going. <span className="uline">Knowing isn&rsquo;t doing</span> &mdash; and most people stall there for years.</p>
                </div>
              </li>
            </ol>
            <p className="mth__intro">
              I&rsquo;ll be straight: walls one and three are fixable. The middle one &mdash; <mark className="mk" style={{ fontStyle: "italic", fontWeight: 700 }}>selling instead of
              showing</mark> &mdash; is the part <strong>almost no coach can teach</strong>, because most
              don&rsquo;t know it themselves. That&rsquo;s the gap. Let me show you.
            </p>

            <div className="mth__gap">
              <div className="mth__anno" aria-hidden="true">
                <span className="mth__anno-amt">Same product.</span>
                <span className="mth__anno-sub">One shows it. One sells it.</span>
                <svg className="mth__anno-arrow" viewBox="0 0 128 44" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M4 40 C 44 42, 92 30, 122 8" />
                  <path d="M122 8 l -17 3" />
                  <path d="M122 8 l -5 16" />
                </svg>
              </div>
            </div>
          </Reveal>

          <Reveal className="mth__show" delay={90}>
            <MethodCompare />
            <div className="mth__caption">
              <span className="mth__caption-mark">¶</span>
              A real client rebrand. Same bottle, same capsules &mdash; only how it was shown
              changed. The market noticed.
            </div>
          </Reveal>
        </div>

        <Reveal className="mth__prod">
          <div className="mth__prod-kicker">Same playbook, other products &rarr;</div>
          <div className="mth__marquee">
            <div className="mth__marquee-track">
              {MTH_PRODUCTS.map((p, i) => <MethodListingCard key={"a" + i} p={p} />)}
              {MTH_PRODUCTS.map((p, i) => <MethodListingCard key={"b" + i} p={p} hidden />)}
            </div>
          </div>
          <div className="mth__caption mth__caption--listing">
            <span className="mth__caption-mark">¶</span>
            <span>Different products, one job: each <em>actually sells</em> &mdash; built to be felt in half a second, not just seen.</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { MethodLanding });