// Quiz Salário-Maternidade — main app.

const HERO_VARIANTS = {
  value: {
    eyebrow: 'Salário-maternidade INSS',
    headline: <>Você tem direito a até <span className="em-amount">R$ 6.484</span> do INSS. Mesmo desempregada.</>,
    sub: 'Sem custo, sem cadastro complicado. Análise grátis pela Camilly em 1 minuto.',
    photo: 'assets/photos/hero-pregnant.jpg',
  },
  question: {
    eyebrow: 'Salário-maternidade',
    headline: <>O INSS pode te dever <span className="em-amount">até R$ 6.484</span>. Mesmo desempregada.</>,
    sub: 'Sem custo, sem cadastro complicado. Análise grátis pela Camilly em 1 minuto.',
    photo: 'assets/photos/mae-janela.jpg',
  },
  emotional: {
    eyebrow: 'Pra mães que estão chegando agora',
    headline: <>Você pode estar deixando de receber <span className="em-amount">até R$ 6.484</span> do INSS.</>,
    sub: 'Sem custo, sem cadastro complicado. Análise grátis pela Camilly em 1 minuto.',
    photo: 'assets/photos/mae-bebe.jpg',
  },
};

const RESULT_VARIANTS = {
  positive: {
    chip: { label: 'Caso forte', tone: 'ok' },
    headline: 'Você tem direito ao salário-maternidade',
    body: 'Pelas suas respostas, seu caso encaixa nos requisitos do INSS. A Camilly, nossa consultora, vai te explicar tudo no WhatsApp e te ajudar a dar entrada. Sem custo, sem compromisso.',
    cta: 'Falar com a Camilly no WhatsApp',
    note: 'Sem dinheiro adiantado. Se o INSS não aprovar, todo o trabalho fica por nossa conta.',
    finalAmount: 6484,
    bullets: [
      { icon: 'check-circle', text: 'Análise gratuita pela consultora' },
      { icon: 'shield', text: 'Você não paga nada antes do INSS aprovar' },
      { icon: 'clock', text: '100% online, sem ir em agência' },
    ],
  },
  technical: {
    chip: { label: 'Análise detalhada', tone: 'warn' },
    headline: 'Seu caso pede um olhar atento',
    body: 'Tem alguns detalhes da sua situação que só uma conversa esclarece. A Camilly vai olhar tudo com você no WhatsApp e te dizer com clareza se vale ir adiante.',
    cta: 'Conversar com a Camilly',
    note: 'A análise é gratuita e sem compromisso.',
    finalAmount: null,
    bullets: [
      { icon: 'check-circle', text: 'Análise individual com a consultora' },
      { icon: 'shield', text: 'Sem compromisso de prosseguir' },
      { icon: 'clock', text: 'Resposta no mesmo dia' },
    ],
  },
  expired: {
    chip: { label: 'Outras opções', tone: 'bad' },
    headline: 'Esse prazo passou, mas calma',
    body: 'O salário-maternidade tem um prazo que, no seu caso, já expirou. Mas existem outros direitos previdenciários que podem se aplicar a você. A Camilly pode te orientar sem custo.',
    cta: 'Saber sobre outros direitos',
    note: 'Conversa gratuita, sem compromisso.',
    finalAmount: null,
    bullets: [
      { icon: 'sparkle', text: 'Outros benefícios podem se aplicar' },
      { icon: 'shield', text: 'Orientação gratuita da consultora' },
      { icon: 'clock', text: 'Resposta no mesmo dia' },
    ],
  },
};

// Mapeia respostas → variante de resultado (compliance OAB / regras INSS)
function computeResult(answers) {
  const { stage, when, work, inss } = answers;

  // Grávida — sempre forte (escritório paga guia se autônoma sem INSS)
  if (stage === 'pregnant') return 'positive';

  // Bebê já nasceu
  if (when === 'gt5') return 'expired';
  if (when === 'mid') return 'expired';

  if (when === 'lt6') {
    // 1-6 meses — fora do prazo INSS, mas escritório pode pagar guia retroativa
    if (inss === 'now' || inss === 'lt1') return 'technical';
    return 'expired';
  }

  if (when === 'lt30d') {
    // Recém-nascido — dentro do prazo
    if (inss === 'no' && (work === 'cas' || work === 'des')) return 'technical';
    return 'positive';
  }

  return 'positive';
}

