// V5 Mobile (Variant D) — photo en full background + formulaire de lead
// inline en 3 étapes, aligné avec la version desktop D. 390×auto.

const D_MQUESTIONS = [
  {
    q: 'Par quoi voulez-vous commencer ?',
    opts: [
      { label: "Savoir si un bien est rentable", value: 'analyze' },
      { label: 'Comparer plusieurs biens ou montages', value: 'compare' },
      { label: 'Choisir le bon régime fiscal', value: 'tax' },
      { label: "Calculer ma capacité d'emprunt", value: 'budget' },
    ],
  },
  {
    q: 'Où en êtes-vous aujourd\u2019hui ?',
    opts: [
      { label: 'Je réfléchis, je m\u2019informe', value: 'beginner' },
      { label: 'Je visite des biens activement', value: 'searching' },
      { label: "J'ai un bien en tête, je dois décider", value: 'deciding' },
      { label: 'J\u2019ai une offre en cours, j\u2019optimise', value: 'optimizing' },
    ],
  },
  {
    q: 'Quel est votre niveau ?',
    opts: [
      { label: 'Primo-investisseur', value: 'first_time' },
      { label: 'Déjà un ou plusieurs biens', value: 'homeowner' },
      { label: 'Expérimenté, passer à l\u2019échelle', value: 'investor' },
      { label: 'Professionnel (conseiller, courtier…)', value: 'experienced' },
    ],
  },
];

