// screens-marketing.jsx — landing + signup + login
const M_useS = React.useState;

function Landing({ t, fa, setLang, onSignup, onSignin }) {
  return (
    <div className="landing">
      <div className="top">
        <div className="mark" style={{ fontSize: "14px" }}><span className="glyph">C</span>{t.brand}</div>
      </div>
      <div className="hero">
        <h1 className="display" style={{ fontFamily: "Pelak", fontWeight: "400", height: "190px" }}>{t.landing_h1_a}<br /><em>{t.landing_h1_em}</em></h1>
        <p className="sub" style={{ margin: "-19px 0px 16px" }}>{t.landing_sub}</p>
        <div className="how">
          {t.how_steps.map((s, i) =>
          <div className="step" key={i}>
              <div className="n">{s.n}</div>
              <div className="t" dangerouslySetInnerHTML={{ __html: s.html }}></div>
            </div>
          )}
        </div>
      </div>
      <div className="cta">
        <button className="btn btn-primary btn-block btn-lg" onClick={onSignup}>
          <Ico name="phone-fill" size={16} />{t.cta_signup}
        </button>
        <button className="btn btn-link btn-block" onClick={onSignin}>{t.cta_signin}</button>
        <div className="foot">{t.foot}</div>
      </div>
    </div>);

}

function ErrBox({ msg }) {
  if (!msg) return null;
  return (
    <div style={{
      padding: "10px 14px", borderRadius: "var(--r-md)",
      background: "var(--ember-soft)", color: "var(--ember)",
      fontSize: 13, border: "0.5px solid oklch(0.58 0.17 28 / 0.2)",
      display: "flex", gap: 8, alignItems: "flex-start"
    }}>
      <span style={{ flex: 'none', marginTop: 1 }}><Ico name="alert" size={15} /></span>
      <span>{msg}</span>
    </div>);

}

function Signup({ t, fa, onDone, onBack, onSwitchToSignin }) {
  const [phone, setPhone] = M_useS("");
  const [email, setEmail] = M_useS("");
  const [password, setPassword] = M_useS("");
  const [name, setName] = M_useS("");
  const [err, setErr] = M_useS(null);
  const [busy, setBusy] = M_useS(false);

  const submit = async () => {
    setErr(null);setBusy(true);
    try {
      const ph = fromFa(phone).replace(/\s+/g, "");
      if (!ph || !email || !password) {
        setErr(fa ? "شماره، ایمیل و رمز لازم است." : "Phone, email and password are required.");
        setBusy(false);return;
      }
      await C2I.signup({ phone: ph, email, password, name: name || undefined });
      onDone();
    } catch (e) {
      setErr(e.offline ? t.network_err : e.status === 409 ? t.signup_err : e.message || t.signup_err);
    } finally {setBusy(false);}
  };

  return (
    <div className="signup">
      <button className="btn-link" style={{ padding: 0, color: 'var(--ink-mute)', display: 'inline-flex', alignItems: 'center', gap: 4, alignSelf: 'flex-start' }} onClick={onBack}>
        <Ico name={fa ? "chev-right" : "chev-left"} size={16} />{t.cancel}
      </button>
      <div className="head" style={{ paddingTop: 8 }}>
        <h2 className="display">{t.signup_h}</h2>
        <div className="sub">{t.signup_sub}</div>
      </div>
      <div className="fields">
        <ErrBox msg={err} />
        <div className="field">
          <label>{t.signup_phone}</label>
          <input value={phone} onChange={(e) => setPhone(e.target.value)} autoComplete="tel" placeholder={fa ? "‎+۱ (۴۱۶) ۵۵۵-۱۲۳۴" : "+1 (416) 555-1234"} />
        </div>
        <div className="field">
          <label>{t.signup_email}</label>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" autoComplete="email" />
        </div>
        <div className="field">
          <label>{t.signup_password}</label>
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="new-password" placeholder="••••••••" />
        </div>
        <div className="field">
          <label>{t.signup_name} <span style={{ color: 'var(--ink-faint)', fontWeight: 500, marginInlineStart: 6, textTransform: 'none', letterSpacing: 0 }}>· {t.optional}</span></label>
          <input value={name} onChange={(e) => setName(e.target.value)} placeholder={fa ? "وحید" : "Vahid"} />
        </div>
        <div className="trial" style={{ margin: 0 }}>
          <span className="gift"><Ico name="gift" size={18} /></span>
          <div className="body">{t.signup_trial_note}</div>
        </div>
      </div>
      <div className="actions">
        <button className="btn btn-primary btn-block btn-lg" onClick={submit} disabled={busy}>
          {busy ? fa ? "…" : "Creating…" : t.signup_cta}
        </button>
        <div className="legal">
          {t.have_account_q} <a onClick={onSwitchToSignin} style={{ color: 'var(--ink)', textDecoration: 'underline', cursor: 'pointer', fontWeight: 600 }}>{t.sign_in}</a>
        </div>
        <div className="legal" style={{ paddingTop: 0 }}>{t.legal}</div>
      </div>
    </div>);

}

function Signin({ t, fa, onDone, onBack, onSwitchToSignup }) {
  const [id, setId] = M_useS("");
  const [password, setPassword] = M_useS("");
  const [err, setErr] = M_useS(null);
  const [busy, setBusy] = M_useS(false);

  const submit = async () => {
    setErr(null);setBusy(true);
    try {
      if (!id || !password) {
        setErr(fa ? "شماره/ایمیل و رمز لازم است." : "Phone/email and password required.");
        setBusy(false);return;
      }
      const payload = id.includes("@") ? { email: id, password } : { phone: fromFa(id).replace(/\s+/g, ""), password };
      await C2I.login(payload);
      onDone();
    } catch (e) {
      setErr(e.offline ? t.network_err : e.status === 401 ? t.signin_err : e.message || t.signin_err);
    } finally {setBusy(false);}
  };

  return (
    <div className="signup">
      <button className="btn-link" style={{ padding: 0, color: 'var(--ink-mute)', display: 'inline-flex', alignItems: 'center', gap: 4, alignSelf: 'flex-start' }} onClick={onBack}>
        <Ico name={fa ? "chev-right" : "chev-left"} size={16} />{t.cancel}
      </button>
      <div className="head" style={{ paddingTop: 8 }}>
        <h2 className="display">{t.signin_h}</h2>
        <div className="sub">{t.signin_sub}</div>
      </div>
      <div className="fields">
        <ErrBox msg={err} />
        <div className="field">
          <label>{t.signin_phone_or_email}</label>
          <input value={id} onChange={(e) => setId(e.target.value)} autoComplete="username" placeholder={fa ? "‎+۱۴۱۶… یا you@…" : "+1416…   or   you@…"} />
        </div>
        <div className="field">
          <label>{t.signin_password}</label>
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" placeholder="••••••••" />
        </div>
      </div>
      <div className="actions">
        <button className="btn btn-primary btn-block btn-lg" onClick={submit} disabled={busy}>
          {busy ? "…" : t.signin_cta}
        </button>
        <div className="legal">
          {t.no_account_q} <a onClick={onSwitchToSignup} style={{ color: 'var(--ink)', textDecoration: 'underline', cursor: 'pointer', fontWeight: 600 }}>{t.create_account}</a>
        </div>
      </div>
    </div>);

}

window.Landing = Landing;
window.Signup = Signup;
window.Signin = Signin;