// Klyvio — Onboarding (dark theme Klyvio)
// v4 : ajout du champ email (requis pour l'accès client au rapport)

function Onboarding({ onContinue, onBack, company, setCompany }) {
  const [step, setStep] = useState(0);

  const update = (patch) => setCompany({ ...company, ...patch });

  const emailValid = company.email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(company.email);

  const canNext =
    step === 0
      ? company.name && company.name.length > 1 &&
        company.person && company.person.length > 1 &&
        emailValid
      : step === 1 ? !!company.role : true;

  const totalSteps = 2;
  const roles = [
    { id: "ceo",   label: "Dirigeant·e / fondateur·rice" },
    { id: "cfo",   label: "Direction financière / administrative" },
    { id: "coo",   label: "Direction opérationnelle" },
    { id: "cto",   label: "Responsable IT / numérique" },
    { id: "rh",    label: "Direction RH" },
    { id: "other", label: "Autre rôle" },
  ];

  return (
    <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1.2fr 1fr", minHeight: "calc(100vh - 60px)" }}>

      {/* Gauche — formulaire */}
      <div style={{ padding: "56px 80px", display: "flex", flexDirection: "column", background: "var(--bg)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 40 }}>
          <button className="btn btn-ghost btn-sm" onClick={step === 0 ? onBack : () => setStep(step - 1)}>
            <Icon name="arrowLeft" size={13} /> Retour
          </button>
          <div className="mono" style={{ fontSize: 12, color: "var(--text-mute)" }}>
            Étape {step + 1} / {totalSteps}
          </div>
          <div className="progress" style={{ flex: 1, maxWidth: 200 }}>
            <span style={{ width: `${((step + 1) / totalSteps) * 100}%` }} />
          </div>
        </div>

        <div className="fade-in" key={step} style={{ flex: 1, display: "flex", flexDirection: "column", maxWidth: 560 }}>
          {step === 0 && (
            <>
              <div className="eyebrow-line" style={{ marginBottom: 16 }}>Avant de commencer</div>
              <h1 className="display" style={{ fontSize: 48, margin: "0 0 14px", color: "var(--white)" }}>
                Faisons connaissance.
              </h1>
              <p style={{ fontSize: 15, color: "var(--gray)", marginBottom: 40, lineHeight: 1.6 }}>
                Trois informations rapides — le reste est dans l'audit. Comptez environ 35 minutes au total.
              </p>

              <div className="field" style={{ marginBottom: 20 }}>
                <label>Nom de l'entreprise</label>
                <input className="input" placeholder="Nom de votre entreprise"
                  value={company.name || ""}
                  onChange={e => update({ name: e.target.value })} />
              </div>

              <div className="field" style={{ marginBottom: 20 }}>
                <label>Votre prénom &amp; nom</label>
                <input className="input" placeholder="Votre prénom et nom"
                  value={company.person || ""}
                  onChange={e => update({ person: e.target.value })} />
              </div>

              <div className="field">
                <label>Votre email professionnel</label>
                <input
                  className="input"
                  type="email"
                  placeholder="votre@email-professionnel.fr"
                  value={company.email || ""}
                  onChange={e => update({ email: e.target.value })}
                />
                <div style={{ fontSize: 12, color: "var(--text-mute)", marginTop: 6, display: "flex", alignItems: "center", gap: 6 }}>
                  <Icon name="lock" size={11} color="var(--accent)" />
                  Utilisé uniquement pour retrouver votre rapport — jamais partagé.
                </div>
              </div>
            </>
          )}

          {step === 1 && (
            <>
              <div className="eyebrow-line" style={{ marginBottom: 16 }}>Votre rôle</div>
              <h1 className="display" style={{ fontSize: 48, margin: "0 0 14px", color: "var(--white)" }}>
                Quelle est votre fonction ?
              </h1>
              <p style={{ fontSize: 15, color: "var(--gray)", marginBottom: 32, lineHeight: 1.6 }}>
                Cela nous permet d'adapter le ton et le niveau de détail des recommandations.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {roles.map(r => {
                  const active = company.role === r.id;
                  return (
                    <button key={r.id}
                      onClick={() => update({ role: r.id, roleLabel: r.label })}
                      style={{
                        display: "flex", alignItems: "center",
                        padding: "15px 18px",
                        border: active ? "1.5px solid var(--accent)" : "1px solid var(--gray-dim)",
                        background: active ? "var(--accent-dim)" : "rgba(255,255,255,0.02)",
                        color: active ? "var(--white)" : "var(--gray)",
                        borderRadius: 12, cursor: "pointer",
                        textAlign: "left",
                        fontSize: 14, fontWeight: 500,
                        transition: "all .15s ease",
                      }}
                      onMouseEnter={e => { if (!active) { e.currentTarget.style.borderColor = "var(--border-hover)"; e.currentTarget.style.color = "var(--white)"; }}}
                      onMouseLeave={e => { if (!active) { e.currentTarget.style.borderColor = "var(--gray-dim)"; e.currentTarget.style.color = "var(--gray)"; }}}
                    >
                      {r.label}
                      {active && <Icon name="check" size={14} color="var(--accent)" style={{ marginLeft: "auto" }} />}
                    </button>
                  );
                })}
              </div>
            </>
          )}
        </div>

        <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
          <button
            className="btn btn-primary btn-lg"
            disabled={!canNext}
            style={{ opacity: canNext ? 1 : 0.35, cursor: canNext ? "pointer" : "not-allowed" }}
            onClick={() => step < totalSteps - 1 ? setStep(step + 1) : onContinue()}
          >
            {step < totalSteps - 1 ? "Continuer" : "Démarrer l'audit"}
            <Icon name="arrowRight" size={14} />
          </button>
        </div>
      </div>

      {/* Droite — réassurance */}
      <div style={{
        background: "var(--bg2)",
        borderLeft: "1px solid var(--border)",
        padding: "56px 48px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        position: "relative",
        overflow: "hidden",
      }}>

        <Logo size={52} dark />

        <div style={{ position: "relative", zIndex: 1 }}>
          <div className="eyebrow-line" style={{ marginBottom: 20 }}>
            Ce que vous recevrez
          </div>
          <h2 className="display" style={{ fontSize: 38, margin: "0 0 32px", color: "var(--white)", lineHeight: 1.05 }}>
            Un rapport qui vaut<br />
            celui d'un cabinet.
          </h2>

          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {[
              { icon: "target",   title: "Score de maturité sur 100", desc: "7 dimensions notées, forces et faiblesses visibles en un coup d'œil." },
              { icon: "euro",     title: "ROI chiffré à 12 mois",     desc: "Heures économisées et gains nets, calculés sur votre masse salariale." },
              { icon: "workflow", title: "Roadmap prioritisée",       desc: "Quick wins, projets 3–6–12 mois, avec effort/impact pour chacun." },
              { icon: "barChart", title: "Benchmark sectoriel",       desc: "Votre position vs les entreprises comparables de votre secteur." },
            ].map((b, i) => (
              <div key={i} style={{ display: "flex", gap: 14 }}>
                <div style={{
                  width: 36, height: 36, flexShrink: 0,
                  borderRadius: 10,
                  background: "var(--accent-dim)",
                  border: "1px solid var(--border)",
                  color: "var(--accent)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <Icon name={b.icon} size={16} />
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 3, color: "var(--white)" }}>{b.title}</div>
                  <div style={{ fontSize: 13, color: "var(--gray)", lineHeight: 1.5 }}>{b.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Bloc confidentialité */}
        <div style={{
          position: "relative", zIndex: 1,
          padding: "14px 16px",
          borderRadius: 10,
          background: "rgba(0,174,239,0.05)",
          border: "1px solid var(--border)",
          fontSize: 13, color: "var(--gray)",
          display: "flex", gap: 12, alignItems: "center",
        }}>
          <Icon name="lock" size={15} color="var(--accent)" style={{ flexShrink: 0 }} />
          <div style={{ lineHeight: 1.5 }}>
            Vos réponses sont chiffrées et ne sont jamais partagées. Vous pouvez exporter
            ou supprimer votre rapport à tout moment.
          </div>
        </div>
      </div>
    </div>
  );
}

window.Onboarding = Onboarding;