// Page Contact

// ── Champs de formulaire ──────────────────────────────────────────────────

const CInput = ({label, name, type='text', required, placeholder, span}) => (
  <label style={{display:'block', gridColumn: span ? '1 / -1' : undefined}}>
    <div style={{fontFamily:v4Theme.fontBody, fontSize:12.5, fontWeight:600,
      color:v4Theme.ink, marginBottom:7, letterSpacing:0.2}}>
      {label}{required && <span style={{color:v4Theme.purple, marginLeft:3}}>*</span>}
    </div>
    <input name={name} type={type} required={required} placeholder={placeholder}
      style={{width:'100%', padding:'13px 15px', borderRadius:11,
        border:`1.5px solid ${v4Theme.border}`, background:v4Theme.bg,
        fontFamily:v4Theme.fontBody, fontSize:14.5, color:v4Theme.ink,
        boxSizing:'border-box', outline:'none', transition:'border-color .15s'}}
      onFocus={e => e.target.style.borderColor = v4Theme.teal}
      onBlur={e  => e.target.style.borderColor = v4Theme.border}/>
  </label>
);

const CSelect = ({label, name, options, span}) => (
  <label style={{display:'block', gridColumn: span ? '1 / -1' : undefined}}>
    <div style={{fontFamily:v4Theme.fontBody, fontSize:12.5, fontWeight:600,
      color:v4Theme.ink, marginBottom:7, letterSpacing:0.2}}>{label}</div>
    <select name={name} style={{width:'100%', padding:'13px 15px', borderRadius:11,
      border:`1.5px solid ${v4Theme.border}`, background:v4Theme.bg,
      fontFamily:v4Theme.fontBody, fontSize:14.5, color:v4Theme.ink,
      boxSizing:'border-box', outline:'none', appearance:'none',
      backgroundImage:`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7794' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")`,
      backgroundRepeat:'no-repeat', backgroundPosition:'right 14px center'}}>
      {options.map(o => <option key={o}>{o}</option>)}
    </select>
  </label>
);

const CTextarea = ({label, name, placeholder}) => (
  <label style={{display:'block', gridColumn:'1 / -1'}}>
    <div style={{fontFamily:v4Theme.fontBody, fontSize:12.5, fontWeight:600,
      color:v4Theme.ink, marginBottom:7, letterSpacing:0.2}}>{label}</div>
    <textarea name={name} rows={4} placeholder={placeholder}
      style={{width:'100%', padding:'13px 15px', borderRadius:11,
        border:`1.5px solid ${v4Theme.border}`, background:v4Theme.bg,
        fontFamily:v4Theme.fontBody, fontSize:14.5, color:v4Theme.ink,
        boxSizing:'border-box', outline:'none', resize:'vertical',
        transition:'border-color .15s', lineHeight:1.6}}
      onFocus={e => e.target.style.borderColor = v4Theme.teal}
      onBlur={e  => e.target.style.borderColor = v4Theme.border}/>
  </label>
);

// ── Étapes "ce qui se passe après" ────────────────────────────────────────

const steps = [
  {n:'01', t:'On vous répond dans les 24 h',
    d:'Un message pour confirmer votre demande et proposer un créneau qui vous convient.'},
  {n:'02', t:'Appel de 15 minutes',
    d:'On regarde votre fiche Google en direct, on vous dit exactement ce qui freine votre visibilité.'},
  {n:'03', t:'Un plan, pas un pitch',
    d:'Vous repartez avec des recommandations concrètes. Si on peut travailler ensemble, on vous fait une proposition claire.'},
];

// ── Corps de la page ──────────────────────────────────────────────────────

