// V5NoBento (Variant D) — Hero sans bento avec formulaire de lead en 3 étapes.
// Polish appliqué (A+B+C+D+G) : fond quasi-opaque, puces lettrées, progress bar
// continue, hover states marqués, sélection en ✓.

const D_QUESTIONS = [
  {
    q: 'Par quoi voulez-vous commencer ?',
    opts: [
      { label: "Savoir si un bien que j'ai repéré est rentable", value: 'analyze' },
      { label: 'Comparer plusieurs biens ou montages', value: 'compare' },
      { label: 'Choisir le bon régime fiscal (LMNP, SCI…)', 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, je cherche 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 avant de signer', value: 'optimizing' },
    ],
  },
  {
    q: 'Quel est votre niveau ?',
    opts: [
      { label: 'Primo-investisseur, mon premier projet locatif', value: 'first_time' },
      { label: 'Déjà investisseur, j\u2019ai un ou plusieurs biens en portefeuille', value: 'homeowner' },
      { label: 'Investisseur expérimenté, je veux passer à l\u2019échelle', value: 'investor' },
      { label: 'Professionnel (conseiller / courtier / marchand de bien)', value: 'experienced' },
    ],
  },
];

function V5NoBento() {
  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(14px)',
    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_QUESTIONS[step].opts[i].value; setAnswers(next);
    setTimeout(() => { if (step < 2) setStep(step + 1); else setStep(3); }, 260);
  };

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

  return (
    <div style={{
      width: 1440, height: 880, fontFamily: FONTS.sans,
      position: 'relative', overflow: 'hidden', color: '#fff',
    }}>
      {/* BG photo */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(assets/apartment-paris.jpg)`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        transform: loaded ? 'scale(1)' : 'scale(1.04)',
        transition: 'transform 2.4s cubic-bezier(.2,.7,.2,1)',
      }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(29,29,29,0.55) 0%, rgba(29,29,29,0.38) 30%, rgba(29,29,29,0.08) 55%, rgba(249,247,246,0) 78%)' }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(92,13,7,0.22) 0%, transparent 40%)', mixBlendMode: 'multiply' }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(29,29,29,0.22) 100%)', pointerEvents: 'none' }}/>

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

      <div style={{
        position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56,
        padding: '32px 56px 0',
      }}>
        {/* ─── LEFT (identique à C) ─── */}
        <div style={{ paddingTop: 70 }}>
          <div style={reveal(0)}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px',
              background: 'rgba(255,255,255,0.12)',
              border: '1px solid rgba(255,255,255,0.22)',
              backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
              borderRadius: 99,
              fontFamily: FONTS.mono, fontSize: 10, fontWeight: 500,
              letterSpacing: 1.5, textTransform: 'uppercase', color: '#fff',
            }}>
              <span style={{ width: 6, height: 6, 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: 88, lineHeight: 0.98, letterSpacing: -2.8,
            margin: '24px 0 26px', color: '#fff',
            textShadow: '0 2px 20px rgba(0,0,0,0.3)',
            ...reveal(1),
          }}>
            Avant de<br/>
            signer,<br/>
            <span style={{ color: TOKENS.green }}>simulez</span>
            <span style={{ color: TOKENS.green }}>.</span>
          </h1>

          <p style={{
            fontFamily: FONTS.sans, fontWeight: 400, fontSize: 17, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.85)', maxWidth: 430, marginBottom: 36,
            textShadow: '0 1px 8px rgba(0,0,0,0.35)',
            ...reveal(2),
          }}>
            Cashflow, rentabilité, fiscalité, capacité d'emprunt — tout ce qu'il faut savoir sur un bien, en une seule analyse.
          </p>

          <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 14, ...reveal(5) }}>
            <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: 32, height: 32, borderRadius: 99,
                  background: a.bg, color: a.fg,
                  border: '2px solid rgba(255,255,255,0.95)',
                  marginLeft: i ? -9 : 0,
                  boxShadow: '0 2px 6px rgba(0,0,0,0.28)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: FONTS.sans, fontSize: 11, fontWeight: 700, letterSpacing: 0.2,
                }}>{a.i}</div>
              ))}
            </div>
            <div>
              <div style={{ fontFamily: FONTS.sans, fontSize: 13, fontWeight: 600, color: '#fff', whiteSpace: 'nowrap' }}>
                +200 investisseurs actifs ce mois
              </div>
              <div style={{ fontFamily: FONTS.sans, fontSize: 12, color: 'rgba(255,255,255,0.7)', whiteSpace: 'nowrap' }}>
                ★★★★★ 4,8
              </div>
            </div>
          </div>
        </div>

        {/* ─── RIGHT : formulaire polish, aligné h1→social proof ─── */}
        <div style={{ paddingTop: 70, display: 'flex', position: 'relative', ...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: 20, overflow: 'hidden',
            boxShadow: '0 30px 70px -14px rgba(0,0,0,0.4)',
            color: TOKENS.ink,
            width: '100%',
            display: 'flex', flexDirection: 'column',
            position: 'relative', zIndex: 1,
          }}>
            {/* Progress bar continue — bordeaux (brand accent) */}
            <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: '28px 30px 30px', flex: 1, display: 'flex', flexDirection: 'column' }}>
              {/* Header line : Q x/3 + badge 30s */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 10, fontWeight: 600,
                  letterSpacing: 1.8, textTransform: 'uppercase', color: TOKENS.bordeaux,
                }}>
                  {isEmailStep ? '✓ DERNIÈRE ÉTAPE' : `Question ${step + 1} / 3 · ${stepLabels[step]}`}
                </div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 10px', borderRadius: 99,
                  background: 'rgba(200,255,46,0.25)',
                  border: `1px solid ${TOKENS.green}`,
                }}>
                  <span style={{ width: 5, height: 5, borderRadius: 99, background: TOKENS.green, boxShadow: `0 0 6px ${TOKENS.green}` }}/>
                  <span style={{ fontFamily: FONTS.mono, fontSize: 9, fontWeight: 600, letterSpacing: 1, color: TOKENS.ink }}>
                    30 SECONDES
                  </span>
                </div>
              </div>

              {!isEmailStep ? (
                <>
                  <div style={{
                    fontFamily: FONTS.display, fontWeight: 700, fontSize: 26, letterSpacing: -0.8,
                    lineHeight: 1.18, color: TOKENS.ink, marginBottom: 18, minHeight: 62,
                  }}>
                    {D_QUESTIONS[step].q}
                  </div>

                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                    {D_QUESTIONS[step].opts.map((opt, i) => {
                      const selected = answers[step] === opt.value;
                      return (
                        <button key={i} onClick={() => pick(i)}
                          onMouseEnter={(e) => { if (!selected) { e.currentTarget.style.background = 'rgba(29,29,29,0.05)'; e.currentTarget.style.borderColor = 'rgba(29,29,29,0.22)'; e.currentTarget.style.transform = 'translateY(-1px)'; } }}
                          onMouseLeave={(e) => { if (!selected) { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = 'rgba(29,29,29,0.12)'; e.currentTarget.style.transform = 'translateY(0)'; } }}
                          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: 12, padding: '15px 18px',
                            fontFamily: FONTS.sans, fontSize: 15, fontWeight: selected ? 600 : 500,
                            color: TOKENS.ink, cursor: 'pointer',
                            display: 'flex', alignItems: 'center', gap: 14,
                            transition: 'background .15s, border-color .15s, transform .12s, box-shadow .15s',
                            boxShadow: selected ? '0 6px 20px -6px rgba(200,255,46,0.5)' : 'none',
                          }}>
                          {/* Puce A/B/C/D → ✓ */}
                          <span style={{
                            width: 28, height: 28, borderRadius: 99, flexShrink: 0,
                            background: selected ? TOKENS.green : 'rgba(29,29,29,0.06)',
                            color: TOKENS.ink,
                            border: 'none',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            fontFamily: FONTS.mono, fontSize: 12, fontWeight: 700,
                            transition: 'background .15s, color .15s, transform .2s',
                            transform: selected ? 'scale(1.08)' : 'scale(1)',
                          }}>
                            {selected ? '✓' : String.fromCharCode(65 + i)}
                          </span>
                          <span style={{ flex: 1 }}>{opt.label}</span>
                          {selected && (
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ color: TOKENS.bordeaux, flexShrink: 0 }}>
                              <path d="M2 8h11m0 0L8 3m5 5l-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                            </svg>
                          )}
                        </button>
                      );
                    })}
                  </div>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 20 }}>
                    <button type="button" onClick={() => step > 0 && setStep(step - 1)}
                      disabled={step === 0}
                      style={{
                        background: 'transparent', border: 'none',
                        fontFamily: FONTS.sans, fontSize: 13, 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: 6 }}>
                      {[0,1,2,3].map(i => (
                        <div key={i} style={{
                          width: stepComplete(i) || i === 3 && isEmailStep ? 18 : 10, height: 4, borderRadius: 99,
                          background: stepComplete(i) ? TOKENS.green : (i === step ? TOKENS.ink : 'rgba(29,29,29,0.18)'),
                          transition: 'all .25s',
                        }}/>
                      ))}
                    </div>
                  </div>
                </>
              ) : (
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                  <div style={{
                    fontFamily: FONTS.display, fontWeight: 700, fontSize: 24, letterSpacing: -0.6,
                    lineHeight: 1.2, color: TOKENS.ink, marginBottom: 6,
                  }}>
                    Parfait — vos outils sont prêts.
                  </div>
                  <div style={{ fontFamily: FONTS.sans, fontSize: 13, color: 'rgba(29,29,29,0.7)', marginBottom: 16 }}>
                    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',
                      });
                    }}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(29,29,29,0.38)'; e.currentTarget.style.boxShadow = '0 4px 12px -4px rgba(29,29,29,0.12)'; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(29,29,29,0.18)'; e.currentTarget.style.boxShadow = 'none'; }}
                    style={{
                      width: '100%', padding: '14px 16px', borderRadius: 10,
                      background: '#fff', color: TOKENS.ink,
                      border: '1.5px solid rgba(29,29,29,0.18)',
                      fontFamily: FONTS.sans, fontSize: 15, fontWeight: 600,
                      cursor: 'pointer',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
                      transition: 'border-color .15s ease, box-shadow .15s ease',
                      boxSizing: 'border-box',
                    }}>
                    <svg width="18" height="18" 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: 12,
                    margin: '16px 0',
                    fontFamily: FONTS.mono, fontSize: 10, fontWeight: 500,
                    letterSpacing: 2, 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: '14px 16px', borderRadius: 10,
                    border: emailError ? '1.5px solid #e53e3e' : '1.5px solid rgba(29,29,29,0.18)', background: '#fff',
                    fontFamily: FONTS.sans, fontSize: 15, color: TOKENS.ink, marginBottom: emailError ? 4 : 10,
                    outline: 'none', boxSizing: 'border-box',
                  }}/>
                  {emailError && <div style={{ fontFamily: FONTS.sans, fontSize: 12, color: '#e53e3e', marginBottom: 8 }}>Veuillez entrer un email valide.</div>}
                  <button type="submit" style={{
                    width: '100%', background: TOKENS.bordeaux, color: '#fff',
                    border: 'none', padding: '16px', borderRadius: 10,
                    fontFamily: FONTS.sans, fontSize: 15, fontWeight: 600, cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                    boxShadow: '0 10px 24px -6px rgba(92,13,7,0.4)',
                  }}>
                    <span style={{
                      width: 7, height: 7, 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: 16 }}>
                    <button type="button" onClick={() => setStep(2)} style={{
                      background: 'transparent', border: 'none',
                      fontFamily: FONTS.sans, fontSize: 13, fontWeight: 500,
                      color: 'rgba(29,29,29,0.65)', cursor: 'pointer', padding: 0,
                    }}>
                      ← Précédent
                    </button>
                    <div style={{ display: 'flex', gap: 6 }}>
                      {[0,1,2,3].map(i => (
                        <div key={i} style={{
                          width: 18, height: 4, borderRadius: 99,
                          background: i < 3 ? TOKENS.green : TOKENS.ink,
                          transition: 'all .25s',
                        }}/>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <style>{`@keyframes v5pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }`}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Full landing D
// ─────────────────────────────────────────────────────────────
function V5LandingD({ withNav = true }) {
  return (
    <div style={{ width: 1440, background: TOKENS.paper, position: 'relative' }}>
      {withNav && <FixedNav onDark={true}/>}
      <V5NoBento/>
      <TrustBar onDark={false} mobile={false}/>
      <WhySimulateSection mobile={false}/>
      <ProductSection mobile={false}/>
      <FeaturesSection mobile={false}/>
      <WhySection mobile={false}/>
      <TestimonialsSection mobile={false}/>
      <FinalCtaSection mobile={false}/>
      <Footer mobile={false}/>
    </div>
  );
}

function V5LandingDMobile({ withNav = true }) {
  return (
    <div style={{ width: 390, background: TOKENS.paper, position: 'relative' }}>
      {withNav && <FixedNavMobile onDark={true}/>}
      <V5MobileD/>
      <TrustBar onDark={false} mobile={true}/>
      <WhySimulateSection mobile={true}/>
      <ProductSection mobile={true}/>
      <FeaturesSection mobile={true}/>
      <WhySection mobile={true}/>
      <TestimonialsSection mobile={true}/>
      <FinalCtaSection mobile={true}/>
      <Footer mobile={true}/>
    </div>
  );
}

Object.assign(window, { V5NoBento, V5LandingD, V5LandingDMobile });