/**
 * mypro.ch · go — Wizard d'onboarding (4 étapes)
 *  1. Identifiant + nom de la centrale (check live de l'unicité)
 *  2. Société (raison sociale, IDE, adresse, canton)
 *  3. Directeur (nom, email, téléphone, plan)
 *  4. Récapitulatif → POST /signup/create → écran succès
 */
const { useState, useEffect, useRef, useCallback, useMemo } = React;
const cfg = window.MyProConfig;
const api = window.MyProApi;

/* ─── Configuration par pays ─────────────────────────────────────── */
const COUNTRIES = {
    CH: {
        code: 'CH', flag: '🇨🇭', label: 'Suisse',
        currency: 'CHF',
        phone: {
            prefix: '+41', placeholder: '+41 78 123 45 67',
            // Normalisation : remplace 0 initial par +41 et ne garde que des chiffres+espaces
            pattern: /^\+41\s?[0-9]{2}\s?[0-9]{3}\s?[0-9]{2}\s?[0-9]{2}$/,
            help: 'Format +41 XX XXX XX XX',
        },
        region: {
            label: 'Canton',
            options: ['GE','VD','VS','NE','FR','JU','BE','SO','BL','BS','AG','ZH','SH','TG','AR','AI','SG','GL','SZ','NW','OW','UR','TI','GR','LU','ZG'],
        },
        company_number: {
            label: 'Numéro IDE',
            placeholder: 'CHE-123.456.789',
            pattern: /^CHE-[0-9]{3}\.[0-9]{3}\.[0-9]{3}$/i,
            help: 'Format CHE-XXX.XXX.XXX',
        },
        plans: [
            { id: 'starter',    label: 'Starter',    price: 'CHF 99',   hint: 'Jusqu’à 5 chauffeurs' },
            { id: 'pro',        label: 'Pro',        price: 'CHF 249',  hint: 'Jusqu’à 20 chauffeurs', popular: true },
            { id: 'enterprise', label: 'Entreprise', price: 'Sur devis', hint: 'Illimité, multi-centrales' },
        ],
    },
    FR: {
        code: 'FR', flag: '🇫🇷', label: 'France',
        currency: 'EUR',
        phone: {
            prefix: '+33', placeholder: '+33 6 12 34 56 78',
            pattern: /^\+33\s?[1-9](\s?[0-9]{2}){4}$/,
            help: 'Format +33 X XX XX XX XX',
        },
        region: {
            label: 'Région',
            options: [
                'Auvergne-Rhône-Alpes', 'Bourgogne-Franche-Comté', 'Bretagne',
                'Centre-Val de Loire', 'Corse', 'Grand Est', 'Hauts-de-France',
                'Île-de-France', 'Normandie', 'Nouvelle-Aquitaine', 'Occitanie',
                'Pays de la Loire', 'Provence-Alpes-Côte d\'Azur',
                'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte',
            ],
        },
        company_number: {
            label: 'Numéro SIRET',
            placeholder: '123 456 789 00012',
            pattern: /^[0-9\s]{14,17}$/,
            help: '14 chiffres',
        },
        plans: [
            { id: 'starter',    label: 'Starter',    price: '€ 95',    hint: 'Jusqu’à 5 chauffeurs' },
            { id: 'pro',        label: 'Pro',        price: '€ 240',   hint: 'Jusqu’à 20 chauffeurs', popular: true },
            { id: 'enterprise', label: 'Entreprise', price: 'Sur devis', hint: 'Illimité, multi-centrales' },
        ],
    },
};

/* Normalise un n° de tel saisi en local (0X…) vers format international */
function normalizePhone(input, countryCode) {
    if (!input) return '';
    let v = input.replace(/[^\d+]/g, '');
    if (v.startsWith('00')) v = '+' + v.slice(2);
    if (countryCode === 'CH') {
        if (v.startsWith('0') && !v.startsWith('+')) v = '+41' + v.slice(1);
        if (/^[1-9]/.test(v)) v = '+41' + v;
    } else if (countryCode === 'FR') {
        if (v.startsWith('0') && !v.startsWith('+')) v = '+33' + v.slice(1);
        if (/^[1-9]/.test(v)) v = '+33' + v;
    }
    // Reformatage léger : groupes de 2 après l'indicatif (CH/FR)
    if (countryCode === 'CH' && /^\+41/.test(v)) {
        const d = v.slice(3);
        return ('+41 ' + d.replace(/(\d{2})(\d{3})(\d{2})(\d{2}).*/, '$1 $2 $3 $4')).trim();
    }
    if (countryCode === 'FR' && /^\+33/.test(v)) {
        const d = v.slice(3);
        return ('+33 ' + d.replace(/(\d{1})(\d{2})(\d{2})(\d{2})(\d{2}).*/, '$1 $2 $3 $4 $5')).trim();
    }
    return v;
}