const ContactBody = () => {
  const [done, setDone] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [err, setErr] = React.useState('');
  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setSending(true);
    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
    try {
      const r = await fetch(v4Href('api/contact'), {method:'POST',
        headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)});
      const j = await r.json().catch(() => ({}));
      if (r.ok && j.ok) setDone(true);
      else setErr("L'envoi n'a pas fonctionné. Réessayez ou écrivez-nous à info@vue360.ca.");
    } catch (_) {
      setErr("L'envoi n'a pas fonctionné. Réessayez ou écrivez-nous à info@vue360.ca.");
    }
    setSending(false);
  };

  return (
    <section style={{padding:'40px 56px 140px', background:v4Theme.bg}}>
      <div style={{maxWidth:1440, margin:'0 auto',
        display:'grid', gridTemplateColumns:'1fr 1.15fr', gap:72, alignItems:'flex-start'}}>

        {/* ── Colonne gauche ── */}
        <div>
          <h2 style={{fontFamily:v4Theme.fontDisplay, fontSize:42, fontWeight:600,
            color:v4Theme.ink, margin:0, marginBottom:16, letterSpacing:-1, lineHeight:1.1}}>
            15 minutes suffisent à voir<br/>
            <em style={{color:v4Theme.teal, fontStyle:'italic'}}>où vous perdez des clients.</em>
          </h2>
          <p style={{fontFamily:v4Theme.fontBody, fontSize:16, color:v4Theme.inkSoft,
            lineHeight:1.65, margin:0, marginBottom:48, textWrap:'pretty'}}>
            Pas de présentation de 45 minutes. On regarde votre fiche Google en direct, on vous montre ce qui ne va pas, et on vous dit ce qu'on ferait. Gratuit, sans engagement.
          </p>

          {/* Étapes */}
          <div style={{display:'flex', flexDirection:'column', gap:0}}>
            {steps.map((s, i) => (
              <div key={s.n} style={{display:'grid', gridTemplateColumns:'44px 1fr', gap:16,
                paddingBottom: i < steps.length - 1 ? 28 : 0, position:'relative'}}>
                {/* Ligne verticale entre les étapes */}
                {i < steps.length - 1 && (
                  <div style={{position:'absolute', left:21, top:44, bottom:0, width:2,
                    background:`linear-gradient(${v4Theme.teal}40, transparent)`}}/>
                )}
                <div style={{width:44, height:44, borderRadius:'50%', flexShrink:0,
                  background:`linear-gradient(135deg, ${v4Theme.blue}15, ${v4Theme.teal}25)`,
                  border:`1.5px solid ${v4Theme.teal}40`,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:v4Theme.fontMono || v4Theme.fontBody,
                  fontSize:11, fontWeight:700, color:v4Theme.teal, letterSpacing:0.5}}>
                  {s.n}
                </div>
                <div style={{paddingTop:10}}>
                  <div style={{fontFamily:v4Theme.fontDisplay, fontSize:17, fontWeight:600,
                    color:v4Theme.ink, marginBottom:5, letterSpacing:-0.2}}>{s.t}</div>
                  <div style={{fontFamily:v4Theme.fontBody, fontSize:14, color:v4Theme.inkSoft,
                    lineHeight:1.6}}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Séparateur + infos pratiques */}
          <div style={{marginTop:48, paddingTop:32, borderTop:`1px solid ${v4Theme.border}`,
            display:'flex', flexDirection:'column', gap:14}}>
            {[
              {l:'Courriel', v:'info@vue360.ca'},
              {l:'Disponibilité', v:'Lun. au ven., 9 h à 17 h'},
              {l:'Territoire', v:'Laurentides seulement (stations de ski : partout au Québec)'},
            ].map(c => (
              <div key={c.l} style={{display:'flex', gap:12, alignItems:'baseline'}}>
                <div style={{fontFamily:v4Theme.fontBody, fontSize:11.5, fontWeight:700,
                  color:v4Theme.muted, letterSpacing:1.2, textTransform:'uppercase',
                  minWidth:108}}>{c.l}</div>
                <div style={{fontFamily:v4Theme.fontBody, fontSize:15, color:v4Theme.ink,
                  fontWeight:500}}>{c.v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* ── Colonne droite : formulaire ── */}
        <div style={{background:v4Theme.surface, borderRadius:28, padding:40,
          border:`1px solid ${v4Theme.border}`,
          boxShadow:'0 8px 40px rgba(10,24,64,0.06)'}}>
          {done ? (
            <div style={{textAlign:'center', padding:'52px 0'}}>
              <div style={{width:64, height:64, borderRadius:'50%', margin:'0 auto 20px',
                background:`${v4Theme.teal}15`, display:'flex', alignItems:'center',
                justifyContent:'center'}}>
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                  <path d="M5 14l6 6L23 8" stroke={v4Theme.teal} strokeWidth="2.5"
                    strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h3 style={{fontFamily:v4Theme.fontDisplay, fontSize:28, fontWeight:600,
                color:v4Theme.ink, margin:0, marginBottom:10, letterSpacing:-0.5}}>
                Message reçu.
              </h3>
              <p style={{fontFamily:v4Theme.fontBody, fontSize:15, color:v4Theme.inkSoft,
                margin:0, lineHeight:1.6}}>
                On vous revient dans les 24 heures ouvrables pour proposer un créneau.
              </p>
            </div>
          ) : (
            <>
              <div style={{fontFamily:v4Theme.fontDisplay, fontSize:22, fontWeight:600,
                color:v4Theme.ink, marginBottom:6, letterSpacing:-0.4}}>
                Réservez votre appel découverte
              </div>
              <div style={{fontFamily:v4Theme.fontBody, fontSize:14, color:v4Theme.muted,
                marginBottom:28}}>Gratuit · Sans engagement · 15 minutes</div>

              <form onSubmit={submit}
                style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <CInput label="Prénom" name="prenom" required/>
                <CInput label="Nom" name="nom" required/>
                <CInput label="Courriel" name="courriel" type="email" required span/>
                <V4PlaceInput label="Nom du commerce" name="commerce" required span placeholder="Commencez à taper le nom…"
                  onPick={(it) => { const v = document.querySelector('form [name=ville]'); if (v) v.value = it.secondary || ''; }}/>
                <CInput label="Ville" name="ville" placeholder="Ex: Sainte-Agathe-des-Monts"/>
                <CSelect label="Service qui vous intéresse" name="service"
                  options={['Tour virtuel 360° / Street View', 'Visibilité locale (cartes et recherches)', 'Conception de site web', 'Système d\'avis', 'Forfait complet', 'Je ne sais pas encore']}/>
                <CTextarea label="Parlez-nous brièvement de votre commerce" name="message"
                  placeholder="Type de commerce, nombre d'années en activité, ce que vous voulez améliorer..."/>

                <input type="text" name="site_web" tabIndex={-1} autoComplete="off" aria-hidden="true"
                  style={{position:'absolute',left:'-9999px',width:1,height:1,opacity:0}}/>
                <div style={{gridColumn:'1 / -1'}}>
                  {err && <div role="alert" style={{fontFamily:v4Theme.fontBody,fontSize:14,color:'#b42318',
                    marginBottom:12}}>{err}</div>}
                  <button type="submit" disabled={sending} style={{width:'100%', background:v4Theme.ink,
                    color:v4Theme.bg, border:'none', borderRadius:999, padding:'18px',
                    fontFamily:v4Theme.fontBody, fontWeight:700, fontSize:15.5, cursor:'pointer',
                    letterSpacing:-0.1, transition:'opacity .15s'}}
                    onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
                    onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
                    {sending ? 'Envoi en cours…' : 'Envoyer ma demande →'}
                  </button>
                  <div style={{fontFamily:v4Theme.fontBody, fontSize:12, color:v4Theme.muted,
                    textAlign:'center', marginTop:14}}>
                    Réponse dans les 24 h ouvrables.
                  </div>
                </div>
              </form>
            </>
          )}
        </div>
      </div>

    </section>
  );
};

const ContactApp = () => (
  <div style={{background:v4Theme.bg, color:v4Theme.ink, fontFamily:v4Theme.fontBody}}>
    <V4Nav active="contact"/>
    <V4PageHero
      eyebrow="Contact · Réponse en moins de 24 h"
      title="Un appel de"
      gradient="15 minutes."
      subtitle="On regarde votre fiche Google ensemble, on identifie ce qui freine votre visibilité, et on vous donne un plan. Gratuit, sans engagement."
      accent={v4Theme.blue}/>
    <ContactBody/>
    <V4Footer/>
  </div>
);
ReactDOM.createRoot(document.getElementById('root')).render(<ContactApp/>);