// Page 2 — Watch page
// Uses window.VideoPlayer

function Page2({ tweaks, lang }) {
  const [progress, setProgress] = React.useState(0);
  const [lightbox, setLightbox] = React.useState(false);
  const [legal, setLegal] = React.useState(null);
  const copy = window.COPY[lang || "en"] || window.COPY.en;
  const c = copy.page2;

  React.useEffect(() => {
    const open = () => setLegal("privacy");
    window.addEventListener("open-privacy-modal", open);
    return () => window.removeEventListener("open-privacy-modal", open);
  }, []);

  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === "Escape") setLightbox(false); };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [lightbox]);

  const dashItem = c.seeItWork[0];

  return (
    <div className="page">
      <div className="shell shell-wide">

        <div className="watch-head">
          <div className="eyebrow">{c.eyebrow}</div>
          <h1 className="headline"
              dangerouslySetInnerHTML={{ __html: c.headlineHtml }} />
          <p className="watch-sub">{c.headlineSub}</p>
        </div>

        <div className="shell">
          <window.BunnyPlayer
            libraryId={655495}
            videoId="5eb5914c-b42f-4f5d-8f27-f871d9e38e45"
            onProgress={setProgress}
          />
        </div>

        <div className="cta-block cta-block-founding">
          <div className="cta-eyebrow">{c.cta1Eyebrow}</div>
          <h2>{c.cta1Title}</h2>
          <p className="sub">{c.cta1Sub}</p>
          <a className="btn-cta" href="#quiz" onClick={window.openCashyCall}>
            {c.cta1Btn}
            <svg className="arr" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <p className="fineprint">{c.cta1Fine}</p>
        </div>

        {/* See it work — admin dashboard preview */}
        <div className="see-work">
          <div className="section-head">
            <div className="kicker">{c.seeItWorkEyebrow}</div>
            <h2>{c.seeItWorkTitle}</h2>
          </div>
          <button
            type="button"
            className="dash-card"
            onClick={() => setLightbox(true)}
            aria-label="Open admin dashboard preview"
          >
            <div className="dash-frame">
              <div className="dash-chrome" aria-hidden="true">
                <span className="dot r"></span>
                <span className="dot y"></span>
                <span className="dot g"></span>
                <span className="dash-url">app.cashy.ai/admin</span>
              </div>
              <div className="dash-img-wrap">
                <img src={dashItem.asset} alt={dashItem.title} draggable="false" />
                <div className="dash-zoom-hint">
                  <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/><path d="M11 8v6M8 11h6"/></svg>
                  <span>{c.seeItWorkHint}</span>
                </div>
              </div>
            </div>
            <div className="dash-meta">
              <h4>{dashItem.title}</h4>
              <p>{dashItem.body}</p>
            </div>
          </button>
        </div>

        {lightbox && (
          <div className="lightbox" onClick={() => setLightbox(false)} role="dialog" aria-modal="true">
            <button
              className="lightbox-close"
              type="button"
              onClick={(e) => { e.stopPropagation(); setLightbox(false); }}
              aria-label="Close"
            >
              <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
            <div className="lightbox-inner" onClick={(e) => e.stopPropagation()}>
              <img src={dashItem.asset} alt={dashItem.title} />
              <div className="lightbox-cap">{dashItem.title}</div>
            </div>
          </div>
        )}

        {/* Live demo — qualification thread video */}
        <div className="live-demo">
          <div className="section-head">
            <div className="kicker">{c.liveDemoEyebrow}</div>
            <h2>{c.liveDemoTitle}</h2>
            <p className="section-sub">{c.liveDemoSub}</p>
          </div>
          <div className="shell">
            <window.VideoPlayer
              variant="teaser"
              duration={184}
              posterSubtitle={c.liveDemoSubtitle}
              freeBadge={c.liveDemoBadge}
            />
            <p className="placeholder-note">{c.liveDemoNote}</p>
          </div>
        </div>

        {/* Real results / testimonial block — placeholders, replace with real coach footage */}
        <div className="testimonial-block">
          <div className="section-head">
            <div className="kicker">{c.testimonialEyebrow}</div>
            <h2>{c.testimonialHeadline}</h2>
          </div>
          <div className="t-card">
            <div className="t-video" aria-label="Coach testimonial video">
              <div className="t-video-placeholder">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
                <span>{c.testimonialPlaceholder}</span>
              </div>
            </div>
            <div className="t-content">
              <p className="t-quote">"{c.testimonialQuote}"</p>
              <div className="t-attribution">
                <div className="t-avatar" aria-hidden="true">
                  {c.testimonialAvatar
                    ? <img src={c.testimonialAvatar} alt="" />
                    : <span className="t-avatar-fallback">{(c.testimonialName || "?").trim().charAt(0)}</span>}
                </div>
                <div className="t-meta">
                  <div className="t-name">{c.testimonialName}</div>
                  <div className="t-handle">{c.testimonialHandle} · {c.testimonialNiche}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 30-day timeline */}
        <div className="timeline-block">
          <div className="section-head">
            <div className="kicker">{c.timelineKicker}</div>
            <h2>{c.timelineTitle}</h2>
          </div>
          <p className="timeline-lead">{c.timelineLead}</p>
          <div className="timeline-list">
            {c.timeline.map((t, i) => (
              <div className="timeline-row" key={i}>
                <div className="timeline-day">
                  <span className="day-pill">{t.day}</span>
                </div>
                <div className="timeline-spine" aria-hidden="true">
                  <span className="dot"></span>
                  {i < c.timeline.length - 1 && <span className="line"></span>}
                </div>
                <div className="timeline-body">
                  <p>{t.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="guarantee">
          <div className="shield">
            <svg viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>
          </div>
          <h3>{c.guaranteeTitle}</h3>
          <p className="guarantee-why">{c.guaranteeWhy}</p>
          <p>{c.guaranteeBody}</p>
          <a className="btn-cta guarantee-cta" href="#quiz" onClick={window.openCashyCall}>
            {c.guaranteeCta}
            <svg className="arr" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>

        {/* Comparison */}
        <div className="compare-block">
          <div className="section-head">
            <div className="kicker">{c.compareKicker}</div>
            <h2>{c.compareTitle}</h2>
          </div>
          <div className="compare-grid">
            {c.compare.map((it, i) => (
              <div className="compare-card" key={i}>
                <div className="compare-vs">{it.vs}</div>
                <p>{it.body}</p>
              </div>
            ))}
          </div>
          <div className="cta-after-compare">
            {c.compareFootnote && <p className="compare-footnote">{c.compareFootnote}</p>}
            <p className="sub">{c.cta2Sub}</p>
          </div>
        </div>

        <div className="faq-block">
          <div className="section-head">
            <div className="kicker">{c.faqKicker}</div>
            <h2>{c.faqTitle}</h2>
          </div>
          <div className="faq-list">
            {c.faq.map((f, i) => (
              <details className="faq-item" key={i}>
                <summary>
                  <span className="q-text">{f.q}</span>
                  <span className="q-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
                  </span>
                </summary>
                <div className="a-body">
                  <p>{f.a}</p>
                </div>
              </details>
            ))}
          </div>
        </div>

        <div className="final-cta">
          <h2>{c.finalHeadline}</h2>
          <div className="two-options">
            <p className="opt"><span className="opt-num">1</span>{c.finalBodyOption1.replace(/^\S+\s*\d+:\s*/, "")}</p>
            <p className="opt opt-pref"><span className="opt-num">2</span>{c.finalBodyOption2.replace(/^\S+\s*\d+:\s*/, "")}</p>
          </div>
          <a className="btn-cta" href="#quiz" onClick={window.openCashyCall}>
            {c.finalCta}
            <svg className="arr" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <p className="fineprint">{c.finalFine}</p>
        </div>

        <div className="page-footer">
          <img src="/assets/mascot-cashy.webp" alt="" />
          <span>{copy.footer}</span>
          <span className="dot">·</span>
          <button className="linklike" onClick={() => setLegal("privacy")}>{c.legalLink}</button>
          <span className="dot">·</span>
          <button className="linklike" onClick={() => window.dispatchEvent(new Event("open-cookie-settings"))}>{c.cookieSettings}</button>
        </div>
        <window.LegalModal open={!!legal} kind={legal} onClose={() => setLegal(null)} />
      </div>
    </div>
  );
}

window.Page2 = Page2;