const initialPlan = (() => {
    const p = new URLSearchParams(window.location.search).get('plan');
    return ['starter','pro','enterprise'].includes(p) ? p : 'pro';
})();

/* ─────────────────────────────────────────────────────────────────────
   Stepper
   ─────────────────────────────────────────────────────────────────── */
function Stepper({ step }) {
    const labels = ['Centrale', 'Société', 'Directeur', 'Confirmation'];
    return (
        <div className="flex items-center gap-2 flex-wrap">
            {labels.map((l, i) => {
                const idx = i + 1;
                const cls = idx === step ? 'active' : (idx < step ? 'done' : '');
                return (
                    <div key={i} className={`step-pill ${cls}`}>
                        <span className="num">{idx < step ? <i className="fa-solid fa-check text-[10px]"></i> : idx}</span>
                        <span className="hidden sm:inline">{l}</span>
                    </div>
                );
            })}
        </div>
    );
}

/* ─────────────────────────────────────────────────────────────────────
   Étape 1 : centrale + key
   ─────────────────────────────────────────────────────────────────── */
function StepCentral({ data, setData, onNext }) {
    const [keyStatus, setKeyStatus] = useState({ state: 'idle' });
    const debounceRef = useRef(null);
    const country = COUNTRIES[data.country] || COUNTRIES.CH;

    const checkKey = useCallback(async (raw) => {
        setKeyStatus({ state: 'checking' });
        try {
            const r = await api.checkKey(raw);
            if (r.available) setKeyStatus({ state: 'ok' });
            else setKeyStatus({ state: 'taken', message: r.message, suggestions: r.suggestions });
        } catch (e) {
            setKeyStatus({ state: 'error', message: e.message });
        }
    }, []);

    const onKeyChange = (raw) => {
        const norm = raw.toLowerCase().replace(/[^a-z0-9-]/g, '');
        setData({ ...data, key: norm });
        if (debounceRef.current) clearTimeout(debounceRef.current);
        if (!norm || norm.length < 3) {
            setKeyStatus({ state: 'idle' });
            return;
        }
        debounceRef.current = setTimeout(() => checkKey(norm), 400);
    };

    const useSuggestion = (s) => {
        setData({ ...data, key: s });
        checkKey(s);
    };

    const valid = data.label.trim().length >= 2 && keyStatus.state === 'ok' && !!data.country;

    return (
        <div className="space-y-5 fade-up">
            <div>
                <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Pays *</label>
                <div className="grid grid-cols-2 gap-3">
                    {Object.values(COUNTRIES).map(c => (
                        <button key={c.code}
                                onClick={() => setData({ ...data, country: c.code, region: '', contact_phone: '' })}
                                className={`plan-card flex items-center gap-3 ${data.country === c.code ? 'selected' : ''}`}>
                            <span className="text-3xl">{c.flag}</span>
                            <div>
                                <div className="font-bold text-ink-900">{c.label}</div>
                                <div className="text-xs text-ink-500">Devise : {c.currency}</div>
                            </div>
                        </button>
                    ))}
                </div>
            </div>

            <div>
                <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Nom de votre centrale *</label>
                <input className="go-input" placeholder={data.country === 'FR' ? 'Ex : Paris Taxi VTC' : 'Ex : Genève Taxi VTC'}
                       value={data.label}
                       onChange={(e) => setData({ ...data, label: e.target.value })} />
            </div>

            <div>
                <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Identifiant unique *</label>
                <div className="relative">
                    <input className={`go-input pr-32 font-mono ${keyStatus.state === 'taken' || keyStatus.state === 'error' ? 'err' : keyStatus.state === 'ok' ? 'ok' : ''}`}
                           placeholder="geneva-taxi"
                           value={data.key}
                           onChange={(e) => onKeyChange(e.target.value)} />
                    <span className="key-status">
                        {keyStatus.state === 'checking' && <span className="spinner text-ink-400"></span>}
                        {keyStatus.state === 'ok' && <i className="fa-solid fa-check text-green-600"></i>}
                        {keyStatus.state === 'taken' && <i className="fa-solid fa-xmark text-red-500"></i>}
                    </span>
                </div>
                <div className="mt-2 text-xs text-ink-500 flex items-center gap-1.5 flex-wrap">
                    <i className="fa-solid fa-globe text-ink-400"></i>
                    Votre site sera : <span className="font-mono text-ink-700">{data.key || 'xxx'}.app.mypro.ch</span>
                </div>
                {keyStatus.state === 'taken' && (
                    <div className="mt-3 text-sm text-red-600">
                        {keyStatus.message || 'Cet identifiant est déjà pris.'}
                        {keyStatus.suggestions?.length > 0 && (
                            <div className="mt-2 flex gap-2 flex-wrap">
                                {keyStatus.suggestions.map(s => (
                                    <button key={s} onClick={() => useSuggestion(s)}
                                            className="px-3 py-1 bg-amber-100 text-amber-800 rounded-lg text-xs font-mono hover:bg-amber-200">
                                        {s}
                                    </button>
                                ))}
                            </div>
                        )}
                    </div>
                )}
            </div>

            <button className="go-btn go-btn-primary w-full" disabled={!valid} onClick={onNext}>
                Continuer <i className="fa-solid fa-arrow-right text-xs"></i>
            </button>
        </div>
    );
}

