// variations.jsx — 5 hipóteses para Step 1 do quiz Desafio 28D
// Copy editável via Tweaks. \n vira quebra de linha.

function imgSrc(assets, name) {
  const rw = window.QUIZ_IMG_REWRITE && window.QUIZ_IMG_REWRITE[name];
  return rw || (assets + '/' + name);
}

const NL = ({ text }) => {
  const parts = (text || '').split(/\n/);
  return parts.map((p, i) => (
    <React.Fragment key={i}>
      {i > 0 && <br/>}
      {p}
    </React.Fragment>
  ));
};

const Logo = ({ size = "md" }) => {
  const px = size === "lg" ? 80 : size === "sm" ? 44 : 60;
  const src = window.QUIZ_ASSETS ? window.QUIZ_ASSETS + '/logo.webp' : 'logo.webp';
  return (
    <img src={src} alt="Desafio 28D"
      style={{
        width: px, height: px, objectFit: "contain",
        flex: "0 0 auto",
        filter: "drop-shadow(0 2px 6px rgba(0,0,0,.4))",
      }}/>
  );
};

const StatusBar = () => (
  <div className="mob-sb">
    <span>9:41</span>
    <span className="mob-sb-r">
      <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M1 7h2v3H1zM5 5h2v5H5zM9 3h2v7H9zM13 1h2v9h-2z"/></svg>
      <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 2c2.4 0 4.6.9 6.3 2.5l-.9.9C11.4 4 9.5 3.2 7.5 3.2S3.6 4 2.1 5.4l-.9-.9C2.9 2.9 5.1 2 7.5 2zm0 2.5c1.5 0 2.9.6 3.9 1.5l-.9.9c-.8-.8-1.9-1.2-3-1.2s-2.2.4-3 1.2l-.9-.9c1-.9 2.4-1.5 3.9-1.5zm0 2.5c.7 0 1.4.3 1.9.7l-.9.9c-.3-.2-.6-.4-1-.4s-.7.1-1 .4l-.9-.9c.5-.4 1.2-.7 1.9-.7z"/></svg>
      <svg width="25" height="11" viewBox="0 0 25 11" fill="none" stroke="currentColor" strokeWidth="1"><rect x=".5" y=".5" width="21" height="10" rx="2.5"/><rect x="2" y="2" width="16" height="7" rx="1" fill="currentColor"/><path d="M23 4v3" strokeWidth="1.5" strokeLinecap="round"/></svg>
    </span>
  </div>
);

const TopBar = ({ light }) => (
  <div style={{ display: "flex", justifyContent: "center" }}>
    <Logo size="md" />
  </div>
);

