// Page 1 — Pre-quiz landing. VSL + form removed. Single CTA routes to quiz.
// Layout variants exposed via tweaks.page1Layout:
//   "keep-rest" — eyebrow + headline + founder + lede + founding card + CTA + bullets + trust  (DEFAULT)
//   "minimal"   — headline + founding card + CTA only
//   "lite"      — eyebrow + headline + founder + lede + founding card + CTA + trust  (no bullets)

function Page1({ tweaks, lang }) {
  const copy = window.COPY[lang || "en"] || window.COPY.en;
  const [legal, setLegal] = React.useState(null);
  const headlineVar = tweaks.headlineVariant || "A";

  React.useEffect(() => {
    const open = () => setLegal("privacy");
    window.addEventListener("open-privacy-modal", open);
    return () => window.removeEventListener("open-privacy-modal", open);
  }, []);
  const headlineData = copy.page1.headlines[headlineVar];
  const layout = tweaks.page1Layout || "keep-rest";

  const goToQuiz = () => {
    window.location.hash = "quiz";
    if (window.__vslNavigate) window.__vslNavigate("quiz");
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const showEyebrow    = layout !== "minimal";
  const showFounder    = layout !== "minimal";
  const showLede       = layout !== "minimal";
  const showVideo      = layout !== "minimal";
  const showBullets    = layout === "keep-rest";
  const showTrust      = layout !== "minimal";

  const ctaBtn = (
    <button type="button" className="btn-cta cta-primary" onClick={goToQuiz}>
      {copy.page1.ctaApply}
      <svg className="arr" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
    </button>
  );

  return (
    <div className={`page page1-layout-${layout}`}>
      <div className="shell">
        {tweaks.showMascot && layout !== "minimal" && (
          <div className="mascot-stage" aria-hidden="true">
            <img className="mascot-float" src="/assets/mascot-cashy-peek-hi.png" alt="" />
          </div>
        )}

        {showEyebrow && <div className="eyebrow">{copy.page1.eyebrow}</div>}

        <h1 className="headline"
            dangerouslySetInnerHTML={{ __html: headlineData.html }} />

        {showFounder && (
          <div className="founder-row">
            <img className="founder-photo" src="/assets/timur-founder.jpg" alt="Daniel, founder of Cashy" />
            <p className="founder-caption">{copy.page1.founderCaption}</p>
          </div>
        )}

        {showVideo && (
          <window.VideoPlayer
            variant="teaser"
            duration={140}
            showSubtitle={false}
            freeBadge={copy.page1.freeBadge}
            poster="/assets/video-poster.png"
            onPlay={goToQuiz}
          />
        )}

        <div className="founding-card">
          <div className="founding-card-head">
            <span className="founding-card-shield" aria-hidden="true">
              <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>
            </span>
            <span className="founding-card-eyebrow">{copy.page1.foundingCard.eyebrow}</span>
          </div>
          <h3 className="founding-card-title">{copy.page1.foundingCard.title}</h3>
          <p className="founding-card-body">{copy.page1.foundingCard.body}</p>
          <div className="founding-card-spots">
            <span className="spots-pill">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>
              <strong>7</strong> of 10 spots remaining
            </span>
          </div>

          <div className="founding-card-cta">
            {ctaBtn}
            <p className="form-microcopy">
              <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5v3H5v12h14V10h-2V7a5 5 0 00-5-5zm-3 8V7a3 3 0 016 0v3H9z"/></svg>
              {copy.page1.microSecondary}
            </p>
          </div>
        </div>

        {showLede && <p className="lede lede-after-video">{copy.page1.lede}</p>}

        {showBullets && (
          <ul className="check-list">
            {copy.page1.bullets.map((b, i) => (
              <li key={i}>
                <span className="ico"><svg viewBox="0 0 24 24"><path d="M5 12l5 5L20 7"/></svg></span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        )}

        {showTrust && (
          <div className="trust-row">
            {copy.page1.trust.map((t, i) => (
              <div className="item" key={i}>
                <span className="star"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.6L6 22l1.5-7.2L2 10l7.1-1.1z"/></svg></span>
                {t}
              </div>
            ))}
          </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")}>{copy.privacy}</button>
          <span className="dot">·</span>
          <button className="linklike" onClick={() => setLegal("disclaimer")}>{copy.disclaimer}</button>
          <span className="dot">·</span>
          <button className="linklike" onClick={() => setLegal("terms")}>{copy.terms}</button>
          <span className="dot">·</span>
          <button className="linklike" onClick={() => setLegal("imprint")}>{copy.imprint}</button>
          <span className="dot">·</span>
          <button className="linklike" onClick={() => setLegal("contact")}>{copy.contact}</button>
          <span className="dot">·</span>
          <button className="linklike" onClick={() => window.dispatchEvent(new Event("open-cookie-settings"))}>{copy.page1.cookieSettings}</button>
        </div>
        <window.LegalModal open={!!legal} kind={legal} onClose={() => setLegal(null)} />
      </div>
    </div>
  );
}

window.Page1 = Page1;