/* global React, smoothTo */

/* The VSL link: null for now, drop a URL here later (YouTube/Vimeo/Wistia embed
   or an mp4) and the placeholder swaps to the real player automatically. */
const VSL_URL = null;

function PlayIcon() {
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M5 3.5v17a1 1 0 0 0 1.54.84l13-8.5a1 1 0 0 0 0-1.68l-13-8.5A1 1 0 0 0 5 3.5z" />
    </svg>);

}

/* The video placeholder: a glass-framed 16:9 with blueprint ground + play node.
   Swaps to an <iframe>/<video> when VSL_URL is set. */
function VslPlaceholder({ duration = "VSL" }) {
  return (
    <div className="smo-glass smo-glass--hero lp-vsl-frame">
      <div className="lp-vsl" role={VSL_URL ? undefined : "button"} aria-label="Play the video">
        {VSL_URL ?
        /\.(mp4|webm)$/i.test(VSL_URL) ?
        <video src={VSL_URL} controls playsInline /> :
        <iframe src={VSL_URL} allow="autoplay; fullscreen; picture-in-picture" allowFullScreen title="Sales video" /> :

        <React.Fragment>
            <div className="lp-vsl__corner"><span className="lp-vsl__rec" /> Watch first</div>
            <div className="lp-vsl__play">
              <div className="lp-vsl__btn"><PlayIcon /></div>
              <div className="lp-vsl__label">Your sales video goes here</div>
            </div>
            <div className="lp-vsl__dur">{duration}</div>
          </React.Fragment>
        }
      </div>
    </div>);

}

/* Case-study results bar: lead with the outcome we generated for a client. */
function CaseStudyBar() {
  const stats = [
  ["$20K → $60K", "month-one revenue"],
  ["3.0x", "revenue in the first month"],
  ["$250K+", "generated to date"]];

  return (
    <div className="lp-case smo-glass">
      <div className="lp-case__label">
        <span className="lp-case__rec" /> Our latest case study • Jannis Moore
      </div>
      <div className="lp-case__stats">
        {stats.map(([fig, cap]) =>
        <div className="lp-case__stat" key={cap}>
            <div className="lp-case__fig smo-num">{fig}</div>
            <div className="lp-case__cap">{cap}</div>
          </div>
        )}
      </div>
    </div>);

}

function HeroEyebrow() {
  return (
    <p className="smo-eyebrow lp-hero__eyebrow">
      <span className="lp-hero__dot" /> For current and aspiring coaches
    </p>);

}

function HeroCopyBlock({ onBook }) {
  return (
    <React.Fragment>
      <HeroEyebrow />
      <h1 className="smo-h1 lp-hero__title">
        You do what you do best.<br />
        <span className="smo-accent">We handle everything else.</span>
      </h1>
      <p className="smo-body lp-hero__lead">
        We build and run the entire marketing and sales operation for a small number of
        coaches and info sellers, so your time goes to the one thing only you can do:
        create and deliver. We make money when you make money.
      </p>
      <div className="lp-hero__actions">
        <button className="smo-btn smo-btn--primary" onClick={onBook}>Book a call</button>
      </div>
    </React.Fragment>);

}

/* ---------- Treatment A: editorial split (text left, VSL right) ---------- */
function HeroSplit({ onBook, showLive }) {
  return (
    <section className="lp-hero lp-hero--split">
      <div className="smo-glow smo-glow--hero lp-hero__glow" />
      <div className="lp-hero__inner">
        <div className="lp-hero__grid">
          <div className="reveal is-visible">
            <HeroCopyBlock onBook={onBook} />
            {showLive && <div className="lp-hero__live">
              <div className="smo-livebar">
                <span className="smo-livebar__tag">LIVE</span>
                <span className="smo-livebar__text">New case study breakdowns dropping on YouTube</span>
              </div>
            </div>}
          </div>
          <div className="lp-hero__media reveal is-visible">
            <VslPlaceholder duration="VSL · 4:00" />
          </div>
        </div>
        <div className="reveal is-visible">
          <CaseStudyBar />
        </div>
      </div>
    </section>);

}

/* ---------- Treatment B: VSL-first (centered funnel) ---------- */
function HeroVsl({ onBook, showLive }) {
  return (
    <section className="lp-hero lp-hero--vsl">
      <div className="smo-glow smo-glow--hero lp-hero__glow" />
      <div className="lp-hero__inner reveal is-visible" data-stagger>
        <HeroEyebrow />
        <h1 className="smo-h1 lp-hero__title">
          You do what you do best.<br />
          <span className="smo-accent">We handle everything else.</span>
        </h1>
        <p className="smo-body lp-hero__lead">So you can build the $100k+/mo dream consulting business without ever touching a zap, building funnels, managing reps, or figuring out marketing campaigns.


        </p>
        <div className="lp-hero__video">
          <VslPlaceholder duration="VSL · 4:00" />
        </div>
        <div className="lp-hero__actions">
          <button className="smo-btn smo-btn--primary" onClick={onBook}>Book a call</button>
        </div>
        {showLive && <div className="lp-hero__live">
          <div className="smo-livebar">
            <span className="smo-livebar__tag">LIVE</span>
            <span className="smo-livebar__text">New case study breakdowns dropping on YouTube</span>
          </div>
        </div>}
        <CaseStudyBar />
      </div>
    </section>);

}

function LpHero({ treatment, onBook, showLive }) {
  return treatment === "vsl" ?
  <HeroVsl onBook={onBook} showLive={showLive} /> :
  <HeroSplit onBook={onBook} showLive={showLive} />;
}

Object.assign(window, { LpHero });