// Final CTA form + footer + booking modal
const { useState: useStateF } = React;

function FormCTA({ accent = '#C9A961', onCTA }) {
  const [data, setData] = useStateF({ nom: '', prenom: '', entreprise: '', tel: '', email: '', besoin: '' });
  const [sent, setSent] = useStateF(false);
  const [errors, setErrors] = useStateF({});

  const update = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.nom.trim()) errs.nom = true;
    if (!data.prenom.trim()) errs.prenom = true;
    if (!data.email.trim() || !data.email.includes('@')) errs.email = true;
    if (!data.tel.trim()) errs.tel = true;
    if (Object.keys(errs).length) {setErrors(errs);return;}
    setErrors({});
    // Open user's email client prefilled with the form payload.
    const subject = `Demande d'accompagnement — ${data.prenom} ${data.nom}`;
    const body =
      `Bonjour,\n\n` +
      `Je souhaite être recontacté(e) au sujet d'un accompagnement.\n\n` +
      `— Prénom : ${data.prenom}\n` +
      `— Nom : ${data.nom}\n` +
      `— Entreprise : ${data.entreprise || '—'}\n` +
      `— Téléphone : ${data.tel}\n` +
      `— Email : ${data.email}\n\n` +
      `Besoin :\n${data.besoin || '—'}\n\n` +
      `Envoyé depuis mls-conseil.net`;
    const mailto = `mailto:contact@mls-conseil.net?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = mailto;
    setSent(true);
  };

  return (
    <Section id="contact" bg="transparent" py={140} label="06 · Demander un accompagnement">
      <div style={{
        background: '#FBF7EE',
        border: '1px solid #1B2A4E1F',
        borderRadius: 32,
        padding: 'clamp(32px, 4vw, 64px)',
        position: 'relative', overflow: 'hidden',
        boxShadow: '0 30px 60px -25px #14223d22'
      }}>
        {/* decorative serif */}
        <div className="serif" style={{
          position: 'absolute', right: -10, bottom: -80, fontSize: 280,
          color: `${accent}22`, lineHeight: 0.8, pointerEvents: 'none', userSelect: 'none'
        }}>MLS</div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, position: 'relative' }}>
          <div>
            <h2 style={{
              fontSize: 'clamp(34px, 4vw, 56px)', fontWeight: 600, letterSpacing: '-0.035em',
              lineHeight: 1.0, margin: '0 0 22px', color: '#14223D'
            }}>
              Discutons de votre{' '}
              <span className="serif" style={{ color: '#A8884A', fontWeight: 400, fontSize: '1.05em' }}>besoin.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: '#4A5878', maxWidth: 380, margin: '0 0 32px' }}>
              Premier rendez-vous de 30 minutes, gratuit et sans engagement. Vous nous parlez de votre activité, on vous propose un cadre.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, fontSize: 14, color: '#14223D' }}>
              {[
              { icon: 'phone', label: '07 49 29 81 43', sub: 'Lun–Ven · 9h–18h' },
              { icon: 'mail', label: 'contact@mls-conseil.net', sub: 'Réponse sous 48h ouvrées' },
              { icon: 'pin', label: 'France & visio', sub: 'France entière en distanciel' }].
              map((c, i) =>
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{
                  width: 40, height: 40, borderRadius: '50%',
                  background: `${accent}22`, color: '#A8884A',
                  display: 'grid', placeItems: 'center'
                }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                      {c.icon === 'phone' && <path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />}
                      {c.icon === 'mail' && <path d="M3 7l9 6 9-6M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7M3 7a2 2 0 012-2h14a2 2 0 012 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />}
                      {c.icon === 'pin' && <path d="M12 22s8-7 8-13a8 8 0 10-16 0c0 6 8 13 8 13zm0-10a3 3 0 110-6 3 3 0 010 6z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />}
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontWeight: 500, color: '#14223D' }}>{c.label}</div>
                    <div style={{ fontSize: 12, color: '#4A5878', marginTop: 2 }}>{c.sub}</div>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div>
            {sent ?
            <div style={{
              background: '#14223D', color: '#F4EEE2', borderRadius: 22, padding: 40,
              display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16
            }}>
                <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: `${accent}33`, color: accent,
                display: 'grid', placeItems: 'center'
              }}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 400, margin: 0, color: '#F4EEE2' }}>Merci, {data.prenom || 'à très vite'}.</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: '#F4EEE2BB', margin: 0 }}>
                  Votre messagerie s'est ouverte avec un message pré-rempli pour <strong style={{ color: '#F4EEE2' }}>contact@mls-conseil.net</strong>. Vérifiez les informations puis envoyez — réponse sous 48h ouvrées.
                </p>
                <button onClick={() => setSent(false)} style={{
                marginTop: 8, background: 'transparent', border: `1px solid ${accent}`,
                color: accent, padding: '10px 18px', borderRadius: 999, fontSize: 13, cursor: 'pointer'
              }}>Envoyer une autre demande</button>
              </div> :

            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <Field label="Prénom" value={data.prenom} onChange={update('prenom')} err={errors.prenom} />
                  <Field label="Nom" value={data.nom} onChange={update('nom')} err={errors.nom} />
                </div>
                <Field label="Entreprise (optionnel)" value={data.entreprise} onChange={update('entreprise')} />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <Field label="Téléphone" type="tel" value={data.tel} onChange={update('tel')} err={errors.tel} />
                  <Field label="Email" type="email" value={data.email} onChange={update('email')} err={errors.email} />
                </div>
                <Field label="Votre besoin" textarea value={data.besoin} onChange={update('besoin')}
              placeholder="Ex : passage en facturation électronique, structuration de l'administratif, plan de trésorerie 12 mois…" />

                <div style={{
                display: 'flex', alignItems: 'center', gap: 10, marginTop: 6,
                fontSize: 12, color: '#4A5878'
              }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  Vos données restent confidentielles · Aucune prospection externe
                </div>

                <div style={{ marginTop: 14 }}>
                  <PrimaryButton size="lg">Demander un accompagnement</PrimaryButton>
                </div>
              </form>
            }
          </div>
        </div>
      </div>
    </Section>);

}

function Field({ label, value, onChange, type = 'text', textarea = false, placeholder = '', err = false }) {
  const [focus, setFocus] = useStateF(false);
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, position: 'relative' }}>
      <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', color: err ? '#C46A5C' : '#4A5878', textTransform: 'uppercase', fontWeight: 500 }}>
        {label}
      </span>
      <Tag
        type={type}
        value={value}
        onChange={onChange}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        placeholder={placeholder}
        rows={textarea ? 3 : undefined}
        style={{
          background: '#F4EEE2',
          border: `1.5px solid ${err ? '#C46A5C' : focus ? '#14223D' : '#1B2A4E22'}`,
          borderRadius: 12,
          padding: '14px 16px',
          fontSize: 14.5, color: '#14223D',
          fontFamily: 'inherit',
          outline: 'none',
          resize: textarea ? 'vertical' : 'none',
          transition: 'border .15s'
        }} />
      
    </label>);

}

// ==========================================================
// FOOTER
// ==========================================================
function Footer({ accent = '#C9A961' }) {
  return (
    <footer style={{ background: '#0E1730', color: '#F4EEE2', padding: '70px 0 30px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, marginBottom: 50 }}>
          <div>
            <Logo light />
            <p style={{ fontSize: 13.5, color: '#F4EEE299', lineHeight: 1.6, marginTop: 18, maxWidth: 320 }}>Entreprise de conseil en gestion pour dirigeants, indépendants, micro-entrepreneurs et TPE. Administratif, trésorerie, conformité.

            </p>
          </div>
          {[
          { h: 'Services', items: ['Accompagnement administratif', 'Plan de trésorerie', 'Micro-entreprise', 'Facturation électronique'] },
          { h: 'Entreprise', items: ['Pourquoi MLS Conseil', 'Témoignages', 'Tarifs', 'Foire aux questions'] },
          { h: 'Contact', items: ['07 49 29 81 43', 'contact@mls-conseil.net', 'France & visio', 'Lun–Ven · 9h–18h'] }].
          map((col, i) =>
          <div key={i}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', color: accent, textTransform: 'uppercase', marginBottom: 18 }}>{col.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map((it, j) =>
              <li key={j} style={{ fontSize: 13.5, color: '#F4EEE2BB' }}>{it}</li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, borderTop: '1px solid #F4EEE218',
          fontSize: 12, color: '#F4EEE266', flexWrap: 'wrap', gap: 12
        }}>
          <div>© 2026 MLS Conseil · </div>
          <div style={{ display: 'flex', gap: 22 }}>
            <span>Mentions légales</span>
            <span>Politique de confidentialité</span>
            <span>CGV</span>
          </div>
        </div>
      </div>
    </footer>);

}

// ==========================================================
// BOOKING MODAL (RDV)
// ==========================================================
function BookingModal({ open, onClose, accent }) {
  const [step, setStep] = useStateF(0);
  const [picked, setPicked] = useStateF(null);

  if (!open) return null;
  const days = [
  { d: 'Mar.', n: '12', m: 'mai', slots: ['09:30', '11:00', '14:00', '16:30'] },
  { d: 'Mer.', n: '13', m: 'mai', slots: ['10:00', '11:30', '15:00'] },
  { d: 'Jeu.', n: '14', m: 'mai', slots: ['09:00', '14:30', '17:00'] },
  { d: 'Ven.', n: '15', m: 'mai', slots: ['10:30', '13:30', '16:00'] }];


  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: '#14223Dcc', backdropFilter: 'blur(8px)',
      zIndex: 100, display: 'grid', placeItems: 'center', padding: 24,
      animation: 'fadeIn .2s ease-out'
    }}>
      <style>{`@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}`}</style>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: '#F4EEE2', borderRadius: 24, width: '100%', maxWidth: 720,
        padding: 36, boxShadow: '0 40px 80px -20px #00000077',
        animation: 'slideUp .3s cubic-bezier(.2,.8,.2,1)',
        position: 'relative'
      }}>
        <button onClick={onClose} style={{
          position: 'absolute', top: 20, right: 20, background: 'transparent',
          border: '1px solid #1B2A4E22', width: 36, height: 36, borderRadius: '50%',
          cursor: 'pointer', display: 'grid', placeItems: 'center'
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="#14223D" strokeWidth="2" strokeLinecap="round" /></svg>
        </button>

        {step === 0 &&
        <>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: '#A8884A', textTransform: 'uppercase', marginBottom: 12 }}>Étape 1 · Créneau</div>
            <h2 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em', margin: '0 0 6px', color: '#14223D' }}>
              Premier RDV de <span className="serif" style={{ color: '#A8884A', fontWeight: 400, fontSize: '1.05em' }}>30 minutes</span>.
            </h2>
            <p style={{ fontSize: 14, color: '#4A5878', marginBottom: 28, marginTop: 0 }}>Visio ou téléphone, gratuit, sans engagement.</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 24 }}>
              {days.map((day, i) =>
            <div key={i} style={{
              background: '#FBF7EE', border: '1px solid #1B2A4E14', borderRadius: 14, padding: 14
            }}>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.1em', color: '#4A5878', textTransform: 'uppercase' }}>{day.d}</div>
                  <div style={{ fontSize: 22, fontWeight: 600, color: '#14223D', marginTop: 2 }}>{day.n}</div>
                  <div style={{ fontSize: 11, color: '#4A5878', marginBottom: 12 }}>{day.m}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {day.slots.map((s) => {
                  const active = picked === `${day.n}-${s}`;
                  return (
                    <button key={s} onClick={() => setPicked(`${day.n}-${s}`)} style={{
                      background: active ? '#14223D' : 'transparent',
                      color: active ? '#F4EEE2' : '#14223D',
                      border: `1px solid ${active ? '#14223D' : '#1B2A4E22'}`,
                      borderRadius: 8, padding: '7px 0', fontSize: 12.5, fontWeight: 500,
                      cursor: 'pointer', textAlign: 'center'
                    }}>{s}</button>);

                })}
                  </div>
                </div>
            )}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontSize: 12, color: '#4A5878' }}>Fuseau · Europe/Paris</span>
              <PrimaryButton onClick={() => {
                if (!picked) return;
                const [day, time] = picked.split('-');
                const subject = `Demande de RDV — ${day} mai à ${time}`;
                const body =
                  `Bonjour,\n\n` +
                  `Je souhaite réserver un premier rendez-vous de 30 minutes :\n\n` +
                  `— Date : ${day} mai\n` +
                  `— Heure : ${time} (Europe/Paris)\n` +
                  `— Format souhaité : visio ou téléphone\n\n` +
                  `Mes coordonnées :\n` +
                  `— Prénom / Nom : \n` +
                  `— Téléphone : \n` +
                  `— Email : \n\n` +
                  `Sujet (optionnel) :\n\n\n` +
                  `Envoyé depuis mls-conseil.net`;
                window.location.href =
                  `mailto:contact@mls-conseil.net?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
                setStep(1);
              }}>Confirmer le créneau</PrimaryButton>
            </div>
          </>
        }
        {step === 1 &&
        <>
            <div style={{
            width: 56, height: 56, borderRadius: '50%',
            background: `${accent}33`, color: '#A8884A',
            display: 'grid', placeItems: 'center', marginBottom: 18
          }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
            <h2 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em', margin: '0 0 8px', color: '#14223D' }}>
              Email pré-rempli ouvert.
            </h2>
            <p style={{ fontSize: 15, color: '#4A5878', marginBottom: 24, lineHeight: 1.5 }}>
              Votre messagerie s'est ouverte avec une demande de RDV pré-remplie pour <strong style={{ color: '#14223D' }}>contact@mls-conseil.net</strong>. Complétez vos coordonnées puis envoyez — nous vous confirmons le créneau sous 48h ouvrées.
            </p>
            <PrimaryButton onClick={onClose}>Fermer</PrimaryButton>
          </>
        }
      </div>
    </div>);

}

Object.assign(window, { FormCTA, Footer, BookingModal });