/* ─────────────────────────────────────────────────────────────────────
   Étape 2 : société
   ─────────────────────────────────────────────────────────────────── */
function StepCompany({ data, setData, onBack, onNext }) {
    const upd = (k, v) => setData({ ...data, [k]: v });
    const country = COUNTRIES[data.country] || COUNTRIES.CH;

    const companyNumberOk = !data.company_number || country.company_number.pattern.test(data.company_number);
    const valid = data.company.trim().length >= 2 && companyNumberOk;

    const exampleCompany = data.country === 'FR' ? 'Ex : Paris Taxi SAS' : 'Ex : Geneva Taxi SA';
    const exampleName    = data.country === 'FR' ? 'Ex : Paris Taxi'     : 'Ex : Geneva Taxi';

    return (
        <div className="space-y-5 fade-up">
            <div className="text-xs text-ink-500 flex items-center gap-1.5">
                <span>{country.flag}</span> Vous créez une centrale en <strong className="text-ink-900">{country.label}</strong>.
            </div>

            <div className="grid sm:grid-cols-2 gap-3">
                <div className="sm:col-span-2">
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Raison sociale *</label>
                    <input className="go-input" placeholder={exampleCompany}
                           value={data.company} onChange={(e) => upd('company', e.target.value)} />
                </div>
                <div className="sm:col-span-2">
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Nom commercial</label>
                    <input className="go-input" placeholder={exampleName}
                           value={data.company_name} onChange={(e) => upd('company_name', e.target.value)} />
                </div>
                <div>
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">{country.company_number.label}</label>
                    <input className={`go-input font-mono ${data.company_number && !companyNumberOk ? 'err' : ''}`}
                           placeholder={country.company_number.placeholder}
                           value={data.company_number} onChange={(e) => upd('company_number', e.target.value)} />
                    <div className={`text-xs mt-1 ${data.company_number && !companyNumberOk ? 'text-red-600' : 'text-ink-400'}`}>
                        {country.company_number.help}
                    </div>
                </div>
                <div>
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">{country.region.label}</label>
                    <select className="go-input" value={data.region} onChange={(e) => upd('region', e.target.value)}>
                        <option value="">—</option>
                        {country.region.options.map(r => <option key={r} value={r}>{r}</option>)}
                    </select>
                </div>
                <div className="sm:col-span-2">
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Adresse</label>
                    <input className="go-input" placeholder="Rue, n°, code postal, ville"
                           value={data.address} onChange={(e) => upd('address', e.target.value)} />
                </div>
            </div>

            <div className="flex gap-3 pt-2">
                <button className="go-btn go-btn-ghost" onClick={onBack}>
                    <i className="fa-solid fa-arrow-left text-xs"></i> Retour
                </button>
                <button className="go-btn go-btn-primary flex-1" disabled={!valid} onClick={onNext}>
                    Continuer <i className="fa-solid fa-arrow-right text-xs"></i>
                </button>
            </div>
        </div>
    );
}

