// SignUp — Pantalla de creación de cuenta (UI). Perfil profesional + CynamonSup.
// Métodos: Google · Correo electrónico propio · iCloud (Apple).
// Al continuar, envía al usuario a la página de Términos y Condiciones para aceptar.

const { useState: suS } = React;

// Glifos de proveedores
const GoogleGlyph = () => (
  <svg width="20" height="20" viewBox="0 0 48 48" aria-hidden="true">
    <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.6 2.4 30.2 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.3 17.7 9.5 24 9.5z"/>
    <path fill="#4285F4" d="M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.1 5.3-4.6 6.9l7.1 5.5C43.4 37.5 46.1 31.6 46.1 24.5z"/>
    <path fill="#FBBC05" d="M10.5 28.3c-.5-1.4-.8-2.9-.8-4.3s.3-3 .8-4.3l-7.9-6.1C1 16.7 0 20.2 0 24s1 7.3 2.6 10.4l7.9-6.1z"/>
    <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.1-5.5c-2 1.3-4.6 2.1-8.8 2.1-6.3 0-11.6-3.8-13.5-9.3l-7.9 6.1C6.5 42.6 14.6 48 24 48z"/>
  </svg>
);
const AppleGlyph = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M16.4 12.7c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9s-1.8-.8-3-.8c-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.8 1.1 9 .7 1.1 1.6 2.3 2.7 2.2 1.1 0 1.5-.7 2.8-.7s1.7.7 2.8.7c1.2 0 1.9-1.1 2.6-2.1.8-1.2 1.2-2.3 1.2-2.4-.1 0-2.3-.9-2.3-3.5zM14.3 5.2c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.6.6-1.1 1.6-.9 2.6 1 0 2-.5 2.6-1.2z"/>
  </svg>
);
const MailGlyph2 = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.85" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg>
);

const SIGNUP_BENEFITS = [
  { t: 'Tu perfil profesional', d: 'Nombre, especialidad y preferencias en un solo lugar.' },
  { t: 'Configura tus calculadoras', d: 'Deja a la mano las escalas y fórmulas que más usas.' },
  { t: 'Ordena tus diagnósticos', d: 'Tus relaciones y planes de cuidado, listos para reutilizar.' },
  { t: 'Sincroniza tus dispositivos', d: 'Continúa tu trabajo desde la web, Android o iOS.' },
];

const SignUp = ({ setView, onContinue }) => {
  const [method, setMethod] = suS(null);   // 'google' | 'apple' | 'email'
  const [form, setForm] = suS({ nombre: '', email: '', pass: '' });
  const [error, setError] = suS('');

  const emailOk = /\S+@\S+\.\S+/.test(form.email);
  const ready = method === 'google' || method === 'apple' ||
    (method === 'email' && form.nombre.trim() && emailOk && form.pass.length >= 6);

  const handleContinue = () => {
    if (!ready) {
      setError('Completa los datos para continuar.');
      return;
    }
    setError('');
    onContinue?.({
      method,
      email: method === 'email' ? form.email : (method === 'google' ? 'cuenta de Google' : 'cuenta de iCloud'),
      nombre: form.nombre,
    });
  };

  return (
    <main className="auth-page fade-in" data-screen-label="Cuenta — Crear cuenta">
      <div className="container auth-layout">
        {/* Panel de bienvenida / beneficios */}
        <aside className="auth-aside">
          <div className="auth-aside-eyebrow">CynamonSup · Perfil profesional</div>
          <h1 className="auth-aside-title">Crea tu cuenta de <em>Cynamonurs</em>.</h1>
          <p className="auth-aside-lead">
            Tu perfil profesional con la suscripción de CynamonSup: arma tu propio perfil, configura tus calculadoras
            y tus diagnósticos, y sincroniza todos tus dispositivos.
          </p>
          <ul className="auth-benefits">
            {SIGNUP_BENEFITS.map((b, i) => (
              <li key={i}>
                <span className="auth-benefit-check">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                </span>
                <div>
                  <div className="auth-benefit-t">{b.t}</div>
                  <div className="auth-benefit-d">{b.d}</div>
                </div>
              </li>
            ))}
          </ul>
        </aside>

        {/* Tarjeta de registro */}
        <div className="auth-card">
          <button className="auth-back" onClick={() => { setView('landing'); window.scrollTo({ top: 0 }); }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
            Volver
          </button>

          <h2 className="auth-title">Crear cuenta</h2>
          <p className="auth-sub">Elige cómo quieres crear tu perfil profesional.</p>

          <div className="auth-methods">
            <button className={'auth-method ' + (method === 'google' ? 'on' : '')} onClick={() => { setMethod('google'); setError(''); }}>
              <GoogleGlyph/>
              <span>Continuar con Google</span>
              {method === 'google' && <span className="auth-method-tick">✓</span>}
            </button>
            <button className={'auth-method ' + (method === 'apple' ? 'on' : '')} onClick={() => { setMethod('apple'); setError(''); }}>
              <AppleGlyph/>
              <span>Continuar con iCloud (Apple)</span>
              {method === 'apple' && <span className="auth-method-tick">✓</span>}
            </button>
            <button className={'auth-method ' + (method === 'email' ? 'on' : '')} onClick={() => { setMethod('email'); setError(''); }}>
              <MailGlyph2/>
              <span>Usar mi correo electrónico</span>
              {method === 'email' && <span className="auth-method-tick">✓</span>}
            </button>
          </div>

          {method === 'email' && (
            <div className="auth-form fade-in">
              <div className="auth-field">
                <label>Nombre completo</label>
                <input type="text" placeholder="Salvador Canela" value={form.nombre} onChange={e => setForm(f => ({ ...f, nombre: e.target.value }))}/>
              </div>
              <div className="auth-field">
                <label>Correo electrónico</label>
                <input type="email" placeholder="tucorreo@ejemplo.com" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))}/>
              </div>
              <div className="auth-field">
                <label>Contraseña</label>
                <input type="password" placeholder="Mínimo 6 caracteres" value={form.pass} onChange={e => setForm(f => ({ ...f, pass: e.target.value }))}/>
              </div>
            </div>
          )}

          <div className="auth-terms-note">
            Para crear tu cuenta deberás <strong>leer y aceptar</strong> nuestros Términos y Condiciones.
            Te llevaremos a ellos en el siguiente paso, donde podrás elegir <em>Acepto</em> o <em>No acepto</em>.
            <button className="auth-terms-link" onClick={() => setView('legal')}>Leer ahora los Términos y Condiciones</button>
          </div>

          {error && <div className="auth-error">{error}</div>}

          <button className="btn-primary auth-submit" onClick={handleContinue} disabled={!ready} style={{ opacity: ready ? 1 : 0.55, cursor: ready ? 'pointer' : 'not-allowed' }}>
            Continuar a los Términos y Condiciones
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>

          <div className="auth-foot">¿Ya tienes cuenta? <button className="auth-terms-link" onClick={() => { setView('login'); window.scrollTo({ top: 0 }); }}>Iniciar sesión</button></div>
        </div>
      </div>
    </main>
  );
};

Object.assign(window, { SignUp });