(function(){
// help-block.jsx — "Vous n'avez pas trouvé ?" — 2-column help + contact form
// Placed at the bottom of /vehicles when the user needs extra help.

function HelpBlock({ search, compact = false }) {
  const [name, setName] = React.useState('');
  const [firstName, setFirstName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [rgpd, setRgpd] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);

  // Parse agency city from "Van-Away Bordeaux - Bordeaux"
  const agencyCity = React.useMemo(() => {
    const parts = (search?.agencyName || '').split(' - ');
    return parts[1] || parts[0] || 'votre agence';
  }, [search?.agencyName]);

  const fmt = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    return d.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  };

  const defaultMessage = `Bonjour,

Je n'ai pas trouvé de véhicule disponible au départ de ${agencyCity} du ${fmt(search?.startDate)} au ${fmt(search?.endDate)}.

Merci de me recontacter pour m'aider à trouver un véhicule correspondant à mes besoins.

Bien cordialement.`;

  const [message, setMessage] = React.useState(defaultMessage);

  // Reset message if search changes
  React.useEffect(() => { setMessage(defaultMessage); }, [defaultMessage]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!rgpd) return;
    setSubmitted(true);
  };

  return (
    <section className={`va-help ${compact ? 'is-compact' : ''}`}>
      <div className="va-help-inner">
        {/* Left: copy + contact options */}
        <div className="va-help-left">
          <div className="va-help-eyebrow">
            <span className="va-help-eyebrow-dot"/>
            Besoin d'aide ?
          </div>
          <h2 className="va-help-title">
            Vous n'avez pas trouvé<br/>votre van idéal ?
          </h2>
          <p className="va-help-lead">
            Pas de panique — on a encore plusieurs cordes à notre arc pour vous aider à prendre la route.
          </p>

          <ul className="va-help-list">
            <li className="va-help-item">
              <span className="va-help-item-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/>
                  <line x1="7" y1="7" x2="7.01" y2="7"/>
                </svg>
              </span>
              <div className="va-help-item-body">
                <strong>Consulter nos offres de dernière disponibilité</strong>
                <p>Des véhicules remis à la location à prix préférentiel. <a href="#" onClick={(e)=>e.preventDefault()}>Voir les offres →</a></p>
              </div>
            </li>

            <li className="va-help-item">
              <span className="va-help-item-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
                </svg>
              </span>
              <div className="va-help-item-body">
                <strong>Contacter directement votre agence {agencyCity}</strong>
                <p>Parfois, un bon vieux contact humain vaut mieux que n'importe quel algo.</p>
                <div className="va-help-agency-contact">
                  <a href={`mailto:${agencyCity.toLowerCase()}@van-away.com`}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                      <polyline points="22,6 12,13 2,6"/>
                    </svg>
                    <span>{agencyCity.toLowerCase()}@van-away.com</span>
                  </a>
                  <span className="va-help-agency-sep">·</span>
                  <a href="tel:+33782178271">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
                    </svg>
                    07 82 17 82 71
                  </a>
                </div>
              </div>
            </li>

            <li className="va-help-item">
              <span className="va-help-item-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1118 0z"/>
                  <circle cx="12" cy="10" r="3"/>
                </svg>
              </span>
              <div className="va-help-item-body">
                <strong>Nous laisser vos coordonnées</strong>
                <p>Remplissez le formulaire ci-contre, notre équipe vous trouvera le van le plus proche de vos besoins — gratuit et sans engagement.</p>
              </div>
            </li>
          </ul>

          <div className="va-help-response">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
            </svg>
            <span>Réponse sous <strong>24 h ouvrées</strong> en moyenne</span>
          </div>
        </div>

        {/* Right: form card */}
        <div className="va-help-right">
          <form className="va-help-form" onSubmit={handleSubmit} noValidate>
            {submitted ? (
              <div className="va-help-success">
                <div className="va-help-success-icon">
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
                <h3>Message envoyé !</h3>
                <p>Notre équipe {agencyCity} vous recontacte très vite. Merci pour votre confiance.</p>
                <button type="button" className="va-help-success-back" onClick={()=>{setSubmitted(false); setName(''); setFirstName(''); setEmail(''); setPhone(''); setRgpd(false);}}>
                  Envoyer un autre message
                </button>
              </div>
            ) : (
              <>
                <div className="va-help-form-header">
                  <h3>Laissez-nous vos coordonnées</h3>
                  <span className="va-help-form-sub">On revient vers vous avec une solution adaptée.</span>
                </div>

                <div className="va-help-form-grid">
                  <label className="va-help-field">
                    <span className="va-help-field-label">Nom <em>*</em></span>
                    <input type="text" value={name} onChange={(e)=>setName(e.target.value)} placeholder="Dupont" required/>
                  </label>
                  <label className="va-help-field">
                    <span className="va-help-field-label">Prénom <em>*</em></span>
                    <input type="text" value={firstName} onChange={(e)=>setFirstName(e.target.value)} placeholder="Marie" required/>
                  </label>
                  <label className="va-help-field">
                    <span className="va-help-field-label">E-mail <em>*</em></span>
                    <input type="email" value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="marie.dupont@email.com" required/>
                  </label>
                  <label className="va-help-field">
                    <span className="va-help-field-label">Téléphone</span>
                    <input type="tel" value={phone} onChange={(e)=>setPhone(e.target.value)} placeholder="06 12 34 56 78"/>
                  </label>
                </div>

                <label className="va-help-field va-help-field-full">
                  <span className="va-help-field-label">Votre message <span className="va-help-hint">(vous pouvez le personnaliser)</span></span>
                  <textarea rows={7} value={message} onChange={(e)=>setMessage(e.target.value)}/>
                </label>

                <label className="va-help-rgpd">
                  <span className={`va-help-toggle ${rgpd ? 'is-on' : ''}`} onClick={()=>setRgpd(!rgpd)} role="checkbox" aria-checked={rgpd} tabIndex={0}
                    onKeyDown={(e)=>{if(e.key===' '||e.key==='Enter'){e.preventDefault(); setRgpd(!rgpd);}}}>
                    <span className="va-help-toggle-knob"/>
                  </span>
                  <span className="va-help-rgpd-text">
                    Pour traiter votre demande, nous traitons vos données personnelles. <a href="#" onClick={(e)=>e.preventDefault()}>Politique de confidentialité</a> <em>*</em>
                  </span>
                </label>

                <div className="va-help-form-footer">
                  <span className="va-help-required">* champs obligatoires</span>
                  <button type="submit" className={`va-help-submit ${rgpd && name && firstName && email ? 'is-ready' : ''}`} disabled={!rgpd || !name || !firstName || !email}>
                    <span>Envoyer ma demande</span>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                      <line x1="5" y1="12" x2="19" y2="12"/>
                      <polyline points="12 5 19 12 12 19"/>
                    </svg>
                  </button>
                </div>
              </>
            )}
          </form>
        </div>
      </div>

      <style>{`
        .va-help{margin-top:48px;padding:56px 24px 56px;background:#e7fcfb;position:relative}
        .va-help.is-compact{padding:32px 16px;margin-top:32px}
        .va-help-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
        .va-help.is-compact .va-help-inner{grid-template-columns:1fr;gap:28px}

        /* LEFT */
        .va-help-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;color:${VA_TEAL};text-transform:uppercase;letter-spacing:2px;margin-bottom:16px}
        .va-help-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:${VA_TEAL};box-shadow:0 0 0 4px rgba(17,151,143,.15)}
        .va-help-title{font-size:34px;font-weight:900;color:${VA_INK};line-height:1.1;letter-spacing:-0.02em;margin:0 0 14px}
        .va-help.is-compact .va-help-title{font-size:26px}
        .va-help-title br{display:block}
        .va-help-lead{font-size:15px;color:${VA_MUTED};line-height:1.55;margin:0 0 28px;max-width:480px}
        .va-help-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:18px}
        .va-help-item{display:flex;gap:14px;align-items:flex-start}
        .va-help-item-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:${VA_SURFACE};color:${VA_TEAL};display:flex;align-items:center;justify-content:center;border:1px solid ${VA_BORDER};box-shadow:0 1px 2px rgba(4,40,40,.04)}
        .va-help-item-body{flex:1;min-width:0}
        .va-help-item-body strong{display:block;font-size:14px;font-weight:700;color:${VA_INK};margin-bottom:3px}
        .va-help-item-body p{font-size:13px;color:${VA_MUTED};line-height:1.5;margin:0}
        .va-help-item-body a{color:${VA_TEAL};font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
        .va-help-item-body a:hover{border-bottom-color:${VA_TEAL}}
        .va-help-agency-contact{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
        .va-help-agency-contact a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:${VA_TEAL};text-decoration:none}
        .va-help-agency-sep{color:${VA_BORDER};font-weight:300}
        .va-help-response{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:${VA_SURFACE};border:1px solid ${VA_BORDER};border-radius:999px;font-size:13px;color:${VA_INK};box-shadow:0 1px 2px rgba(4,40,40,.04)}
        .va-help-response svg{color:${VA_TEAL}}
        .va-help-response strong{font-weight:700;color:${VA_TEAL}}

        /* RIGHT — Form card */
        .va-help-right{position:relative}
        .va-help-form{background:${VA_SURFACE};border-radius:24px;padding:32px;box-shadow:0 1px 2px rgba(4,40,40,.04),0 12px 40px rgba(4,40,40,.08);border:1px solid ${VA_BORDER}}
        .va-help.is-compact .va-help-form{padding:22px}
        .va-help-form-header{margin-bottom:22px}
        .va-help-form-header h3{font-size:22px;font-weight:900;color:${VA_INK};margin:0 0 4px;letter-spacing:-0.01em}
        .va-help-form-sub{font-size:13px;color:${VA_MUTED}}
        .va-help-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
        .va-help.is-compact .va-help-form-grid{grid-template-columns:1fr}
        .va-help-field{display:flex;flex-direction:column;gap:6px}
        .va-help-field-label{font-size:12px;font-weight:700;color:${VA_INK};letter-spacing:.02em}
        .va-help-field-label em{color:${T_DANGER || '#C0392B'};font-style:normal;font-weight:700;margin-left:2px}
        .va-help-hint{font-weight:400;color:${VA_MUTED};font-size:11px;margin-left:4px}
        .va-help-field input, .va-help-field textarea{font-family:inherit;font-size:14px;color:${VA_INK};padding:12px 14px;border:1.5px solid ${VA_BORDER};border-radius:12px;background:${VA_SURFACE};outline:none;transition:all .2s ease;resize:vertical}
        .va-help-field input:focus, .va-help-field textarea:focus{border-color:${VA_TEAL};box-shadow:0 0 0 4px rgba(17,151,143,.1)}
        .va-help-field input::placeholder, .va-help-field textarea::placeholder{color:${VA_MUTED};font-weight:400}
        .va-help-field textarea{line-height:1.55;min-height:140px}

        /* RGPD toggle */
        .va-help-rgpd{display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer;user-select:none}
        .va-help-toggle{flex-shrink:0;width:36px;height:20px;border-radius:999px;background:${VA_BORDER};position:relative;transition:background .25s;cursor:pointer;margin-top:1px}
        .va-help-toggle.is-on{background:${VA_TEAL}}
        .va-help-toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s;box-shadow:0 1px 3px rgba(4,40,40,.25)}
        .va-help-toggle.is-on .va-help-toggle-knob{transform:translateX(16px)}
        .va-help-rgpd-text{font-size:12px;color:${VA_MUTED};line-height:1.5}
        .va-help-rgpd-text a{color:${VA_TEAL};font-weight:600;text-decoration:underline}
        .va-help-rgpd-text em{color:${T_DANGER || '#C0392B'};font-style:normal;font-weight:700}

        /* Footer + submit */
        .va-help-form-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;flex-wrap:wrap}
        .va-help-required{font-size:11px;color:${VA_MUTED}}
        .va-help-submit{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border:none;border-radius:999px;background:${VA_TEAL};color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .25s;box-shadow:0 2px 8px rgba(17,151,143,.2);letter-spacing:.01em}
        .va-help-submit:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
        .va-help-submit:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(17,151,143,.35);background:#1c7d77}
        .va-help-submit svg{transition:transform .2s}
        .va-help-submit:not(:disabled):hover svg{transform:translateX(3px)}

        /* Success state */
        .va-help-success{text-align:center;padding:40px 20px}
        .va-help-success-icon{width:64px;height:64px;border-radius:50%;background:#e7fcfb;color:${VA_TEAL};display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
        .va-help-success h3{font-size:22px;font-weight:900;color:${VA_INK};margin:0 0 8px}
        .va-help-success p{font-size:14px;color:${VA_MUTED};margin:0 0 20px;line-height:1.5}
        .va-help-success-back{border:1.5px solid ${VA_BORDER};background:transparent;color:${VA_TEAL};padding:10px 18px;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
        .va-help-success-back:hover{border-color:${VA_TEAL};background:rgba(17,151,143,.06)}

        /* Responsive */
        @media (max-width: 900px){
          .va-help{padding:40px 20px}
          .va-help-inner{grid-template-columns:1fr;gap:32px}
          .va-help-title{font-size:26px}
          .va-help-form{padding:22px}
          .va-help-form-grid{grid-template-columns:1fr}
        }
      `}</style>
    </section>
  );
}

const T_DANGER = '#C0392B';
Object.assign(window, { HelpBlock });
window.HelpBlockV1 = HelpBlock;
window.HelpBlockV2 = HelpBlock;

})();