// Helper: track via Ludus Tracker (no-op se script ainda não carregou ou bloqueado)
const track = (name, data) => {
  try {
    if (typeof window !== 'undefined' && window.lt && typeof window.lt.track === 'function') {
      window.lt.track(name, data || {});
    }
  } catch (_) { /* swallow */ }
};

// Phone mask: declarada localmente pra resolver issue de scope cross-script
const maskPhoneLocal = (v) => {
  let d = (v || '').replace(/\D/g, '');
  if (d.startsWith('55') && d.length >= 11) d = d.slice(2);
  d = d.slice(0, 11);
  if (!d) return '';
  if (d.length <= 2) return `(${d}`;
  if (d.length <= 3) return `(${d.slice(0,2)}) ${d.slice(2)}`;
  if (d.length <= 7) return `(${d.slice(0,2)}) ${d.slice(2,3)} ${d.slice(3)}`;
  return `(${d.slice(0,2)}) ${d.slice(2,3)} ${d.slice(3,7)}-${d.slice(7)}`;
};

function QuizApp({ heroVariant = 'value', resultVariant, primaryColor }) {
  const TOTAL = 5;
  const [step, setStep] = React.useState(0);
  const [tappedKey, setTappedKey] = React.useState(null);
  const [answers, setAnswers] = React.useState({ stage: null, when: null, work: null, inss: null });
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');

  const styleVars = primaryColor ? {
    '--primary': primaryColor,
    '--primary-deep': shade(primaryColor, -14),
    '--primary-soft': mix(primaryColor, '#FFFFFF', 0.88),
    '--primary-tint': mix(primaryColor, '#FFFFFF', 0.78),
  } : {};

  const goNext = (key) => {
    if (key) {
      setTappedKey(key);
      setTimeout(() => setTappedKey(null), 360);
    }
    setTimeout(() => setStep((s) => Math.min(s + 1, 7)), 320);
  };
  const goPrev = () => setStep((s) => Math.max(s - 1, 0));
  const setAnswer = (k, v) => {
    setAnswers((a) => ({ ...a, [k]: v }));
    track('QuizAnswer', { question: k, value: v });
    goNext(k + ':' + v);
  };

  // Side effects: track per step
  React.useEffect(() => {
    if (step === 5) track('ViewContent', { content_name: 'capture' });
  }, [step]);

  const showProgress = step >= 1 && step <= 5;

  return (
    <div className="frame" style={styleVars}>
      <StatusBar/>
      <TopChrome
        step={showProgress ? step : 0}
        total={TOTAL}
        onBack={goPrev}
        showBack={step > 0}
      />

      <div className="stage">
        <div className="screen" key={step}>
          {step === 0 && <HeroScreen variant={heroVariant} onStart={() => { track('QuizStarted'); setStep(1); }}/>}
          {step >= 1 && step <= 5 && (
            <>
              <BenefitCard answers={answers} name={name} step={step} isFinal={false}/>
              {step === 1 && <Q1 selected={answers.stage} setSelected={(v) => setAnswer('stage', v)} tappedKey={tappedKey}/>}
              {step === 2 && <Q2 stage={answers.stage} selected={answers.when} setSelected={(v) => setAnswer('when', v)} tappedKey={tappedKey}/>}
              {step === 3 && <Q3 selected={answers.work} setSelected={(v) => setAnswer('work', v)} tappedKey={tappedKey}/>}
              {step === 4 && <Q4 selected={answers.inss} setSelected={(v) => setAnswer('inss', v)} tappedKey={tappedKey}/>}
              {step === 5 && (
                <CaptureScreen
                  name={name} setName={setName}
                  phone={phone} setPhone={setPhone}
                  onSubmit={() => {
                    track('QuizCompleted', { answers });
                    setStep(6);
                    setTimeout(() => setStep(7), 1900);
                  }}
                />
              )}
            </>
          )}
          {step === 6 && <LoadingScreen name={name}/>}
          {step === 7 && (
            <ResultScreen
              variant={resultVariant || computeResult(answers)}
              answers={answers}
              name={name}
              phone={phone}
            />
          )}
        </div>
      </div>
    </div>
  );
}

