/* global React, Icon */

function SignupPage({ navigate }) {
  const [step, setStep] = React.useState('form');
  const [email, setEmail] = React.useState('');
  const [name, setName] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [agree, setAgree] = React.useState(false);

  const canSubmit = email && name && pw && agree;

  const submit = (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setStep('success');
  };

  return (
    <div className="signup-page">
      {step === 'form' && (
        <div className="signup-card fade-in">
          <div className="signup-card__head">
            <div className="em-eyebrow">Begin yours</div>
            <h1 className="signup-card__title">Start with <em>one</em> memory.</h1>
            <p className="signup-card__sub">Free for the first hour of recordings. No card needed. Cancel anytime.</p>
          </div>

          <form onSubmit={submit} noValidate>
            <div className="field">
              <label className="field__label" htmlFor="su-name">Your name</label>
              <input
                id="su-name"
                type="text"
                className="field__input"
                placeholder="Maya Aderonke"
                autoComplete="name"
                value={name}
                onChange={e => setName(e.target.value)}
              />
            </div>
            <div className="field">
              <label className="field__label" htmlFor="su-email">Email</label>
              <input
                id="su-email"
                type="email"
                className="field__input"
                placeholder="you@example.com"
                autoComplete="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
              />
            </div>
            <div className="field">
              <label className="field__label" htmlFor="su-pw">Choose a password</label>
              <input
                id="su-pw"
                type="password"
                className="field__input"
                placeholder="At least 10 characters"
                autoComplete="new-password"
                minLength={10}
                value={pw}
                onChange={e => setPw(e.target.value)}
              />
              <div className="field__hint">Used to encrypt your recordings on this device. Don't lose it — we can't recover it for you.</div>
            </div>

            <div className="checkbox-row">
              <input id="su-agree" type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)} />
              <label htmlFor="su-agree">
                I've read the <a href="/privacy/">privacy promise</a> and the <a href="/terms/">terms</a>. I understand my recordings are encrypted on my device and that Everlasting Memory cannot watch or recover them.
              </label>
            </div>

            <button
              type="submit"
              className="btn btn--gold btn--lg"
              style={{ width: '100%', justifyContent: 'center' }}
              disabled={!canSubmit}
            >Begin your first memory</button>
          </form>

          <div className="signup-card__divider">Or continue with</div>
          <div className="oauth">
            <button className="oauth__btn"><Icon name="google" size={16} /> Continue with Google</button>
            <button className="oauth__btn"><Icon name="apple" size={16} /> Continue with Apple</button>
            <button className="oauth__btn"><Icon name="mail" size={16} /> Email me a sign-in link</button>
          </div>

          <div className="signup-foot">
            Already have an account? <a href="/signin/" onClick={(e) => { e.preventDefault(); navigate('signin'); }}>Sign in</a>
          </div>
        </div>
      )}

      {step === 'success' && (
        <div className="signup-success fade-in">
          <img className="signup-success__flame" src="assets/flame-mark.svg" alt="Everlasting Memory flame" />
          <div className="em-eyebrow">Welcome</div>
          <h2>Take your time, {name.split(' ')[0] || 'friend'}.<br /><em>We'll be here when you're ready.</em></h2>
          <p>
            We've sent a quiet welcome email to <strong>{email}</strong>. When you open it,
            you'll find one small invitation: record your first memory. There's no rush.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn--gold btn--lg" onClick={() => navigate('home')}>Begin a memory</button>
            <button className="btn btn--outline-ink btn--lg" onClick={() => navigate('features')}>Look around first</button>
          </div>
        </div>
      )}
    </div>
  );
}

window.SignupPage = SignupPage;