/* ─────────────────────────────────────────────────────────────────────
   Étape 3 : directeur + plan
   ─────────────────────────────────────────────────────────────────── */
function StepContact({ data, setData, onBack, onNext }) {
    const upd = (k, v) => setData({ ...data, [k]: v });
    const country = COUNTRIES[data.country] || COUNTRIES.CH;

    const phoneOk = !data.contact_phone || country.phone.pattern.test(data.contact_phone);
    const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.contact_email);
    const valid = data.contact_name.trim().length >= 2 && emailOk && phoneOk;

    const onPhoneChange = (raw) => {
        const norm = normalizePhone(raw, data.country);
        upd('contact_phone', norm);
    };

    const emailExample = data.country === 'FR' ? 'vous@centrale.fr' : 'vous@centrale.ch';

    return (
        <div className="space-y-5 fade-up">
            <div className="grid sm:grid-cols-2 gap-3">
                <div className="sm:col-span-2">
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Nom complet *</label>
                    <input className="go-input" placeholder="Prénom Nom"
                           value={data.contact_name} onChange={(e) => upd('contact_name', e.target.value)} />
                </div>
                <div>
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Email pro *</label>
                    <input type="email" className={`go-input ${data.contact_email && !emailOk ? 'err' : ''}`}
                           placeholder={emailExample}
                           value={data.contact_email} onChange={(e) => upd('contact_email', e.target.value)} />
                </div>
                <div>
                    <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">
                        Téléphone <span className="text-ink-400 normal-case font-normal">({country.flag} {country.phone.prefix})</span>
                    </label>
                    <input type="tel" className={`go-input ${data.contact_phone && !phoneOk ? 'err' : ''}`}
                           placeholder={country.phone.placeholder}
                           value={data.contact_phone}
                           onChange={(e) => onPhoneChange(e.target.value)} />
                    <div className={`text-xs mt-1 ${data.contact_phone && !phoneOk ? 'text-red-600' : 'text-ink-400'}`}>
                        {country.phone.help}
                    </div>
                </div>
            </div>

            <div>
                <div className="text-xs font-semibold text-ink-700 uppercase tracking-wide mb-2">Choisissez votre plan</div>
                <div className="grid sm:grid-cols-3 gap-3">
                    {country.plans.map(p => (
                        <button key={p.id}
                                onClick={() => upd('plan', p.id)}
                                className={`plan-card relative ${data.plan === p.id ? 'selected' : ''}`}>
                            {p.popular && (
                                <span className="absolute -top-2 right-3 bg-amber-500 text-ink-900 text-[10px] font-bold uppercase px-2 py-0.5 rounded-full">Populaire</span>
                            )}
                            <div className="font-bold text-ink-900">{p.label}</div>
                            <div className="text-lg font-extrabold mt-1">{p.price}<span className="text-xs text-ink-500 font-normal"> / mois</span></div>
                            <div className="text-xs text-ink-500 mt-1">{p.hint}</div>
                        </button>
                    ))}
                </div>
                <p className="text-xs text-ink-400 mt-2"><i className="fa-solid fa-circle-info mr-1"></i>14 jours gratuits. Aucune carte bancaire à ce stade.</p>
            </div>

            <div className="flex gap-3 pt-2">
                <button className="go-btn go-btn-ghost" onClick={onBack}>
                    <i className="fa-solid fa-arrow-left text-xs"></i> Retour
                </button>
                <button className="go-btn go-btn-primary flex-1" disabled={!valid} onClick={onNext}>
                    Vérifier <i className="fa-solid fa-arrow-right text-xs"></i>
                </button>
            </div>
        </div>
    );
}

/* ─────────────────────────────────────────────────────────────────────
   Étape 4 : récap & création
   ─────────────────────────────────────────────────────────────────── */