// === Hero ===
function HeroScreen({ variant, onStart }) {
  const v = HERO_VARIANTS[variant];
  return (
    <div className="hero">
      <div className="hero-photo">
        <img src={v.photo} alt="" loading="eager"/>
        <div className="photo-overlay"/>
      </div>

      <span className="hero-eyebrow">
        <span className="pulse"/>
        {v.eyebrow}
      </span>

      <h1>{v.headline}</h1>
      <p className="sub">{v.sub}</p>

      <button className="cta" onClick={onStart}>
        Quero descobrir se tenho direito
        <Icon name="arrow-right" size={18} stroke={2.2}/>
      </button>

      <div className="hero-trust">
        <span className="trust-pill"><Icon name="check-circle" size={12} stroke={2.4}/> 100% online</span>
        <span className="trust-pill"><Icon name="check-circle" size={12} stroke={2.4}/> Sem cadastro</span>
        <span className="trust-pill"><Icon name="check-circle" size={12} stroke={2.4}/> Sem dinheiro adiantado</span>
      </div>
    </div>
  );
}

// === Q1 ===
function Q1({ selected, setSelected, tappedKey }) {
  return (
    <>
      <h2 className="q-title">Pra começar, o bebê já nasceu?</h2>
      <p className="q-sub">Pra te dar a resposta certa, preciso saber em que momento você está agora.</p>
      <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
        <OptionCard icon="belly" title="Ainda estou grávida"
          sub="Em qualquer mês de gestação"
          onClick={() => setSelected('pregnant')}
          selected={selected === 'pregnant'}
          tapped={tappedKey === 'stage:pregnant'}/>
        <OptionCard icon="baby" title="Já nasceu"
          sub="Recém-nascido ou criança pequena"
          onClick={() => setSelected('born')}
          selected={selected === 'born'}
          tapped={tappedKey === 'stage:born'}/>
      </div>
    </>
  );
}

// === Q2 ===
function Q2({ stage, selected, setSelected, tappedKey }) {
  if (stage === 'pregnant') {
    return (
      <>
        <h2 className="q-title">De quantos meses você está?</h2>
        <p className="q-sub">Não precisa ser exato. É só pra eu saber em que fase a gente está.</p>
        <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
          <OptionCard icon="sprout" title="Menos de 6 meses"
            sub="Início ou meio da gestação"
            onClick={() => setSelected('lt6')} selected={selected === 'lt6'} tapped={tappedKey === 'when:lt6'}/>
          <OptionCard icon="heart" title="6 meses ou mais"
            sub="Reta final, perto do parto"
            onClick={() => setSelected('gte6')} selected={selected === 'gte6'} tapped={tappedKey === 'when:gte6'}/>
        </div>
      </>
    );
  }
  return (
    <>
      <h2 className="q-title">Faz quanto tempo que o bebê nasceu?</h2>
      <p className="q-sub">O prazo do salário-maternidade conta a partir do nascimento.</p>
      <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
        <OptionCard icon="baby" title="Menos de 30 dias"
          sub="Recém-nascido, dentro do prazo"
          onClick={() => setSelected('lt30d')} selected={selected === 'lt30d'} tapped={tappedKey === 'when:lt30d'}/>
        <OptionCard icon="sprout" title="Entre 1 e 6 meses"
          sub="Bebê pequeno"
          onClick={() => setSelected('lt6')} selected={selected === 'lt6'} tapped={tappedKey === 'when:lt6'}/>
        <OptionCard icon="sun-rise" title="Entre 6 meses e 5 anos"
          sub="Criança pequena"
          onClick={() => setSelected('mid')} selected={selected === 'mid'} tapped={tappedKey === 'when:mid'}/>
        <OptionCard icon="cal-x" title="Mais de 5 anos"
          sub="Já passou um tempo"
          onClick={() => setSelected('gt5')} selected={selected === 'gt5'} tapped={tappedKey === 'when:gt5'}/>
      </div>
    </>
  );
}