function V5MobileD() {
  if (window.useTweaksReactivity) window.useTweaksReactivity();
  const [loaded, setLoaded] = React.useState(false);
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState([null, null, null]);
  const [email, setEmail] = React.useState('');
  const [emailError, setEmailError] = React.useState(false);
  const isEmailStep = step === 3;

  React.useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 60);
    return () => clearTimeout(t);
  }, []);

  const reveal = (i) => ({
    opacity: loaded ? 1 : 0,
    transform: loaded ? 'translateY(0)' : 'translateY(10px)',
    transition: `opacity .8s cubic-bezier(.2,.7,.2,1) ${i * 80}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${i * 80}ms`,
  });

  const pick = (i) => {
    const next = answers.slice(); next[step] = D_MQUESTIONS[step].opts[i].value; setAnswers(next);
    setTimeout(() => { if (step < 2) setStep(step + 1); else setStep(3); }, 260);
  };

  const stepComplete = (si) => answers[si] != null;
  const progress = isEmailStep
    ? 100
    : ((step + (stepComplete(step) ? 0.6 : 0)) / 4) * 100;
  const stepLabels = ['OBJECTIF', 'SITUATION', 'PROFIL', 'EMAIL'];

  return (
    <div style={{
      width: 390, fontFamily: FONTS.sans,
      position: 'relative', overflow: 'hidden', color: '#fff',
      paddingBottom: 32,
    }}>
      {/* PHOTO FULL BACKGROUND */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(assets/apartment-paris.jpg)`,
        backgroundSize: 'cover',
        backgroundPosition: 'center 35%',
        transform: loaded ? 'scale(1)' : 'scale(1.06)',
        transition: 'transform 2.4s cubic-bezier(.2,.7,.2,1)',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(29,29,29,0.55) 0%, rgba(29,29,29,0.28) 24%, rgba(29,29,29,0.28) 55%, rgba(29,29,29,0.55) 100%)',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(92,13,7,0.22) 0%, transparent 40%)',
        mixBlendMode: 'multiply',
      }}/>

      <div style={{ position: 'relative', zIndex: 2, height: 60 }}/>

      {/* HERO top — badge + title + subtitle (compact) */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '36px 28px 24px',
        textAlign: 'center',
      }}>
        <div style={reveal(0)}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 10px',
            background: 'rgba(255,255,255,0.14)',
            border: '1px solid rgba(255,255,255,0.28)',
            backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
            borderRadius: 99,
            fontFamily: FONTS.mono, fontSize: 9, fontWeight: 500,
            letterSpacing: 1.2, textTransform: 'uppercase', color: '#fff',
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 99, background: TOKENS.green, boxShadow: `0 0 8px ${TOKENS.green}` }}/>
            Nouveau · Analyse complète par bien
          </span>
        </div>

        <h1 style={{
          fontFamily: FONTS.display, fontWeight: 700,
          fontSize: 52, lineHeight: 0.98, letterSpacing: -1.8,
          margin: '18px 0 0', color: '#fff',
          textShadow: '0 2px 24px rgba(0,0,0,0.45)',
          ...reveal(1),
        }}>
          Avant de signer,<br/>
          <span style={{ color: TOKENS.green }}>simulez</span>
          <span style={{ color: TOKENS.green }}>.</span>
        </h1>

        <p style={{
          fontFamily: FONTS.sans, fontWeight: 400, fontSize: 14, lineHeight: 1.5,
          color: 'rgba(255,255,255,0.85)',
          margin: '16px auto 0', maxWidth: 300,
          textShadow: '0 1px 8px rgba(0,0,0,0.4)',
          ...reveal(2),
        }}>
          Cashflow, rentabilité, fiscalité — tout en une seule analyse.
        </p>
      </div>

      {/* FORM — glass card, même traitement que desktop D */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '0 20px',
        ...reveal(3),
      }}>
        <div style={{
          background: 'rgba(255,255,255,0.68)',
          backdropFilter: 'blur(22px) saturate(1.15)',
          WebkitBackdropFilter: 'blur(22px) saturate(1.15)',
          border: '1px solid rgba(255,255,255,0.5)',
          borderRadius: 16, overflow: 'hidden',
          boxShadow: '0 20px 50px -12px rgba(0,0,0,0.45)',
          color: TOKENS.ink,
        }}>
          {/* Progress bar */}
          <div style={{ height: 3, background: 'rgba(29,29,29,0.08)', position: 'relative' }}>
            <div style={{
              position: 'absolute', inset: 0, width: progress + '%',
              background: TOKENS.bordeaux, boxShadow: `0 0 10px ${TOKENS.bordeaux}`,
              transition: 'width .35s cubic-bezier(.2,.7,.2,1)',
            }}/>
          </div>

          <div style={{ padding: '18px 18px 20px' }}>
            {/* Header */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, gap: 8 }}>
              <div style={{
                fontFamily: FONTS.mono, fontSize: 9, fontWeight: 600,
                letterSpacing: 1.4, textTransform: 'uppercase', color: TOKENS.bordeaux,
                minWidth: 0,
              }}>
                {isEmailStep ? '✓ DERNIÈRE ÉTAPE' : `Question ${step + 1} / 3 · ${stepLabels[step]}`}
              </div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '3px 8px', borderRadius: 99,
                background: 'rgba(200,255,46,0.25)',
                border: `1px solid ${TOKENS.green}`,
                flexShrink: 0,
              }}>
                <span style={{ width: 4, height: 4, borderRadius: 99, background: TOKENS.green, boxShadow: `0 0 6px ${TOKENS.green}` }}/>
                <span style={{ fontFamily: FONTS.mono, fontSize: 8, fontWeight: 600, letterSpacing: 0.8, color: TOKENS.ink }}>
                  30 S
                </span>
              </div>
            </div>

            {!isEmailStep ? (
              <>
                <div style={{
                  fontFamily: FONTS.display, fontWeight: 700, fontSize: 18, letterSpacing: -0.5,
                  lineHeight: 1.2, color: TOKENS.ink, marginBottom: 14,
                }}>
                  {D_MQUESTIONS[step].q}
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {D_MQUESTIONS[step].opts.map((opt, i) => {
                    const selected = answers[step] === opt.value;
                    return (
                      <button key={i} onClick={() => pick(i)}
                        style={{
                          textAlign: 'left', width: '100%',
                          background: selected ? 'rgba(200,255,46,0.22)' : '#fff',
                          border: selected ? `1.5px solid ${TOKENS.green}` : '1.5px solid rgba(29,29,29,0.12)',
                          borderRadius: 10, padding: '11px 12px',
                          fontFamily: FONTS.sans, fontSize: 13, fontWeight: selected ? 600 : 500,
                          color: TOKENS.ink, cursor: 'pointer',
                          display: 'flex', alignItems: 'center', gap: 10,
                          transition: 'background .15s, border-color .15s',
                          boxShadow: selected ? '0 4px 14px -4px rgba(200,255,46,0.5)' : 'none',
                        }}>
                        <span style={{
                          width: 22, height: 22, borderRadius: 99, flexShrink: 0,
                          background: selected ? TOKENS.green : 'rgba(29,29,29,0.06)',
                          color: TOKENS.ink,
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          fontFamily: FONTS.mono, fontSize: 10, fontWeight: 700,
                          transition: 'background .15s, color .15s',
                        }}>
                          {selected ? '✓' : String.fromCharCode(65 + i)}
                        </span>
                        <span style={{ flex: 1 }}>{opt.label}</span>
                      </button>
                    );
                  })}
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
                  <button type="button" onClick={() => step > 0 && setStep(step - 1)}
                    disabled={step === 0}
                    style={{
                      background: 'transparent', border: 'none',
                      fontFamily: FONTS.sans, fontSize: 12, fontWeight: 500,
                      color: step === 0 ? 'rgba(29,29,29,0.3)' : 'rgba(29,29,29,0.65)',
                      cursor: step === 0 ? 'default' : 'pointer', padding: 0,
                    }}>
                    ← Précédent
                  </button>
                  <div style={{ display: 'flex', gap: 5 }}>
                    {[0,1,2,3].map(i => (
                      <div key={i} style={{
                        width: stepComplete(i) || i === 3 && isEmailStep ? 14 : 8, height: 3, borderRadius: 99,
                        background: stepComplete(i) ? TOKENS.green : (i === step ? TOKENS.ink : 'rgba(29,29,29,0.18)'),
                        transition: 'all .25s',
                      }}/>
                    ))}
                  </div>
                </div>
              </>
            ) : (
              <div>
                <div style={{
                  fontFamily: FONTS.display, fontWeight: 700, fontSize: 18, letterSpacing: -0.4,
                  lineHeight: 1.2, color: TOKENS.ink, marginBottom: 4,
                }}>
                  Parfait — vos outils sont prêts.
                </div>
                <div style={{ fontFamily: FONTS.sans, fontSize: 12, color: 'rgba(29,29,29,0.7)', marginBottom: 12 }}>
                  Choisissez comment démarrer — en un clic avec Google, ou par email.
                </div>

                <button type="button"
                  onClick={() => {
                    window.submitLandingRegister({
                      source: 'lp2_hero_form',
                      'goal[]': answers[0] || '',
                      stage: answers[1] || '',
                      profile: answers[2] || '',
                      method: 'google',
                    });
                  }}
                  style={{
                    width: '100%', padding: '12px 14px', borderRadius: 10,
                    background: '#fff', color: TOKENS.ink,
                    border: '1.5px solid rgba(29,29,29,0.18)',
                    fontFamily: FONTS.sans, fontSize: 14, fontWeight: 600,
                    cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                    boxSizing: 'border-box',
                  }}>
                  <svg width="16" height="16" viewBox="0 0 18 18" aria-hidden="true" style={{ flexShrink: 0 }}>
                    <path d="M17.64 9.2c0-.64-.06-1.25-.17-1.84H9v3.48h4.84a4.14 4.14 0 01-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4"/>
                    <path d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.92v2.33A9 9 0 009 18z" fill="#34A853"/>
                    <path d="M3.97 10.72a5.41 5.41 0 010-3.44V4.95H.92A9 9 0 000 9a9 9 0 00.92 4.05l3.05-2.33z" fill="#FBBC05"/>
                    <path d="M9 3.58c1.32 0 2.5.45 3.44 1.35L15.02 2.34A9 9 0 009 0 9 9 0 00.92 4.95l3.05 2.33C4.68 5.16 6.66 3.58 9 3.58z" fill="#EA4335"/>
                  </svg>
                  Continuer avec Google
                </button>

                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  margin: '12px 0',
                  fontFamily: FONTS.mono, fontSize: 9, fontWeight: 500,
                  letterSpacing: 1.8, textTransform: 'uppercase',
                  color: 'rgba(29,29,29,0.48)',
                }}>
                  <div style={{ flex: 1, height: 1, background: 'rgba(29,29,29,0.12)' }}/>
                  ou
                  <div style={{ flex: 1, height: 1, background: 'rgba(29,29,29,0.12)' }}/>
                </div>

                <form onSubmit={(e) => {
                  e.preventDefault();
                  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setEmailError(true); return; }
                  setEmailError(false);
                  window.submitLandingRegister({
                    source: 'lp2_hero_form',
                    'goal[]': answers[0] || '',
                    stage: answers[1] || '',
                    profile: answers[2] || '',
                    email: email,
                    method: 'email',
                  });
                }}>
                <input type="email" placeholder="vous@exemple.com"
                  value={email} onChange={(e) => { setEmail(e.target.value); setEmailError(false); }}
                  style={{
                  width: '100%', padding: '12px 14px', borderRadius: 10,
                  border: emailError ? '1.5px solid #e53e3e' : '1.5px solid rgba(29,29,29,0.18)', background: '#fff',
                  fontFamily: FONTS.sans, fontSize: 14, color: TOKENS.ink, marginBottom: emailError ? 4 : 8,
                  outline: 'none', boxSizing: 'border-box',
                }}/>
                {emailError && <div style={{ fontFamily: FONTS.sans, fontSize: 11, color: '#e53e3e', marginBottom: 6 }}>Veuillez entrer un email valide.</div>}
                <button type="submit" style={{
                  width: '100%', background: TOKENS.bordeaux, color: '#fff',
                  border: 'none', padding: '14px', borderRadius: 10,
                  fontFamily: FONTS.sans, fontSize: 14, fontWeight: 600, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  boxShadow: '0 10px 24px -6px rgba(92,13,7,0.4)',
                }}>
                  <span style={{
                    width: 6, height: 6, borderRadius: 99, background: TOKENS.green,
                    boxShadow: `0 0 10px ${TOKENS.green}`,
                  }}/>
                  Accéder aux outils
                </button>
                </form>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
                  <button type="button" onClick={() => setStep(2)} style={{
                    background: 'transparent', border: 'none',
                    fontFamily: FONTS.sans, fontSize: 12, fontWeight: 500,
                    color: 'rgba(29,29,29,0.65)', cursor: 'pointer', padding: 0,
                  }}>
                    ← Précédent
                  </button>
                  <div style={{ display: 'flex', gap: 5 }}>
                    {[0,1,2,3].map(i => (
                      <div key={i} style={{
                        width: 14, height: 3, borderRadius: 99,
                        background: i < 3 ? TOKENS.green : TOKENS.ink,
                        transition: 'all .25s',
                      }}/>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* social proof pill */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '20px 28px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        ...reveal(4),
      }}>
        <div style={{ display: 'flex' }}>
          {[
            { bg: TOKENS.bordeaux, fg: '#fff', i: 'LM' },
            { bg: TOKENS.green, fg: TOKENS.ink, i: 'SD' },
            { bg: TOKENS.blue, fg: '#fff', i: 'AK' },
            { bg: TOKENS.coral, fg: '#fff', i: 'RP' },
          ].map((a, i) => (
            <div key={i} style={{
              width: 26, height: 26, borderRadius: 99,
              background: a.bg, color: a.fg,
              border: '2px solid rgba(255,255,255,0.95)',
              marginLeft: i ? -8 : 0,
              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONTS.sans, fontSize: 9, fontWeight: 700, letterSpacing: 0.2,
            }}>{a.i}</div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: FONTS.sans, textShadow: '0 1px 6px rgba(0,0,0,0.4)' }}>
          <span style={{ fontSize: 11, fontWeight: 700, color: '#fff' }}>+200 investisseurs</span>
          <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.55)' }}>·</span>
          <span style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>★ 4,8</span>
        </div>
      </div>
    </div>
  );
}

window.V5MobileD = V5MobileD;