function StepConfirm({ data, onBack, onSubmit, submitting, error }) {
    const Row = ({ label, value }) => (
        <div className="flex items-start justify-between py-2.5 border-b border-ink-100 last:border-0 text-sm">
            <div className="text-ink-500">{label}</div>
            <div className="font-medium text-ink-900 text-right max-w-[60%] break-words">{value || '—'}</div>
        </div>
    );
    const country = COUNTRIES[data.country] || COUNTRIES.CH;
    const planLabel = country.plans.find(p => p.id === data.plan)?.label || data.plan;

    return (
        <div className="space-y-5 fade-up">
            <div className="bg-white rounded-2xl border border-ink-200 p-5">
                <div className="text-xs font-semibold text-ink-500 uppercase mb-1">Centrale</div>
                <Row label="Pays" value={<span>{country.flag} {country.label}</span>} />
                <Row label="Nom" value={data.label} />
                <Row label="Identifiant" value={<span className="font-mono">{data.key}.app.mypro.ch</span>} />
            </div>
            <div className="bg-white rounded-2xl border border-ink-200 p-5">
                <div className="text-xs font-semibold text-ink-500 uppercase mb-1">Société</div>
                <Row label="Raison sociale" value={data.company} />
                <Row label="Nom commercial" value={data.company_name} />
                <Row label={country.company_number.label} value={data.company_number} />
                <Row label={country.region.label} value={data.region} />
                <Row label="Adresse" value={data.address} />
            </div>
            <div className="bg-white rounded-2xl border border-ink-200 p-5">
                <div className="text-xs font-semibold text-ink-500 uppercase mb-1">Directeur & plan</div>
                <Row label="Nom" value={data.contact_name} />
                <Row label="Email" value={data.contact_email} />
                <Row label="Téléphone" value={data.contact_phone} />
                <Row label="Plan" value={planLabel} />
            </div>

            {error && (
                <div className="bg-red-50 border border-red-200 text-red-700 rounded-xl p-3 text-sm">
                    <i className="fa-solid fa-triangle-exclamation mr-2"></i>{error}
                </div>
            )}

            <div className="text-xs text-ink-500">
                En cliquant sur "Créer ma centrale", vous acceptez nos <a href="https://mypro.ch/mentions.html" target="_blank" className="text-ink-900 underline">conditions</a> et notre <a href="https://mypro.ch/confidentialite.html" target="_blank" className="text-ink-900 underline">politique de confidentialité</a>.
            </div>

            <div className="flex gap-3 pt-2">
                <button className="go-btn go-btn-ghost" onClick={onBack} disabled={submitting}>
                    <i className="fa-solid fa-arrow-left text-xs"></i> Retour
                </button>
                <button className="go-btn go-btn-accent flex-1" disabled={submitting} onClick={onSubmit}>
                    {submitting ? <><span className="spinner"></span> Création en cours…</> : <><i className="fa-solid fa-rocket"></i> Créer ma centrale</>}
                </button>
            </div>
        </div>
    );
}

/* ─────────────────────────────────────────────────────────────────────
   Écran succès
   ─────────────────────────────────────────────────────────────────── */
function SuccessScreen({ result, email }) {
    return (
        <div className="text-center py-6 fade-up">
            <div className="w-20 h-20 rounded-full bg-green-100 text-green-600 flex items-center justify-center mx-auto mb-5">
                <i className="fa-solid fa-envelope-open-text text-3xl"></i>
            </div>
            <h2 className="text-2xl font-extrabold text-ink-900">Centrale créée !</h2>
            <p className="text-ink-500 mt-2">
                Un email de connexion vient d'être envoyé à <strong className="text-ink-900">{email}</strong>.<br/>
                Cliquez sur le lien pour accéder à votre manager.
            </p>

            <div className="bg-ink-50 rounded-2xl border border-ink-200 p-5 mt-6 text-left">
                <div className="text-xs font-semibold uppercase text-ink-500 mb-2">Vos accès</div>
                <div className="space-y-2 text-sm">
                    <div className="flex items-center gap-2">
                        <i className="fa-solid fa-gauge-high text-ink-400 w-4"></i>
                        <span className="text-ink-500">Manager :</span>
                        <a href={result.manager_url} className="font-mono text-ink-900 hover:underline">{result.manager_url.replace('https://', '')}</a>
                    </div>
                    <div className="flex items-center gap-2">
                        <i className="fa-solid fa-mobile-screen text-ink-400 w-4"></i>
                        <span className="text-ink-500">Site de résa :</span>
                        <a href={result.app_url} className="font-mono text-ink-900 hover:underline">{result.app_url.replace('https://', '')}</a>
                    </div>
                </div>
            </div>

            {!result.magic_sent && (
                <div className="mt-4 bg-amber-50 border border-amber-200 text-amber-800 rounded-xl p-3 text-sm">
                    <i className="fa-solid fa-triangle-exclamation mr-2"></i>
                    L'email n'a pas pu être envoyé. Connectez-vous directement sur <a href="https://manager.mypro.ch" className="font-semibold underline">manager.mypro.ch</a> avec votre email.
                </div>
            )}

            <p className="text-xs text-ink-400 mt-6">
                Pas reçu l'email ? Vérifiez vos spams, ou <a href="mailto:hello@mypro.ch" className="text-ink-700 underline">contactez-nous</a>.
            </p>
        </div>
    );
}