// === Q3 ===
function Q3({ selected, setSelected, tappedKey }) {
  const opts = [
    { k: 'clt', icon: 'briefcase',  t: 'Carteira assinada (CLT)', s: 'Trabalho registrado' },
    { k: 'dom', icon: 'home',       t: 'Empregada doméstica',     s: 'Com carteira assinada' },
    { k: 'mei', icon: 'id-card',    t: 'MEI',                      s: 'Tenho meu CNPJ' },
    { k: 'aut', icon: 'store',      t: 'Por conta própria',        s: 'Sem carteira assinada' },
    { k: 'cas', icon: 'heart-hand', t: 'Não trabalho fora',         s: 'Cuido de casa ou da família' },
    { k: 'des', icon: 'unemployed', t: 'Perdi o emprego',           s: 'Faz pouco tempo' },
  ];
  return (
    <>
      <h2 className="q-title">Como é seu trabalho hoje?</h2>
      <p className="q-sub">Escolhe a opção que mais parece com a sua agora.</p>
      <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
        {opts.map(o => (
          <OptionCard key={o.k} icon={o.icon} title={o.t} sub={o.s}
            onClick={() => setSelected(o.k)} selected={selected === o.k}
            tapped={tappedKey === 'work:' + o.k}/>
        ))}
      </div>
    </>
  );
}

// === Q4 ===
function Q4({ selected, setSelected, tappedKey }) {
  const opts = [
    { k: 'now', icon: 'check-circle', t: 'Pago todo mês',                    s: 'Ou minha empresa paga pra mim' },
    { k: 'lt1', icon: 'clock',        t: 'Parei faz menos de 1 ano',         s: 'Pagava antes' },
    { k: 'gt1', icon: 'cal-x',        t: 'Parei faz mais de 1 ano',          s: 'Já tem um tempo' },
    { k: 'no',  icon: 'help',         t: 'Nunca paguei ou não sei',          s: 'Sem problema, a gente confere' },
  ];
  return (
    <>
      <h2 className="q-title">Você paga ou já pagou o INSS?</h2>
      <p className="q-sub">Se não tem certeza, escolhe a que mais parece com a sua situação.</p>
      <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
        {opts.map(o => (
          <OptionCard key={o.k} icon={o.icon} title={o.t} sub={o.s}
            onClick={() => setSelected(o.k)} selected={selected === o.k}
            tapped={tappedKey === 'inss:' + o.k}/>
        ))}
      </div>
    </>
  );
}

