// ── Page Contact — Calendly + formulaire ─────────────────────

// URLs Calendly réelles de Miikaa
const CALENDLY_TABS = [
  {
    label: '30 min — Démo produit',
    caption: 'Avec Pascaline · Idéal pour une première découverte',
    url: 'https://calendly.com/pascaline-miikaa/30min?hide_gdpr_banner=1&hide_event_type_details=1&primary_color=C85A3C',
  },
  {
    label: '60 min — Atelier personnalisé',
    caption: 'Avec Lionel · Pour approfondir votre cas d\'usage',
    url: 'https://calendly.com/lioneldrouin/60min?back=1&hide_gdpr_banner=1&hide_event_type_details=1&primary_color=C85A3C',
  },
];

function FormField({ label, type='text', value, onChange, required, placeholder, rows=4 }) {
  const [focused, setFocused] = React.useState(false);
  const base = {
    width:'100%',
    padding:'10px 14px',
    border:'1px solid ' + (focused ? 'var(--mk2-ember)' : 'var(--mk2-hair)'),
    borderRadius:'var(--mk2-r-md)',
    background:'var(--mk2-paper)',
    fontFamily:'var(--mk2-sans)', fontSize:14,
    color:'var(--mk2-text)', outline:'none',
    transition:'border-color .18s',
    resize:'vertical',
  };
  return (
    <div>
      <label style={{ display:'block', fontSize:12, fontWeight:600, color:'var(--mk2-muted)', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:6 }}>
        {label}{required && <span style={{ color:'var(--mk2-ember)', marginLeft:3 }}>*</span>}
      </label>
      {type === 'textarea'
        ? <textarea rows={rows} value={value} onChange={e => onChange(e.target.value)}
            placeholder={placeholder} style={base}
            onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}/>
        : <input type={type} value={value} onChange={e => onChange(e.target.value)}
            placeholder={placeholder} required={required} style={base}
            onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}/>
      }
    </div>
  );
}