/* ─────────────────────────────────────────────────────────────────────
   App
   ─────────────────────────────────────────────────────────────────── */
function App() {
    const [step, setStep] = useState(1);
    const [data, setData] = useState({
        country: new URLSearchParams(window.location.search).get('country')?.toUpperCase() === 'FR' ? 'FR' : 'CH',
        label: '', key: '',
        company: '', company_name: '', company_number: '', region: '', address: '',
        contact_name: '', contact_email: '', contact_phone: '',
        plan: initialPlan,
    });
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState('');
    const [result, setResult] = useState(null);

    useEffect(() => {
        if (!data.company_name && data.label) {
            // pré-remplit company_name avec label si vide
        }
    }, [data.label]);

    const submit = async () => {
        setSubmitting(true); setError('');
        try {
            const r = await api.create(data);
            setResult(r);
        } catch (e) {
            setError(e.message || 'Erreur lors de la création');
        } finally {
            setSubmitting(false);
        }
    };

    const next = () => setStep(s => Math.min(s + 1, 4));
    const back = () => setStep(s => Math.max(s - 1, 1));

    return (
        <div className="min-h-screen bg-grid bg-ink-50">
            <header className="bg-white/80 backdrop-blur border-b border-ink-200 sticky top-0 z-20">
                <div className="max-w-3xl mx-auto px-4 py-3 flex items-center justify-between">
                    <a href={cfg.SITE_URL} className="flex items-center gap-2.5">
                        <div className="w-9 h-9 rounded-lg bg-ink-900 text-white flex items-center justify-center font-extrabold">M</div>
                        <div>
                            <div className="font-extrabold text-ink-900 leading-tight">mypro<span className="text-amber-500">.</span>ch</div>
                            <div className="text-[10px] uppercase tracking-wider text-ink-400 leading-tight">Onboarding</div>
                        </div>
                    </a>
                    <a href={cfg.MANAGER_URL} className="text-sm text-ink-500 hover:text-ink-900">Déjà un compte ?</a>
                </div>
            </header>

            <main className="max-w-3xl mx-auto px-4 py-8 sm:py-12">
                {!result && (
                    <>
                        <div className="text-center mb-8">
                            <h1 className="text-3xl sm:text-4xl font-extrabold text-ink-900">Créez votre centrale en 3 minutes.</h1>
                            <p className="text-ink-500 mt-2">14 jours gratuits, sans carte bancaire.</p>
                        </div>

                        <div className="mb-6 flex justify-center">
                            <Stepper step={step} />
                        </div>

                        <div className="bg-white rounded-2xl border border-ink-200 p-6 sm:p-8 shadow-sm">
                            {step === 1 && <StepCentral data={data} setData={setData} onNext={next} />}
                            {step === 2 && <StepCompany data={data} setData={setData} onBack={back} onNext={next} />}
                            {step === 3 && <StepContact data={data} setData={setData} onBack={back} onNext={next} />}
                            {step === 4 && <StepConfirm data={data} onBack={back} onSubmit={submit} submitting={submitting} error={error} />}
                        </div>

                        <p className="text-center text-xs text-ink-400 mt-6">
                            Une question ? <a href="https://mypro.ch/contact.html" className="text-ink-700 underline">Contactez-nous</a>
                        </p>
                    </>
                )}

                {result && (
                    <div className="bg-white rounded-2xl border border-ink-200 p-6 sm:p-8 shadow-sm">
                        <SuccessScreen result={result} email={data.contact_email} />
                    </div>
                )}
            </main>

            <footer className="border-t border-ink-200 bg-white mt-12">
                <div className="max-w-3xl mx-auto px-4 py-5 text-center text-xs text-ink-500">
                    © {new Date().getFullYear()} mypro.ch — Hébergé en Suisse
                </div>
            </footer>
        </div>
    );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);