// Trainin Center — Page « Financements » (/financements)
// Réutilise tc-system + NavBar/Footer (tc-sections).
// Ton prudent : aucune promesse de financement automatique.
// Sections : Hero · Solutions (encart vert + points) · Formulaire.

const isMobFi = (d) => d === 'mobile';

const FI_MERCI_URL = 'merci-contact.html';
const FI_ACTION = 'https://trainin-center.learnybox.com/form/6a4028343d620meoghjbmgk4k7bw6m3fzp/';
const FI_RGPD_NOTICE = "En indiquant votre adresse mail, vous acceptez de recevoir une réponse à votre demande ainsi que des informations de la part de Trainin Center. Vous pouvez vous désinscrire à tout moment via les liens de désinscription présents dans nos emails.";

const FI_FORMATIONS = [
  'Praticien·ne naturopathe',
  'Fréquences énergétiques',
  'Modules à la carte',
  'Je ne sais pas encore',
];

const FI_POINTS = [
  'Possibilités de paiement en plusieurs fois',
  'Accompagnement dans le choix de la formule adaptée',
  'Informations personnalisées selon votre situation',
  'Échange avec un membre de l\u2019équipe Trainin Center',
  'Objectif : démarrer votre formation dans les meilleurs délais',
];

// ── Champ de formulaire ─────────────────────────────────────
function FiField({ label, type = 'text', placeholder, textarea, options, defaultValue, name, id, required }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <label style={{ fontFamily: fontSans, fontSize: 12.5, fontWeight: 500, color: TC.ink2, letterSpacing: 0.1 }}>{label}</label>
      {textarea ? (
        <textarea name={name} id={id} placeholder={placeholder} defaultValue={defaultValue} rows={4} style={{
          padding: '14px 16px', background: TC.white,
          border: `1px solid ${TC.hairStrong}`, borderRadius: 14,
          fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none', resize: 'none',
        }} />
      ) : options ? (
        <select defaultValue="" style={{
          height: 50, padding: '0 16px', background: TC.white,
          border: `1px solid ${TC.hairStrong}`, borderRadius: 999,
          fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none',
          appearance: 'none', WebkitAppearance: 'none', cursor: 'pointer',
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23556' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")`,
          backgroundRepeat: 'no-repeat', backgroundPosition: 'right 18px center',
        }}>
          <option value="" disabled>{placeholder}</option>
          {options.map((o) => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} name={name} id={id} required={required} placeholder={placeholder} style={{
          height: 50, padding: '0 16px', background: TC.white,
          border: `1px solid ${TC.hairStrong}`, borderRadius: 999,
          fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none',
        }} />
      )}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function FiHero({ device }) {
  const m = isMobFi(device);
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }} data-screen-label="Financements · hero">
      <div style={{
        position: 'absolute', top: m ? -130 : -260, right: m ? -170 : -180,
        width: m ? 400 : 740, height: m ? 400 : 740, borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 65%)`,
        pointerEvents: 'none',
      }} />
      <div style={m
        ? { position: 'relative', padding: '44px 22px 36px' }
        : { position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: '48px 80px 40px' }}>
        <div style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: m ? 18 : 24 }}>
          <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>Financement</Eyebrow>
        </div>
        <h1 style={{
          fontFamily: fontSans, fontSize: m ? 38 : 60, fontWeight: 500,
          letterSpacing: m ? -1.3 : -2.1, lineHeight: m ? 1.08 : 1.05,
          margin: '0 0 22px', color: TC.ink, textWrap: 'balance',
        }}>
          Financement de{m ? ' ' : <br />}
          <span style={{
            fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
            color: TC.sageDeep, fontSize: m ? 42 : 68, letterSpacing: m ? -1.3 : -2,
          }}>votre formation.</span>
        </h1>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.6,
          color: TC.ink2, margin: '0 0 18px', maxWidth: 680, letterSpacing: -0.1,
        }}>
          Notre équipe vous accompagne pour trouver la solution de paiement la plus
          adaptée à votre projet de formation.
        </p>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 15 : 16.5, lineHeight: 1.65,
          color: TC.ink3, margin: 0, maxWidth: 680, letterSpacing: -0.05,
        }}>
          Plusieurs options de financement et facilités de paiement peuvent être
          disponibles selon votre situation, votre projet et la formation choisie.
          Chez Trainin Center, nous savons qu'un projet de formation représente un
          engagement important : notre équipe peut vous accompagner pour étudier les
          possibilités de paiement et vous orienter vers la formule la plus adaptée.
        </p>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// SOLUTIONS — encart vert + liste de points
// ════════════════════════════════════════════════════════════
function FiSolutions({ device }) {
  const m = isMobFi(device);
  return (
    <Section tone="off" padY={m ? [16, 56] : [24, 80]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '0.9fr 1.1fr',
        gap: m ? 22 : 40, alignItems: 'stretch',
        maxWidth: 1180, margin: '0 auto',
      }}>
        {/* Texte */}
        <div style={{
          background: TC.white, borderRadius: 24, border: `1px solid ${TC.hair}`,
          padding: m ? '26px 24px' : '40px 40px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 12px 40px rgba(26,31,28,0.04)',
        }}>
          <div style={{ marginBottom: 16 }}>
            <Eyebrow variant="sage" size="sm">Des solutions adaptées</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 24 : 30, fontWeight: 600,
            color: TC.ink, letterSpacing: -0.7, lineHeight: 1.18, margin: '0 0 14px', textWrap: 'balance',
          }}>Des solutions adaptées à votre projet</h2>
          <p style={{ fontFamily: fontSans, fontSize: m ? 15.5 : 16.5, lineHeight: 1.6, color: TC.ink2, margin: 0, letterSpacing: -0.05 }}>
            Nos élèves peuvent, selon les cas, bénéficier de facilités de paiement ou
            de solutions permettant de démarrer leur formation plus sereinement. Chaque
            situation étant différente, nous vous invitons à nous contacter afin
            d'obtenir une réponse personnalisée.
          </p>
        </div>

        {/* Encart vert profond — points */}
        <div style={{
          position: 'relative', overflow: 'hidden', borderRadius: 24,
          background: `linear-gradient(155deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
          padding: m ? '28px 24px' : '40px 38px',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ position: 'absolute', top: -90, right: -90, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 18 }}>
              Ce que nous étudions avec vous
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 13 : 14 }}>
              {FI_POINTS.map((p) => (
                <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <span style={{
                    marginTop: 1, flexShrink: 0, width: 24, height: 24, borderRadius: 12,
                    background: 'rgba(255,255,255,0.14)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="13" height="13" viewBox="0 0 18 18" fill="none">
                      <path d="M4 9.4l3 2.9 7-7.6" stroke={TC.white} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                  <span style={{ fontFamily: fontSans, fontSize: m ? 15 : 16, color: TC.white, letterSpacing: -0.1, lineHeight: 1.45 }}>{p}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FORMULAIRE — demande d'informations
// ════════════════════════════════════════════════════════════
function FiForm({ device }) {
  const m = isMobFi(device);
  return (
    <Section tone="white" padY={m ? [48, 64] : [56, 96]} padX={m ? 22 : 80}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: m ? 28 : 36 }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
            <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>Demande d'informations</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 24 : 32, fontWeight: 500,
            color: TC.ink, letterSpacing: -1, lineHeight: 1.15, margin: '0 0 14px', textWrap: 'balance',
          }}>Paiements &amp; financements</h2>
          <p style={{ fontFamily: fontSans, fontSize: m ? 15.5 : 16.5, lineHeight: 1.6, color: TC.ink2, margin: '0 auto', maxWidth: 560, letterSpacing: -0.05 }}>
            Remplissez le formulaire en précisant que vous souhaitez connaître les
            possibilités de paiement ou de financement. Un membre de l'équipe Trainin
            Center vous contactera pour vous donner tous les détails.
          </p>
        </div>

        <div
          style={{
            background: TC.off, borderRadius: 24, border: `1px solid ${TC.hair}`,
            padding: m ? '24px 22px' : '40px 44px',
            boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 18px 50px -24px rgba(26,31,28,0.16)',
            display: 'flex', flexDirection: 'column',
          }}>
          <iframe
            src="https://trainin-center.learnybox.com/formulaire-paiements-et-financements/"
            title="Formulaire Paiements et financements"
            frameBorder="0"
            width="100%"
            height={m ? 710 : 610}
            className="tc-learnybox-frame tc-learnybox-frame-financements"
          />
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function FinancementsPage({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <FiHero device={device} />
      <FiSolutions device={device} />
      <FiForm device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { FinancementsPage });