function Mk2PageContact({ onNav }) {
  const [activeTab, setActiveTab] = React.useState(0);
  const [form, setForm] = React.useState({ firstName:'', lastName:'', email:'', company:'', role:'', message:'' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error

  const set = (k) => (v) => setForm(f => ({...f, [k]:v}));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    // Simulation envoi (à connecter à l'API réelle)
    await new Promise(r => setTimeout(r, 1600));
    setStatus('success');
  };

  return (
    <main>
      {/* ── En-tête ─────────────────────────────────────────── */}
      <section style={{ padding:'80px 0 56px', background:'var(--mk2-canvas-2)', position:'relative', overflow:'hidden' }}>
        <div aria-hidden style={{
          position:'absolute', right:'-5%', top:'-30%',
          width:380, height:380, borderRadius:'50%',
          background:'radial-gradient(circle, rgba(200,90,60,0.13), transparent 70%)',
          pointerEvents:'none',
        }}/>
        <div className="mk2-container" style={{ position:'relative' }}>
          <div className="mk2-eyebrow" style={{ marginBottom:14 }}>Contact</div>
          <h1 className="mk2-display" style={{ fontSize:'clamp(40px, 6vw, 68px)', marginBottom:20, maxWidth:700 }}>
            Parlons de<br/>
            <span className="mk2-italic" style={{ color:'var(--mk2-ember)' }}>votre projet</span>
          </h1>
          <p className="mk2-body" style={{ fontSize:17, maxWidth:540, color:'var(--mk2-text-2)' }}>
            Réservez un créneau avec notre équipe. Nous préparons un scénario issu de votre contexte pour vous le faire vivre en direct.
          </p>

          {/* Métriques rassurantes */}
          <div style={{ display:'flex', gap:32, marginTop:36, flexWrap:'wrap' }}>
            {[
              { v:'< 24 h', l:'Délai de réponse' },
              { v:'30 min', l:'Durée de la démo' },
              { v:'0 slide', l:'Pas de présentation commerciale' },
            ].map(({ v, l }) => (
              <div key={v}>
                <div style={{ fontFamily:'var(--mk2-serif)', fontVariationSettings:'"opsz" 48', fontSize:24, color:'var(--mk2-ember)' }}>{v}</div>
                <div className="mk2-caption" style={{ marginTop:2 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Corps 2 colonnes ─────────────────────────────────── */}
      <section style={{ padding:'64px 0 96px' }}>
        <div className="mk2-container">
          <div style={{ display:'grid', gridTemplateColumns:'1.15fr 1fr', gap:56, alignItems:'start' }}>

            {/* ── Colonne Calendly ─────────────────────────── */}
            <div>
              <div style={{
                fontFamily:'var(--mk2-serif)', fontVariationSettings:'"opsz" 48',
                fontSize:22, marginBottom:20, color:'var(--mk2-text)',
              }}>
                Réservez un créneau
              </div>

              {/* Onglets */}
              <div style={{
                display:'flex', gap:0, marginBottom:0,
                border:'1px solid var(--mk2-hair)',
                borderBottom:'none',
                borderRadius:'var(--mk2-r-lg) var(--mk2-r-lg) 0 0',
                overflow:'hidden',
              }}>
                {CALENDLY_TABS.map((tab, i) => (
                  <button key={i} onClick={() => setActiveTab(i)}
                    style={{
                      flex:1, padding:'14px 18px', cursor:'pointer',
                      border:'none', outline:'none', textAlign:'left',
                      fontFamily:'var(--mk2-sans)',
                      background: activeTab === i ? 'var(--mk2-paper)' : 'var(--mk2-canvas-2)',
                      borderBottom: activeTab === i ? '2px solid var(--mk2-ember)' : '2px solid transparent',
                      borderRight: i === 0 ? '1px solid var(--mk2-hair)' : 'none',
                      transition:'all .18s',
                    }}>
                    <div style={{ fontSize:13, fontWeight:600, color: activeTab===i ? 'var(--mk2-text)' : 'var(--mk2-text-2)', marginBottom:2 }}>
                      {tab.label}
                    </div>
                    <div style={{ fontSize:11, color:'var(--mk2-muted)', lineHeight:1.4 }}>
                      {tab.caption}
                    </div>
                  </button>
                ))}
              </div>

              {/* Iframe Calendly */}
              <div style={{
                border:'1px solid var(--mk2-hair)',
                borderTop:'none',
                borderRadius:'0 0 var(--mk2-r-lg) var(--mk2-r-lg)',
                overflow:'hidden',
                background:'var(--mk2-paper)',
              }}>
                {CALENDLY_TABS.map((tab, i) => (
                  <div key={i} style={{ display: activeTab === i ? 'block' : 'none' }}>
                    <iframe
                      src={tab.url}
                      width="100%"
                      height="660"
                      frameBorder="0"
                      title={tab.label}
                      style={{ display:'block' }}
                    />
                  </div>
                ))}
              </div>
            </div>

            {/* ── Colonne formulaire ───────────────────────── */}
            <div style={{ paddingTop:4 }}>
              <div style={{
                fontFamily:'var(--mk2-serif)', fontVariationSettings:'"opsz" 48',
                fontSize:22, marginBottom:20, color:'var(--mk2-text)',
              }}>
                Ou envoyez-nous un message
              </div>

              {status === 'success' ? (
                <div style={{
                  border:'1px solid var(--mk2-hair)',
                  borderRadius:'var(--mk2-r-lg)',
                  background:'var(--mk2-paper)',
                  padding:'48px 32px', textAlign:'center',
                }}>
                  <div style={{
                    width:52, height:52, borderRadius:'50%',
                    background:'var(--mk2-clay)', margin:'0 auto 20px',
                    display:'grid', placeItems:'center',
                    color:'var(--mk2-ember)',
                  }}>
                    <Mk2Check size={22}/>
                  </div>
                  <h3 className="mk2-h3" style={{ fontSize:20, marginBottom:10 }}>Message envoyé !</h3>
                  <p className="mk2-body" style={{ fontSize:14, marginBottom:24 }}>
                    Nous vous répondrons dans les 24 h. En attendant, vous pouvez réserver un créneau ci-contre.
                  </p>
                  <button className="mk2-btn mk2-btn-secondary" style={{ fontSize:13 }}
                    onClick={() => setStatus('idle')}>
                    Envoyer un nouveau message
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display:'flex', flexDirection:'column', gap:16 }}>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                    <FormField label="Prénom" value={form.firstName} onChange={set('firstName')} required/>
                    <FormField label="Nom" value={form.lastName} onChange={set('lastName')} required/>
                  </div>
                  <FormField label="Email professionnel" type="email" value={form.email} onChange={set('email')} required placeholder="vous@societe.com"/>
                  <FormField label="Société" value={form.company} onChange={set('company')} placeholder="Votre entreprise"/>
                  <FormField label="Votre rôle" value={form.role} onChange={set('role')} placeholder="Ex: DRH, Directeur eLearning, Gérant…"/>
                  <FormField label="Message" type="textarea" value={form.message} onChange={set('message')} placeholder="Décrivez votre besoin en quelques mots…" rows={5}/>

                  <button type="submit"
                    disabled={status === 'sending'}
                    className="mk2-btn mk2-btn-primary"
                    style={{ padding:'14px 24px', justifyContent:'center', fontSize:14 }}>
                    {status === 'sending'
                      ? <><span style={{ display:'inline-block', width:14, height:14, border:'2px solid rgba(246,241,234,.3)', borderTopColor:'var(--mk2-text-dark)', borderRadius:'50%', animation:'mk2-spin .7s linear infinite' }}/> Envoi en cours…</>
                      : <>Envoyer le message <Mk2Arrow size={14}/></>
                    }
                  </button>

                  {status === 'error' && (
                    <p style={{ fontSize:13, color:'var(--mk2-ember)', textAlign:'center' }}>
                      Une erreur est survenue. Écrivez-nous directement à <a href="mailto:contact@miikaa.io" style={{ color:'var(--mk2-ember)' }}>contact@miikaa.io</a>.
                    </p>
                  )}

                  <p style={{ fontSize:11, color:'var(--mk2-muted)', lineHeight:1.6 }}>
                    Vos données sont traitées conformément à notre politique de confidentialité et ne sont jamais revendues.
                  </p>
                </form>
              )}

              {/* Contact direct */}
              <div style={{
                marginTop:28, padding:'20px 22px',
                border:'1px solid var(--mk2-hair)',
                borderRadius:'var(--mk2-r-md)',
                display:'flex', alignItems:'center', gap:14,
                background:'var(--mk2-paper)',
              }}>
                <div style={{ flexShrink:0 }}>
                  <img src="assets/portrait-lionel.jpg" alt="Lionel" style={{ width:44, height:44, borderRadius:'50%', objectFit:'cover', display:'block' }}/>
                </div>
                <div>
                  <div style={{ fontSize:13, fontWeight:600, color:'var(--mk2-text)' }}>
                    Une question avant de réserver ?
                  </div>
                  <a href="mailto:contact@miikaa.io" style={{ fontSize:13, color:'var(--mk2-ember)', textDecoration:'none' }}>
                    contact@miikaa.io
                  </a>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      <style>{`
        @keyframes mk2-spin {
          to { transform: rotate(360deg); }
        }
      `}</style>
    </main>
  );
}

window.Mk2PageContact = Mk2PageContact;