// === Capture ===
function CaptureScreen({ name, setName, phone, setPhone, onSubmit }) {
  const nameRef = React.useRef(null);
  const phoneRef = React.useRef(null);
  const [submitError, setSubmitError] = React.useState('');
  const userTypedRef = React.useRef(false);

  // Sync do DOM pra state (autofill iOS/Chrome que não dispara onChange)
  const syncFromDom = () => {
    if (nameRef.current) {
      const v = nameRef.current.value;
      setName(prev => (prev !== v ? v : prev));
    }
    if (phoneRef.current) {
      const masked = maskPhoneLocal(phoneRef.current.value);
      setPhone(prev => (prev !== masked ? masked : prev));
    }
  };

  React.useEffect(() => {
    // Polling SÓ enquanto o user ainda não digitou — captura autofill silencioso.
    // Para quando o user começa a digitar pra não brigar com o cursor.
    const id = setInterval(() => {
      if (userTypedRef.current) { clearInterval(id); return; }
      syncFromDom();
    }, 250);
    return () => clearInterval(id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const phoneDigits = phone.replace(/\D/g, '').length;
  const nameOk = name.trim().length >= 2;
  const phoneOk = phoneDigits >= 10;

  const handleSubmit = () => {
    syncFromDom();
    setTimeout(() => {
      const nOk = (nameRef.current?.value || '').trim().length >= 2;
      const pOk = (phoneRef.current?.value || '').replace(/\D/g, '').length >= 10;
      if (!nOk) { setSubmitError('Preenche seu nome (mínimo 2 letras).'); return; }
      if (!pOk) { setSubmitError('Preenche o WhatsApp completo (DDD + 9 dígitos).'); return; }
      setSubmitError('');
      onSubmit();
    }, 40);
  };

  return (
    <>
      <h2 className="q-title">Pra fechar o cartão, como você se chama?</h2>
      <p className="q-sub">Vou colocar seu nome no cartão e te chamar no WhatsApp com a Camilly. Sem custo.</p>

      <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
        <div className="field">
          <label htmlFor="name">Seu nome</label>
          <input id="name" ref={nameRef} type="text" placeholder="Como você quer ser chamada"
                 value={name}
                 onChange={(e) => { userTypedRef.current = true; setName(e.target.value); }}
                 onBlur={syncFromDom}
                 onAnimationStart={syncFromDom}
                 autoComplete="given-name"/>
        </div>
        <div className="field">
          <label htmlFor="phone">Seu WhatsApp</label>
          <div className="phone-field">
            <span className="phone-prefix" aria-hidden="true">
              <span className="phone-flag">🇧🇷</span>
              <span className="phone-code">+55</span>
            </span>
            <input id="phone" ref={phoneRef} type="text" placeholder="(11) 9 1234-5678"
                   value={phone}
                   onChange={(e) => { userTypedRef.current = true; setPhone(maskPhoneLocal(e.target.value)); }}
                   onBlur={syncFromDom}
                   onAnimationStart={syncFromDom}
                   inputMode="numeric" autoComplete="tel"
                   maxLength={20}
                   aria-label="DDD e número do WhatsApp"/>
          </div>
        </div>
      </div>

      {submitError && <div className="capture-error">{submitError}</div>}

      <div style={{flex: 1, minHeight: 12}}/>

      <button className="cta" onClick={handleSubmit}>
        Ver meu resultado
        <Icon name="arrow-right" size={18} stroke={2.2}/>
      </button>
      <div style={{height: 10}}/>
      <TrustStrip text="Seus dados não são compartilhados · LGPD · Para mães de 16+"/>
    </>
  );
}

// === Loading — between capture and result ===
function LoadingScreen({ name }) {
  const [phase, setPhase] = React.useState(0);
  const phases = [
    'Analisando suas respostas',
    'Verificando elegibilidade no INSS',
    'Calculando seu benefício',
  ];
  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 600);
    const t2 = setTimeout(() => setPhase(2), 1250);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);
  const firstName = (name || '').trim().split(' ')[0];
  const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : '';
  return (
    <div className="loading-screen">
      <div className="loading-spinner" aria-hidden="true"/>
      <div className="loading-text">
        {firstName && <p className="loading-greeting">Só um instante, {cap(firstName)}…</p>}
        <p className="loading-phase" key={phase}>{phases[phase]}</p>
        <div className="loading-dots" aria-hidden="true">
          {[0,1,2].map(i => (
            <span key={i} className={i <= phase ? 'on' : ''}/>
          ))}
        </div>
      </div>
    </div>
  );
}

// === Result — distinct success screen ===
function ResultScreen({ variant, answers, name, phone }) {
  const r = RESULT_VARIANTS[variant];
  const firstName = (name || '').trim().split(' ')[0];
  const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : '';

  // Bullet contextual: CLT/doméstica → licença empregador é separada
  const isClt = answers.work === 'clt' || answers.work === 'dom';
  const bullets = (variant === 'positive' && isClt)
    ? [...r.bullets, { icon: 'info', text: 'A licença do seu emprego é separada, você continua com direito' }]
    : r.bullets;

  // Captura SEMPRE pra Camilly (qualquer variant) + Lead pro Meta só se positive
  React.useEffect(() => {
    if (!variant) return;
    const phoneDigits = (phone || '').replace(/\D/g, '');
    const phoneE164 = phoneDigits ? `+55${phoneDigits}` : undefined;
    const payload = {
      variant,
      answers,
      name: name || undefined,
      phone: phoneE164,
      phone_formatted: phone || undefined,
    };
    // LeadCapture: cria row na CRM da Camilly. Não vai pro Meta (capi/pixel=false na config).
    track('LeadCapture', payload);
    // Lead: evento Meta de otimização. Só pra casos fortes.
    if (variant === 'positive') {
      track('Lead', payload);
    }
  }, [variant]);

  const onWhatsApp = () => {
    track('WhatsAppClick', { variant });
    track('Contact', { variant });
    const fname = firstName ? cap(firstName) : '';
    const msg = encodeURIComponent(
      `Olá Camilly! Acabei de fazer o quiz do salário-maternidade${fname ? ` (sou ${fname})` : ''} e gostaria de saber se tenho direito.`
    );
    const camillyNumber = '5583991118080';
    const url = `https://wa.me/${camillyNumber}?text=${msg}`;
    setTimeout(() => { window.location.href = url; }, 80);
  };

  return (
    <div className={`result-screen result-${variant}`}>
      <div className="result-celebrate">
        <div className="celebrate-icon" aria-hidden="true">
          <svg viewBox="0 0 64 64" width="64" height="64" fill="none">
            <circle cx="32" cy="32" r="30" fill="currentColor" opacity="0.14"/>
            <circle cx="32" cy="32" r="22" fill="currentColor"/>
            <path d="M22 32.5l7 7L43 26" stroke="white" strokeWidth="3.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          </svg>
        </div>
        <span className={`result-chip ${r.chip.tone}`}>
          <Icon name={r.chip.tone === 'ok' ? 'check-circle' : r.chip.tone === 'warn' ? 'sparkle' : 'sun-rise'} size={13} stroke={2.2}/>
          {r.chip.label}
        </span>
        <h2 className="result-title-big">
          {firstName ? `${cap(firstName)}, ` : ''}{r.headline.toLowerCase()}
        </h2>
      </div>

      <BenefitCard answers={answers} name={name} step={7} isFinal={true} finalAmount={r.finalAmount}/>

      <p className="result-body">{r.body}</p>

      <div style={{flex: 1, minHeight: 4}}/>

      {variant === 'positive' && (
        <button className="cta cta-whatsapp" onClick={onWhatsApp}>
          <Icon name="whatsapp" size={20}/>
          <span>Falar com a Camilly</span>
        </button>
      )}

      <p className="result-note">{r.note}</p>
    </div>
  );
}

// Color helpers
function hexToRgb(h) { h = h.replace('#',''); if (h.length===3) h=h.split('').map(c=>c+c).join(''); return [parseInt(h.slice(0,2),16),parseInt(h.slice(2,4),16),parseInt(h.slice(4,6),16)]; }
function rgbToHex(r,g,b) { return '#' + [r,g,b].map(n=>Math.max(0,Math.min(255,Math.round(n))).toString(16).padStart(2,'0')).join(''); }
function shade(hex, pct) { const [r,g,b]=hexToRgb(hex); const f=pct/100; return rgbToHex(r+r*f,g+g*f,b+b*f); }
function mix(a, b, t) { const [ar,ag,ab]=hexToRgb(a); const [br,bg,bb]=hexToRgb(b); return rgbToHex(ar+(br-ar)*t,ag+(bg-ag)*t,ab+(bb-ab)*t); }

Object.assign(window, { QuizApp, HERO_VARIANTS, RESULT_VARIANTS });