// V0R — MAIN STYLE · paleta redesign
function V0Redesign({ t, onStart, embedded }) {
  const assets = window.QUIZ_ASSETS || '../assets';
  return (
    <div className="mob dark" data-screen-label="V0 Redesign">
      {!embedded && <StatusBar />}
      <div className="mob-c" style={{ paddingTop: embedded ? 20 : 'max(12px, env(safe-area-inset-top))', paddingBottom: 36, display: 'flex', flexDirection: 'column', alignItems: 'center', minHeight: '100%' }}>
        <Logo size="lg" />

        <div className="chip">Quiz de Calistenia</div>

        <h1 className="q-title lg" style={{ textAlign: 'center' }}>
          Descubra o treino <span style={{ color: 'var(--brand)' }}>certo</span> para o seu perfil
        </h1>

        <p className="q-sub" style={{ textAlign: 'center' }}>
          Calistenia personalizada para o seu nível — sem academia, sem equipamento.
        </p>

        <div className="v0r-hero" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', flex: '0 0 auto' }}>
          <img
            src={imgSrc(assets, 'man-woman.webp')}
            alt=""
            fetchpriority="high"
            style={{ maxWidth: '92%', height: '100%', width: 'auto', objectFit: 'contain', borderRadius: 8 }}
          />
        </div>

        {window.QUIZ_INTRO_NOTE && (
          <div className="chip brand">
            Para Homens e Mulheres
          </div>
        )}

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
          <div style={{ display: 'flex', gap: 2, color: '#FFB800' }} aria-label="5 estrelas">
            {[0,1,2,3,4].map(i => (
              <svg key={i} width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M10 1l2.6 5.3L18 7l-4 3.9.9 5.6L10 14l-5 2.5.9-5.6L2 7l5.4-.7L10 1z"/>
              </svg>
            ))}
          </div>
          <p style={{ textAlign: 'center', fontSize: 13.5, color: 'rgba(255,255,255,.85)', margin: 0, lineHeight: 1.4 }}>
            <strong style={{ color: '#fff' }}>+40.818 pessoas</strong> já fizeram este quiz
          </p>
        </div>

        <button className="cta" onClick={onStart} style={{ width: '100%' }}>
          COMEÇAR MEU QUIZ <span className="arr">→</span>
        </button>

        <p className="cta-help" style={{ opacity: 0.8, fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="12" cy="12" r="10"/>
            <polyline points="12 6 12 12 16 14"/>
          </svg>
          Menos de 2 minutos · Gratuito
        </p>
      </div>
    </div>
  );
}

// V0 — MAIN STYLE (controle)
function V0Main({ t, onStart, embedded }) {
  const assets = window.QUIZ_ASSETS || '../assets';
  return (
    <div className="mob dark" data-screen-label="V0 Main" style={{ fontFamily: "'Poppins', sans-serif" }}>
      {!embedded && <StatusBar />}
      <div className="mob-c" style={{ paddingTop: embedded ? 18 : 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Logo size="md" />

        <h1 style={{ textAlign: 'center', marginTop: 24, marginBottom: 4, fontFamily: "'Poppins', sans-serif" }}>
          <span style={{ display: 'block', fontSize: 20, fontWeight: 700, color: '#FFD700', letterSpacing: '0.03em', lineHeight: 1.0, marginBottom: 2 }}>
            O seu corpo pode
          </span>
          <span style={{ display: 'block', fontSize: 18, fontWeight: 700, color: '#FFD700', lineHeight: 1.0 }}>
            MUDAR VISIVELMENTE em 28 dias!
          </span>
        </h1>

        <div style={{ flex: '1 1 auto', minHeight: 0, maxHeight: 280, width: '100%', display: 'flex', overflow: 'hidden', margin: '8px 0' }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
            <img
              src={imgSrc(assets, 'man-woman.webp')}
              alt=""
              fetchpriority="high"
              style={{ maxWidth: '75%', maxHeight: '100%', width: 'auto', height: 'auto', objectFit: 'contain', borderRadius: 6 }}
            />
          </div>
        </div>

        <p style={{ textAlign: 'center', margin: '20px 0', fontSize: 15, fontWeight: 700, color: '#ffffff', lineHeight: 1.6, fontFamily: "'Poppins', sans-serif" }}>
          <span style={{ display: 'block' }}>Responda esse teste rápido ⚡</span>
          <span style={{ display: 'block' }}>E descubra agora mesmo! 👇</span>
        </p>

        <button
          onClick={onStart}
          style={{
            width: '100%', minHeight: 56, padding: '0.55rem 1rem', marginBottom: 12,
            background: '#34A853', color: '#ffffff', border: 'none',
            borderBottom: '8px solid #257a3c', borderRadius: 6,
            fontSize: 18, fontWeight: 500, letterSpacing: '0.05em',
            textTransform: 'uppercase', cursor: 'pointer',
            fontFamily: "'Poppins', sans-serif",
            animation: 'btnPulse 1.5s ease-in-out infinite'
          }}
        >
          COMEÇAR AGORA!
        </button>

        <p style={{ textAlign: 'center', fontSize: 16, color: '#ffffff', fontFamily: "'Poppins', sans-serif" }}>
          ⏳ Leva menos de 2 minutos
        </p>
      </div>
    </div>
  );
}

// V1 — IDENTIFICAÇÃO DIRETA
function V1Identification({ t, onStart, embedded }) {
  return (
    <div className="mob dark" data-screen-label="V1 Identificação">
      {!embedded && <StatusBar />}
      <div className="mob-c" style={{ paddingTop: embedded ? 18 : 8 }}>
        <TopBar />
        <div style={{ marginTop: 28 }}>
          <span className="chip brand">{t.v1Eyebrow}</span>
        </div>
        <h1 className="h-display" style={{ fontSize: 70, marginTop: 10, marginBottom: 0 }}>
          <NL text={t.v1Headline}/>
        </h1>
        <p className="h-sub" style={{ fontSize: 18, marginTop: 14, marginBottom: 4 }}>
          <NL text={t.v1Sub}/>
        </p>
        <ul className="v1-spec" style={{ listStyle: "none", padding: 0, margin: "20px 0 0" }}>
          <li><span className="x">×</span><span>Sem academia</span></li>
          <li><span className="x">×</span><span>Sem peso, sem barra</span></li>
          <li><span className="check">✓</span><span><strong>12 min/dia</strong>, em casa</span></li>
        </ul>
        <div className="spacer" />
        {t.showSocialProof && (
          <div className="row" style={{ marginBottom: 12, gap: 12 }}>
            <div className="avstack"><i/><i/><i/><i/></div>
            <div style={{ fontSize: 13, lineHeight: 1.25, opacity: .8 }}>
              <strong style={{ color: "#f5f1ea" }}>+{t.studentCount.toLocaleString("pt-BR")}</strong> caras<br/>
              saíram do mesmo ponto
            </div>
          </div>
        )}
        <button className="cta" onClick={onStart}>{t.v1Cta} <span className="arr">→</span></button>
        <div className="cta-help"><span>⏱</span> 90 segundos · sem cadastro</div>
      </div>
    </div>
  );
}

// V2 — PROVA SOCIAL PESADA
function V2SocialProof({ t, onStart, embedded }) {
  return (
    <div className="mob light" data-screen-label="V2 Prova Social">
      {!embedded && <StatusBar />}
      <div className="mob-c" style={{ paddingTop: embedded ? 18 : 8 }}>
        <TopBar light />
        <div style={{ marginTop: 24 }}>
          <span className="chip">{t.v2Eyebrow}</span>
        </div>
        <div style={{ marginTop: 14 }}>
          <div className="v2-num">
            <span className="plus">+</span>{(t.v2Count || t.studentCount).toLocaleString("pt-BR")}
          </div>
          <p className="h-sub" style={{ fontSize: 17, fontWeight: 600, color: "rgba(10,10,10,.85)", marginTop: 6 }}>
            <NL text={t.v2Sub}/>
          </p>
        </div>
        {t.showSocialProof && (
          <div style={{ marginTop: 18 }}>
            {window.QUIZ_ASSETS
              ? <img src={window.QUIZ_ASSETS + '/testimonials.webp'} alt="Depoimentos"
                  style={{ width: '100%', borderRadius: 14, display: 'block' }}/>
              : (
                <div className="v2-grid">
                  <div className="v2-ba"><span>—12kg · 28d</span></div>
                  <div className="v2-ba b"><span>+4kg massa</span></div>
                  <div className="v2-ba c"><span>—8kg · 28d</span></div>
                </div>
              )
            }
          </div>
        )}
        <div className="row" style={{ marginTop: 16, gap: 10 }}>
          <span className="stars">★★★★★</span>
          <span style={{ fontSize: 13, fontWeight: 600 }}>4,9</span>
          <span className="tiny" style={{ marginLeft: 4 }}>· aprovado por 96% dos alunos</span>
        </div>
        <div className="spacer" />
        <p className="h-sub" style={{ fontSize: 15, marginBottom: 10 }}>
          <NL text={t.v2Tagline}/>
        </p>
        <button className="cta" style={{ "--cta-fg": "#fff" }} onClick={onStart}>{t.v2Cta}</button>
        <div className="cta-help"><span>🔒</span> Resposta confidencial · 2 min</div>
      </div>
    </div>
  );
}

// V3 — ZERO INTRO
function V3NoIntro({ t, onStart, embedded }) {
  const opts = [t.v3Opt1, t.v3Opt2, t.v3Opt3, t.v3Opt4];
  return (
    <div className="mob dark" data-screen-label="V3 Zero Intro">
      {!embedded && <StatusBar />}
      <div className="mob-c" style={{ paddingTop: embedded ? 18 : 8, gap: 18 }}>
        <div className="row-spread">
          <Logo size="md" />
        </div>
        <div className="prog"><i style={{ width: "6%" }} /></div>
        <div style={{ marginTop: 12 }}>
          <p className="tiny" style={{ marginBottom: 12, letterSpacing: ".15em", textTransform: "uppercase", opacity: .55 }}>
            Pergunta 1 de 17
          </p>
          <h1 className="v3-q"><NL text={t.v3Question}/></h1>
        </div>
        <div className="v3-opts" style={{ marginTop: 6 }}>
          {opts.map((o, i) => (
            <button key={i} className="v3-opt" onClick={onStart}>
              <span>{o}</span>
              <span className="arr">→</span>
            </button>
          ))}
        </div>
        <div className="spacer" />
        <div className="notice">
          <span className="dot" />
          <span>
            Nada de cadastro. Resposta confidencial.<br/>
            Use seu plano em <strong style={{ color: "#f5f1ea" }}>90 segundos</strong>.
          </span>
        </div>
      </div>
    </div>
  );
}

// V4 — MÉTODO ESPECÍFICO
function V4Method({ t, onStart, embedded }) {
  return (
    <div className="mob dark" data-screen-label="V4 Método">
      {!embedded && <StatusBar />}
      <div className="mob-c" style={{ paddingTop: embedded ? 18 : 8, gap: 16 }}>
        <TopBar />
        <div style={{ marginTop: 16 }}>
          <span className="chip">{t.v4Eyebrow}</span>
        </div>
        <h1 className="h-display" style={{ fontSize: 40, lineHeight: 1, marginTop: 6, marginBottom: 0 }}>
          <NL text={t.v4Headline}/>
        </h1>
        <div className="v4-strip" style={{ marginTop: 8 }}>
          <div><div className="num">12</div><div className="lbl">min/dia</div></div>
          <div><div className="num">0</div><div className="lbl">equipam.</div></div>
          <div><div className="num">28</div><div className="lbl">dias</div></div>
        </div>
        {t.showSocialProof && (
          <div className="row-spread" style={{ marginTop: 4, padding: "12px 14px", border: "1px solid var(--line-dark)", borderRadius: 12 }}>
            <div className="row" style={{ gap: 10 }}>
              <div className="avstack"><i/><i/><i/></div>
              <div style={{ fontSize: 13, lineHeight: 1.2 }}>
                <strong>+{t.studentCount.toLocaleString("pt-BR")}</strong> alunos<br/>
                <span className="tiny">só calistenia · 4,9 ★</span>
              </div>
            </div>
            <span className="stars" style={{ fontSize: 13 }}>★★★★★</span>
          </div>
        )}
        <div className="spacer" />
        <button className="cta" onClick={onStart}>{t.v4Cta} <span className="arr">→</span></button>
        <div className="cta-help"><span>⚡</span> 17 perguntas · 90 segundos</div>
      </div>
    </div>
  );
}

// V5 — LOSS AVERSION
function V5LossAversion({ t, onStart, embedded }) {
  return (
    <div className="mob dark" data-screen-label="V5 Loss Aversion">
      {!embedded && <StatusBar />}
      <div className="mob-c" style={{ paddingTop: embedded ? 18 : 8, gap: 14 }}>
        <TopBar />
        <h1 className="h-display" style={{ fontSize: 36, lineHeight: 1.02, marginTop: 18, marginBottom: 0 }}>
          <NL text={t.v5Headline}/>
        </h1>
        <p className="h-sub" style={{ fontSize: 15, marginTop: 8 }}>
          <NL text={t.v5Sub}/>
        </p>
        <div className="v5-weeks" style={{ marginTop: 8 }}>
          <div className="v5-week past">
            <div className="wk">Semana —2</div>
            <div className="desc strike">Decidir começar.</div>
            <div className="stat">×</div>
          </div>
          <div className="v5-week past">
            <div className="wk">Semana —1</div>
            <div className="desc strike">"Segunda eu começo."</div>
            <div className="stat">×</div>
          </div>
          <div className="v5-week now">
            <div className="wk">Esta semana</div>
            <div className="desc">Responder o quiz.</div>
            <div className="stat">90s</div>
          </div>
        </div>
        <div className="spacer" />
        {t.showSocialProof && (
          <p className="tiny center" style={{ opacity: .6, marginBottom: 6 }}>
            +36.818 pessoas pararam de adiar nas últimas 4 semanas.
          </p>
        )}
        <button className="cta" onClick={onStart}>{t.v5Cta} <span className="arr">→</span></button>
        <div className="cta-help"><span>⏱</span> 90 segundos · sem cadastro</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  V1Identification, V2SocialProof, V3NoIntro, V4Method, V5LossAversion, Logo, StatusBar,
});